Litaspjaldsframleiðandi

Hvernig á að nota litaspjaldsframleiðandann

1. Veldu Grunnlitur með litasýninu eða sláðu inn hvaða kóða sem er í Kóði grunnlitar (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS-nafn …).
2. Veldu Samhljómur: Andstæður, Nágrannalitir, Þríund, Klofin andstæða, Fjórund (ferhyrningur), Ferningur eða Einlita.
3. Veldu Litahjól: HSL (klassískt) eða OKLCH (skynjunarlegt). Litaspjaldið uppfærist þegar þú breytir einhverri stillingu; Búa til litaspjald endurnýjar það líka.
4. Afritaðu einn lit með Afrita hnappnum undir litasýninu, eða veldu snið í Flytja út sem (HEX-listi, CSS-breytur, SCSS-breytur, JSON-fylki eða Tailwind-litir) og notaðu Afrita eða Sækja fyrir allt litaspjaldið.

Hvert litasýni sýnir HEX-kóða sinn í svörtu eða hvítu, hvort sem hefur betri birtuskil, og stöðu sína miðað við grunnlitinn (til dæmis +120°).

Litasamhljómar

Litasamhljómar eru föst horn á litahjólinu. Út frá grunnlitblænum snýr tólið litblænum og heldur mettun og ljósleika grunnlitarins.

• Andstæður (0°, 180°): gagnstæði liturinn. Hámarks birtuskil, frábært fyrir hnapp með ákalli til aðgerða á móti aðallit vörumerkis.
• Nágrannalitir (−60°, −30°, 0°, +30°, +60°): nágrannar á hjólinu. Rólegar og eðlilegar samsetningar sem henta vel fyrir bakgrunna og myndskreytingar.
• Þríund (0°, 120°, 240°): þrír jafnt dreifðir litblæir. Líflegt og jafnvægt; yfirleitt ræður einn litur og hinir tveir eru áherslulitir.
• Klofin andstæða (0°, 150°, 210°): nágrannarnir tveir við andstæðuna. Sterk birtuskil með minni spennu en hrein andstæða.
• Fjórund (ferhyrningur) (0°, 60°, 180°, 240°): tvö andstæð pör. Auðug litaspjöld sem þurfa einn ráðandi lit til að haldast samhangandi.
• Ferningur (0°, 90°, 180°, 270°): fjórir jafnt dreifðir litblæir.
• Einlita: einn litblær í fimm ljósleikaþrepum, frá dökku til ljóss. Tilvalið fyrir stöður í viðmóti, línurit og lágstemmda hönnun.

HSL- eða OKLCH-hjól?

HSL (klassískt) hjólið er hefðbundna hjólið sem flest hönnunarforrit og kennsluefni nota. Galli þess er að jöfn horn líta ekki jafn björt út: gult við 60° lítur út fyrir að vera mun ljósara en blátt við 240° með sama HSL-ljósleika.

OKLCH (skynjunarlegt) hjólið snýr litblænum í Oklab-litalíkaninu, sem er hannað svo að ljósleiki líti jafn út. Litaspjöld byggð á því hafa liti með svipað sjónrænt vægi, sem hjálpar við aðgengileg birtuskil. Sumir snúnir litir geta lent utan þess sem skjár getur sýnt; tólið lækkar þá litmettun þeirra örlítið svo hægt sé að sýna þá.

Útflutt litaspjald notað

CSS-breytur skila :root blokk með --color-1, --color-2 … sem þú getur límt í stílblað. SCSS-breytur gefa línur eins og $color-1: …;, JSON-fylki gefur lista af HEX-strengjum fyrir skriftur og Tailwind-litir gefa colors hlut með lyklunum 100, 200, 300 … til að líma í Tailwind-stillingarnar þínar.

Áður en þú gefur út skaltu athuga birtuskil texta: samhljómur tryggir þægilega litblæi, ekki læsilegan texta. Notaðu dökka eða ljósa hlutlausa liti fyrir meginmál og geymdu mettuðu litina fyrir áherslur, hnappa og myndir.