Heledamate ja tumedamate toonide generaator

Kuidas toonide generaatorit kasutada

1. Vali Põhivärv värviproovi abil või sisesta väärtus väljale Värvikood: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) või CSS-i nimi, näiteks teal.
2. Vali Samm: 5%, 10%, 20% või 25%. Sammuga 10% saad heledamad toonid 10%, 20% … 100% ja sama palju tumedamaid toone.
3. Vali, kuidas Segamisruum töötab: OKLCH (tajupõhine) või sRGB (klassikaline). Mõlemad read uuenevad korraga: Heledamad toonid (segatud valgega) ja Tumedamad toonid (segatud mustaga), kumbki algab põhivärvist.
4. Klõpsa mis tahes värviproovi all nupul Kopeeri, et kopeerida selle HEX-kood.
5. Jaotises Ekspordi kujul vali CSS-i muutujad, Tailwindi seadistus (v3), Tailwind @theme (v4), SCSS-i muutujad või JSON, sea Nimi, näiteks primary või brand, ning Kopeeri või Laadi alla kood.

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

Heledamad toonid, tumedamad toonid ja hallid toonid

Värviteoorias on heledam toon (tint) valgega segatud värv, tumedam toon (shade) mustaga segatud värv ja hall toon (tone) halliga segatud värv. Protsent ütleb, kui palju valget või musta lisatakse: 30% heledam toon on 70% põhivärvi ja 30% valget. 100% juures jõuad puhta valge või puhta mustani, mistõttu on iga rea viimane värviproov alati #FFFFFF või #000000; see märgib skaala lõppu.

Heledamad ja tumedamad toonid on kiireim viis ühtlase skaala koostamiseks ühest brändivärvist: heledad taustad ja hõljumisolekud heledamatest toonidest, äärised, vajutatud olekud ja tume tekst tumedamatest.

OKLCH- või sRGB-segamine?

sRGB (klassikaline) segab punase, rohelise ja sinise väärtused otse. Seda teeb enamik vanemaid generaatoreid ja see vastab CSS-i funktsioonile color-mix(in srgb, …). Heledama tooni valem on lihtsalt kanal + (255 − kanal) × p ja tumedama tooni valem kanal × (1 − p). See on ennustatav, kuid sammud ei ole tajus ühtlased: sinised kalduvad heledamaks minnes lilla poole ja tumedad toonid näevad sageli porised välja.

OKLCH (tajupõhine) segab Björn Ottossoni 2020. aastal loodud OKLCH-värviruumis, nagu CSS-i color-mix(in oklch, …). Heledust, kroma ja tooni interpoleeritakse eraldi. Valgel ja mustal ei ole tooni, seega säilib põhivärvi toon kogu tee, ja iga samm muudab heledust visuaalselt sarnase suuruse võrra. Värvid, mis jääksid väljapoole sRGB gamuuti, tuuakse tagasi kroma vähendamisega, mitte kanalite lõikamisega, nii et toon püsib stabiilne. Disainisüsteemide jaoks annab see tavaliselt puhtamad ja ühtlasemad skaalad.

Ekspordi kasutamine

• CSS-i muutujad annavad :root ploki, näiteks --primary-tint-20 ja --primary-shade-40, mis on valmis stiililehele kleepimiseks.
• Tailwindi seadistus (v3) annab colors objekti omaduse theme.extend.colors jaoks; seejärel kirjutad klasse nagu bg-primary-tint-20 või text-primary-shade-60. DEFAULT hoiab põhivärvi, seega töötab ka bg-primary.
• Tailwind @theme (v4) annab --color-… muutujad Tailwind 4 CSS-põhise seadistuse jaoks.
• SCSS-i muutujad ja JSON sobivad teistele ehitustööriistadele ja disainimärkidele.

Nimed muudetakse väiketähtedeks ja tühikud muutuvad sidekriipsudeks, seega „Brand Blue“ muutub nimeks brand-blue.