Ljósari og dekkri litir

Hvernig á að nota tól fyrir ljósari og dekkri liti

1. Veldu Grunnlitur með litasýninu eða sláðu inn gildi í Litakóði: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) eða CSS-nafn eins og teal.
2. Veldu Skref: 5%, 10%, 20% eða 25%. Með 10% færðu ljósari tóna við 10%, 20% … 100% og jafn marga dekkri tóna.
3. Veldu hvernig á að Blanda í: OKLCH (skynjunarlegt) eða sRGB (klassískt). Raðirnar tvær uppfærast samtímis: Ljósari tónar (blandaðir við hvítt) og Dekkri tónar (blandaðir við svart), hvor um sig frá grunnlitnum.
4. Smelltu á Afrita undir hvaða litasýni sem er til að afrita HEX-kóða þess.
5. Undir Flytja út sem velurðu CSS-breytur, Tailwind-stillingar (v3), Tailwind @theme (v4), SCSS-breytur eða JSON, stillir Nafn eins og primary eða brand, og afritar eða sækir kóðann.

Ljósari tónar, dekkri tónar og mildir tónar

Í litafræði er tint litur blandaður við hvítt, shade litur blandaður við svart og tone litur blandaður við grátt. Prósentan segir hversu miklu hvítu eða svörtu er bætt við: 30% tint er 70% grunnlitur og 30% hvítt. Við 100% nærðu hreinu hvítu eða hreinu svörtu, og þess vegna er síðasta litasýni hverrar raðar alltaf #FFFFFF eða #000000; það markar enda kvarðans.

Ljósari og dekkri tónar eru fljótlegasta leiðin til að byggja samræmdan kvarða úr einum vörumerkislit: ljósa bakgrunna og sveimistöður úr ljósari tónunum, ramma, niðurþrýstar stöður og dökkan texta úr dekkri tónunum.

OKLCH- eða sRGB-blöndun?

sRGB (klassískt) blandar rauðu, grænu og bláu gildunum beint. Það er það sem flestir eldri framleiðendur gera og passar við CSS color-mix(in srgb, …). Formúlan fyrir ljósari tón er einfaldlega channel + (255 − channel) × p og fyrir dekkri channel × (1 − p). Það er fyrirsjáanlegt, en skrefin eru ekki jöfn fyrir augað: bláir litir hafa tilhneigingu til að reka í átt að fjólubláu þegar þeir ljósast og dökkir tónar líta oft út fyrir að vera drullugir.

OKLCH (skynjunarlegt) blandar í OKLCH-litarýminu sem Björn Ottosson hannaði árið 2020, eins og CSS color-mix(in oklch, …). Ljósleiki, litmettun og litblær eru brúuð hvert fyrir sig. Hvítt og svart hafa engan litblæ, svo grunnlitblærinn er geymdur alla leið og hvert skref breytir ljósleika um sjónrænt svipað magn. Litir sem lenda utan sRGB-sviðsins eru færðir til baka með því að minnka litmettun, ekki með því að klippa rásir, svo litblærinn helst stöðugur. Fyrir hönnunarkerfi gefur þetta yfirleitt hreinni og jafnari kvarða.

Útflutningurinn notaður

• CSS-breytur skila :root blokk eins og --primary-tint-20 og --primary-shade-40, tilbúinni til að líma í stílblað.
• Tailwind-stillingar (v3) gefa colors hlut fyrir theme.extend.colors; þú skrifar þá klasa eins og bg-primary-tint-20 eða text-primary-shade-60. DEFAULT geymir grunninn, svo bg-primary virkar líka.
• Tailwind @theme (v4) gefur --color-… breytur fyrir CSS-fyrst stillingar Tailwind 4.
• SCSS-breytur og JSON henta öðrum byggingartólum og hönnunargildum.

Nöfn eru gerð með lágstöfum og bil verða bandstrik, svo „Brand Blue“ verður brand-blue.