Värvipaletigeneraator

Kuidas värvipaletigeneraatorit kasutada

1. Vali Põhivärv värviproovi abil või sisesta mis tahes kood väljale Põhivärvi kood (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS-i nimi…).
2. Vali Harmoonia: Komplementaarne, Analoogne, Triaadiline, Poolitatud komplementaarne, Tetraadiline (ristkülik), Ruut või Monokromaatiline.
3. Vali Värviratas: HSL (klassikaline) või OKLCH (tajupõhine). Palett uueneb iga valiku muutmisel; ka nupp Loo palett värskendab seda.
4. Kopeeri üksik värv selle värviproovi all oleva nupuga Kopeeri või vali Ekspordi kujul vorming (HEX-loend, CSS-i muutujad, SCSS-i muutujad, JSON-massiiv või Tailwindi värvid) ja kasuta kogu paleti jaoks nuppu Kopeeri või Laadi alla.

Iga värviproov näitab oma HEX-koodi mustana või valgena, olenevalt sellest, kumb annab parema kontrasti, ning oma asendit põhivärvi suhtes (näiteks +120°).

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Värviharmooniad

Värviharmooniad on kindlad nurgad värviratta peal. Alustades sinu põhitoonist pöörab tööriist tooni ja säilitab põhivärvi küllastuse ning heleduse.

• Komplementaarne (0°, 180°): vastasvärv. Maksimaalne kontrast, suurepärane üleskutsenupu jaoks põhilise brändivärvi taustal.
• Analoogne (−60°, −30°, 0°, +30°, +60°): naabrid värviratta peal. Rahulikud, loomulikud kombinatsioonid, mis sobivad hästi taustadeks ja illustratsioonideks.
• Triaadiline (0°, 120°, 240°): kolm ühtlaselt paigutatud tooni. Elav ja tasakaalus; tavaliselt domineerib üks värv ja ülejäänud kaks on aktsendid.
• Poolitatud komplementaarne (0°, 150°, 210°): komplementaarvärvi kaks naabrit. Tugev kontrast väiksema pingega kui puhta komplementaarpaari korral.
• Tetraadiline (ristkülik) (0°, 60°, 180°, 240°): kaks komplementaarset paari. Rikkalikud paletid, mis vajavad sidususe jaoks ühte domineerivat värvi.
• Ruut (0°, 90°, 180°, 270°): neli ühtlaselt paigutatud tooni.
• Monokromaatiline: üks toon viies heledusastmes, tumedast heledani. Ideaalne kasutajaliidese olekute, diagrammide ja peenekoeliste kujunduste jaoks.

HSL- või OKLCH-ratas?

HSL (klassikaline) ratas on traditsiooniline, mida kasutab enamik disainitööriistu ja õpetusi. Selle puuduseks on, et võrdsed nurgad ei paista võrdselt heledad: kollane 60° juures paistab palju heledam kui sinine 240° juures sama HSL-i heleduse korral.

OKLCH (tajupõhine) ratas pöörab tooni Oklabi värvimudelis, mis on loodud nii, et heledus paistaks ühtlane. Selle põhjal tehtud palettide värvidel on sarnane visuaalne kaal, mis aitab ligipääsetava kontrasti saavutamisel. Mõned pööratud värvid võivad jääda väljapoole seda, mida ekraan suudab kuvada; tööriist vähendab siis nende kroma veidi, et need püsiksid kuvatavad.

Eksporditud paleti kasutamine

CSS-i muutujad annavad :root ploki, kus on --color-1, --color-2…, mille saad stiililehele kleepida. SCSS-i muutujad annavad read kujul $color-1: …;, JSON-massiiv annab skriptide jaoks HEX-stringide loendi ja Tailwindi värvid annab colors objekti võtmetega 100, 200, 300…, mille saad kleepida oma Tailwindi seadistusse.

Enne avaldamist kontrolli teksti kontrasti: harmoonia tagab meeldivad toonid, mitte loetava teksti. Kasuta põhitekstiks tumedaid või heledaid neutraalseid toone ning hoia küllastunud paletivärvid aktsentide, nuppude ja graafika jaoks.