Värvitoonide generaator
Looge värvist tumedamaid toone, segades seda võrdsete sammudega mustaga. Sisestage üks värv mis tahes CSS vormingus, valige 2 kuni 20 sammu ja segamisruum ning saate tabeli iga tooni HEX-, RGB-, HSL- ja OKLCH-väärtustega, alustades algsest värvist. sRGB-segamine annab klassikaliste toonitööriistade ja Sass tulemused, samas kui OKLab tagab tajutavalt ühtlased sammud. Sobib hästi UI värviskaalade loomiseks.
Korduma kippuvad küsimused
Mis on toon?
Toon on mustaga segatud värv. See säilitab oma värvitooni ja muutub tumedamaks, erinevalt valgega segatud heledamast värvivariandist või halliga segatud värviastmest.
Kuidas sammud jaotuvad?
N sammu korral segatakse reas k värv mustaga vahekorras (k - 1) / N, nii et 10 sammu annavad 0%, 10%, 20% ja nii edasi kuni 90%. Esimeses reas on alati algne värv ning puhas must ei kuulu loendisse.
Mis vahe on sRGB- ja OKLab-segamisel?
sRGB-segamisel arvutatakse gammakodeeritud kanaliväärtuste keskmine; nii segavad mustaga Sass mix() ja enamik klassikalisi toonigeneraatoreid. OKLab-segamine toimub tajuruumis, mistõttu näivad sammud heleduse poolest ühtlasemad ja tumedamad toonid säilitavad rohkem oma värvi.
Milliseid sisendvorminguid saan kasutada?
Kuueteistkümnendkoodid koos märgiga # või ilma, CSS värvinimed, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() ja cmyk(). Sisestage iga käivituse jaoks üks värv.
Mitu tooni saan luua?
Ühe käivitusega 2 kuni 20, vaikimisi 10. Arvu sisse kuulub esimese rea algne värv.
Milliseid väärtusi tabel kuvab?
Iga sammu kohta musta osakaalu, HEX-koodi, rgb(), hsl() ja oklch() tänapäevases CSS süntaksis. RGB kanalid on täisarvud, HSL protsentidel on kuni kaks kümnendkohta ning OKLCH heledusel ja värviküllastusel kuni neli.
Mis juhtub läbipaistvate värvidega?
Sisendvärvi alfa säilib igas toonis, sest musta lisatakse sama alfaga. HEX-koodid on siis 8-kohalised ja CSS funktsioonides on alfa pärast kaldkriipsu.
Mis juhtub värvidega, mis jäävad väljapoole sRGB-d?
Segamisel kasutatakse kogu värvi, kuid HEX, RGB ja HSL suudavad kuvada ainult sRGB-d, seega teisendatakse neist veergudest värvigammast väljapoole jäävad sammud sRGB-sse, kasutades CSS Color 4 algoritmi. OKLCH veerus säilib teisendamata väärtus.
Kuidas kasutada toone CSS-is?
Kopeerige HEX- või oklch()-väärtused kohandatud omadustesse, näiteks --brand-600 ja --brand-700. Kui soovite segada värve hoopis brauseris, annab color-mix(in oklab, var(--brand) 80%, black) OKLab-seadistusega sama 20% tooni.
Kas tumedamad toonid on automaatselt ligipääsetavad?
Ei. Kontrollige teksti kontrasti iga tooni taustal kontrastikontrollijaga, sest tumedana näiv toon võib siiski jääda alla väärtuse 4.5:1, kui seda võrrelda mõne teise tumeda värvi või värvilise tekstiga.