Generator svetlejših odtenkov barv
Ustvarite svetlejše odtenke barve tako, da jo v enakomernih korakih mešate z belo. 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 svetlejši odtenek, začenši z izvirno barvo. Mešanje v sRGB se ujema s klasičnimi orodji za svetlejše odtenke in Sass, medtem ko OKLab zagotavlja enakomerne zaznavne korake. Idealno za ozadja, stanja ob prehodu kazalca in lestvice.
Pogosta vprašanja
Kaj je svetlejši odtenek?
Svetlejši odtenek je barva, pomešana z belo. Ohranita se njen barvni ton, barva pa postane svetlejša in bolj bleda; pri temnejšem odtenku jo pomešamo s črno, pri tonu pa s sivo.
Kako so razporejeni koraki?
Pri N korakih se v vrstici k barvi primeša (k - 1) / N bele, zato 10 korakov pomeni 0 %, 10 %, 20 % in tako naprej do 90 %. Prva vrstica vedno vsebuje izvirno barvo, čista bela 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 z belo in večina klasičnih generatorjev svetlejših odtenkov. Mešanje v OKLab poteka v zaznavnem prostoru, zato so koraki svetlosti videti enakomernejši, svetlejši konec pa ne zbledi tako hitro.
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 svetlejših 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ž bele 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 svetlejših odtenkih, saj se bela 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 svetlejše odtenke v CSS?
Vrednosti HEX ali oklch() kopirajte v lastnosti po meri, kot sta --brand-100 in --brand-200. Če želite mešati kar v brskalniku, color-mix(in oklab, var(--brand) 80%, white) ustvari enak 20-odstotni svetlejši odtenek kot nastavitev OKLab.
Ali lahko na svetlem odtenku uporabim belo besedilo?
Običajno ne, saj je kontrast svetlih odtenkov z belo majhen. Na svetlih odtenkih uporabite temno besedilo in vsak par preverite z orodjem za preverjanje kontrasta; običajno besedilo za WCAG AA potrebuje najmanj 4.5:1.