Krāsu paletes ģenerators

Kā lietot krāsu paletes ģeneratoru

1. Izvēlieties Pamatkrāsa ar krāsu paraugu vai ievadiet jebkuru kodu laukā Pamatkrāsas kods (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS nosaukumu…).
2. Izvēlieties Harmonija: komplementārā, analogā, triāde, sadalītā komplementārā, tetrāde (taisnstūris), kvadrāts vai monohromā.
3. Izvēlieties Krāsu aplis: HSL (klasiskais) vai OKLCH (uztveres). Palete atjaunojas, mainot jebkuru opciju; to atsvaidzina arī Ģenerēt paleti.
4. Nokopējiet vienu krāsu ar pogu Kopēt zem tās parauga vai izvēlieties formātu sadaļā Eksportēt kā (HEX saraksts, CSS mainīgie, SCSS mainīgie, JSON masīvs vai Tailwind krāsas) un izmantojiet Kopēt vai Lejupielādēt visai paletei.

Katrs paraugs rāda savu HEX kodu melnā vai baltā krāsā – atkarībā no labāka kontrasta – un savu pozīciju attiecībā pret pamatkrāsu (piemēram, +120°).

Krāsu harmonijas

Krāsu harmonijas ir fiksēti leņķi krāsu aplī. Sākot no jūsu pamatnokrāsas, rīks pagriež nokrāsu un saglabā pamatkrāsas piesātinājumu un gaišumu.

• Komplementārā (0°, 180°): pretējā krāsa. Maksimāls kontrasts, lieliski piemērots pogai ar aicinājumu uz darbību pret galveno zīmola krāsu.
• Analogā (−60°, −30°, 0°, +30°, +60°): kaimiņi aplī. Mierīgas, dabiskas kombinācijas, kas labi der fonam un ilustrācijām.
• Triāde (0°, 120°, 240°): trīs vienmērīgi izvietotas nokrāsas. Dzīvīga un līdzsvarota; parasti viena krāsa dominē, bet pārējās divas ir akcenti.
• Sadalītā komplementārā (0°, 150°, 210°): komplementārās krāsas abi kaimiņi. Spēcīgs kontrasts ar mazāku spriedzi nekā tīram komplementārajam pārim.
• Tetrāde (taisnstūris) (0°, 60°, 180°, 240°): divi komplementārie pāri. Bagātas paletes, kam vajadzīga viena dominējošā krāsa, lai saglabātu saskaņotību.
• Kvadrāts (0°, 90°, 180°, 270°): četras vienmērīgi izvietotas nokrāsas.
• Monohromā: viena nokrāsa piecos gaišuma soļos no tumšas līdz gaišai. Ideāli piemērota lietotāja saskarnes stāvokļiem, diagrammām un maigiem dizainiem.

HSL vai OKLCH aplis?

HSL (klasiskais) aplis ir tradicionālais, ko izmanto lielākā daļa dizaina rīku un pamācību. Tā trūkums ir tas, ka vienādi leņķi neizskatās vienādi spilgti: dzeltens pie 60° šķiet daudz gaišāks par zilu pie 240° ar to pašu HSL gaišumu.

OKLCH (uztveres) aplis griež nokrāsu Oklab krāsu modelī, kas veidots tā, lai gaišums izskatītos konsekvents. Uz tā veidotām paletēm krāsām ir līdzīgs vizuālais svars, kas palīdz nodrošināt pieejamu kontrastu. Dažas pagrieztās krāsas var nonākt ārpus tā, ko ekrāns spēj parādīt; tad rīks nedaudz samazina to hromu, lai tās paliktu attēlojamas.

Eksportētās paletes lietošana

CSS mainīgie veido :root bloku ar --color-1, --color-2…, ko var ielīmēt stilu lapā. SCSS mainīgie dod rindas $color-1: …;, JSON masīvs – HEX virkņu sarakstu skriptiem, bet Tailwind krāsas – colors objektu ar atslēgām 100, 200, 300…, ko ielīmēt Tailwind konfigurācijā.

Pirms publicēšanas pārbaudiet teksta kontrastu: harmonija garantē patīkamas nokrāsas, bet ne salasāmu tekstu. Pamattekstam izmantojiet tumšus vai gaišus neitrālos toņus, bet piesātinātās paletes krāsas paturiet akcentiem, pogām un grafikai.