Generator odtenkov barv
Ustvarite temnejše odtenke barve tako, da jo v enakomernih korakih mešate s črno. Vnesite eno barvo v poljubnem formatu CSS, izberite od 2 do 20 korakov in prostor za mešanje ter dobite tabelo z vrednostmi HEX, RGB, HSL in OKLCH za vsak odtenek, začenši z izvirno barvo. Mešanje v sRGB se ujema s klasičnimi orodji za odtenke in Sass, medtem ko OKLab zagotavlja enakomerne zaznavne korake. Idealno za izdelavo UI barvnih lestvic.
Pogosta vprašanja
Kaj je odtenek?
Odtenek je barva, pomešana s črno. Ohranijo se njen barvni ton, barva pa postane temnejša; pri svetlejšem odtenku jo pomešamo z belo, pri tonu pa s sivo.
Kako so razporejeni koraki?
Pri N korakih se v vrstici k barvi primeša (k - 1) / N črne, zato 10 korakov pomeni 0 %, 10 %, 20 % in tako naprej do 90 %. Prva vrstica vedno vsebuje izvirno barvo, čista črna pa ni vključena.
Kakšna je razlika med mešanjem v sRGB in OKLab?
Pri mešanju v sRGB se izračuna povprečje vrednosti kanalov, kodiranih z gama, kar počnejo Sass mix() pri mešanju s črno in večina klasičnih generatorjev odtenkov. Mešanje v OKLab poteka v zaznavnem prostoru, zato so koraki videti enakomernejši glede na svetlost, temnejši odtenki pa ohranijo več svoje barve.
Katere vhodne formate lahko uporabim?
Kode HEX z znakom # ali brez njega, imena barv CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() in cmyk(). Pri vsaki izvedbi vnesite eno barvo.
Koliko odtenkov lahko ustvarim?
Od 2 do 20 na izvedbo, privzeto 10. Število vključuje izvirno barvo v prvi vrstici.
Katere vrednosti prikazuje tabela?
Za vsak korak delež črne barve, kodo HEX, rgb(), hsl() in oklch() v sodobni sintaksi CSS. Kanali RGB so cela števila, odstotki HSL imajo največ dve decimalni mesti, svetlost in nasičenost OKLCH pa največ štiri.
Kaj se zgodi s prosojnimi barvami?
Prosojnost vhodne barve se ohrani pri vseh odtenkih, saj se črna primeša z enako stopnjo prosojnosti. Kode HEX imajo nato 8 števk, funkcije CSS pa se končajo z vrednostjo prosojnosti za poševnico.
Kaj se zgodi z barvami zunaj sRGB?
Mešanje uporablja celotno barvo, vendar lahko HEX, RGB in HSL prikažejo le sRGB, zato se barve zunaj barvnega obsega v teh stolpcih preslikajo v sRGB z algoritmom CSS Color 4. Stolpec OKLCH ohrani nepreslikano vrednost.
Kako uporabim odtenke v CSS?
Vrednosti HEX ali oklch() kopirajte v lastnosti po meri, kot sta --brand-600 in --brand-700. Če želite mešati kar v brskalniku, color-mix(in oklab, var(--brand) 80%, black) ustvari enak 20-odstotni odtenek kot nastavitev OKLab.
So temnejši odtenki samodejno dostopni?
Ne. Besedilo preverite glede na vsak odtenek z orodjem za preverjanje kontrasta, saj je lahko tudi na videz temen odtenek pod mejo 4.5:1 glede na drugo temno barvo ali obarvano besedilo.