Gaišāku un tumšāku toņu ģenerators

Kā lietot gaišāku un tumšāku toņu ģeneratoru

1. Izvēlieties Pamatkrāsa ar krāsu paraugu vai ievadiet vērtību laukā Krāsas kods: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) vai CSS nosaukumu, piemēram, teal.
2. Izvēlieties Solis: 5 %, 10 %, 20 % vai 25 %. Ar 10 % iegūstat gaišinājumus pie 10 %, 20 % … 100 % un tikpat daudz tumšinājumu.
3. Izvēlieties, kā Sajaukt telpā: OKLCH (uztveres) vai sRGB (klasiskā). Abas rindas atjaunojas vienlaikus: Gaišinājumi (sajaukti ar baltu) un Tumšinājumi (sajaukti ar melnu), katra sākot no pamatkrāsas.
4. Noklikšķiniet uz Kopēt zem jebkura parauga, lai nokopētu tā HEX kodu.
5. Sadaļā Eksportēt kā izvēlieties CSS mainīgie, Tailwind konfigurācija (v3), Tailwind @theme (v4), SCSS mainīgie vai JSON, iestatiet Nosaukums, piemēram, primary vai brand, un pēc tam Kopēt vai Lejupielādēt kodu.

Gaišinājumi, tumšinājumi un toņi

Krāsu teorijā gaišinājums (tint) ir krāsa, sajaukta ar baltu, tumšinājums (shade) ir krāsa, sajaukta ar melnu, bet tonis (tone) ir krāsa, sajaukta ar pelēku. Procents norāda, cik daudz balta vai melna pievienots: 30 % gaišinājums ir 70 % pamatkrāsas un 30 % balta. Pie 100 % sasniedzat tīri baltu vai tīri melnu, tāpēc katras rindas pēdējais paraugs vienmēr ir #FFFFFF vai #000000; tas iezīmē skalas beigas.

Gaišinājumi un tumšinājumi ir ātrākais veids, kā izveidot konsekventu skalu no vienas zīmola krāsas: gaiši foni un uzbraukšanas stāvokļi no gaišinājumiem, apmales, nospiestie stāvokļi un tumšs teksts no tumšinājumiem.

OKLCH vai sRGB sajaukšana?

sRGB (klasiskā) sajauc sarkano, zaļo un zilo vērtības tieši. Tā rīkojas vairums vecāko ģeneratoru, un tā atbilst CSS color-mix(in srgb, …). Gaišinājuma formula ir vienkārši kanāls + (255 − kanāls) × p, bet tumšinājumam kanāls × (1 − p). Tā ir paredzama, taču soļi nav vienmērīgi uztverē: zilie toņi, kļūstot gaišāki, mēdz novirzīties uz purpursarkano, un tumši toņi bieži izskatās duļķaini.

OKLCH (uztveres) sajauc OKLCH krāsu telpā, ko 2020. gadā izstrādāja Bjorns Otosons (Björn Ottosson), kā CSS color-mix(in oklch, …). Gaišums, hroma un nokrāsa tiek interpolēti atsevišķi. Baltajam un melnajam nokrāsas nav, tāpēc pamatnokrāsa tiek saglabāta visu ceļu, un katrs solis maina gaišumu vizuāli līdzīgā apjomā. Krāsas, kas nonāktu ārpus sRGB gamutas, tiek atgrieztas, samazinot hromu, nevis apgriežot kanālus, tāpēc nokrāsa paliek stabila. Dizaina sistēmām tas parasti dod tīrākas un vienmērīgākas skalas.

Eksporta lietošana

• CSS mainīgie veido :root bloku, piemēram, --primary-tint-20 un --primary-shade-40, gatavu ielīmēšanai stilu lapā.
• Tailwind konfigurācija (v3) dod colors objektu priekš theme.extend.colors; pēc tam rakstāt klases, piemēram, bg-primary-tint-20 vai text-primary-shade-60. DEFAULT satur pamatkrāsu, tāpēc darbojas arī bg-primary.
• Tailwind @theme (v4) dod --color-… mainīgos Tailwind 4 CSS-first konfigurācijai.
• SCSS mainīgie un JSON der citiem būvēšanas rīkiem un dizaina marķieriem.

Nosaukumi tiek pārvērsti mazajos burtos, un atstarpes kļūst par defisēm, tāpēc „Brand Blue“ kļūst par brand-blue.