Generator barvnih tonov
Ustvarite odtenke barve tako, da jo v enakomernih korakih mešate z nevtralno sivo, s čimer zmanjšate nasičenost, odtenek pa ostane enak. Vnesite eno barvo v poljubnem formatu CSS, izberite od 2 do 20 korakov in prostor mešanja ter dobite tabelo z vrednostmi HEX, RGB, HSL in OKLCH za vsak odtenek, začenši z izvirno barvo. Uporabno za umirjene palete, onemogočena stanja, nežne površine in umirjene različice blagovne znamke.
Pogosta vprašanja
Kaj je ton?
Ton je barva, pomešana s sivo. Ohranila bo svoj barvni odtenek in postala bolj umirjena, za razliko od svetlejšega odtenka, ki nastane z mešanjem z belo, ali temnejšega, ki nastane z mešanjem s črno.
Katera siva se uporablja?
Srednja siva sRGB #808080, rgb(128 128 128). Svetle barve zato postanejo nekoliko temnejše, temne pa nekoliko svetlejše, ko se ji približujejo; za mešanje z drugo sivo uporabite mešalnik barv in izberite svojo sivo.
Kako so razporejeni koraki?
Pri N korakih se v vrstici k barva meša z (k - 1) / N sive, zato 10 korakov pomeni 0 %, 10 %, 20 % in tako naprej do 90 %. Prva vrstica vedno vsebuje izvirno barvo, navadna siva pa ni nikoli vključena v seznam.
Kako se ton razlikuje od zmanjšanja nasičenosti HSL?
Zmanjšanje nasičenosti HSL ohrani svetlost HSL, medtem ko mešanje s sivo svetlost približa srednji vrednosti. Toni so zato videti, kot da bi barvo gledali skozi siv filter, kar je primerno za umirjena ozadja in onemogočena stanja.
Kakšna je razlika med mešanjem v sRGB in OKLab?
Mešanje sRGB izračuna povprečje vrednosti kanalov, kodiranih z gama, kar je klasičen pristop pri barvnih lestvicah, podobnih barvam za slikanje, in Sass mix(). Mešanje OKLab poteka v zaznavnem prostoru, zato se kroma z vsakim korakom zmanjšuje bolj enakomerno.
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 tonov 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 so prikazani delež sive, šestnajstiška koda, rgb(), hsl() in oklch() v sodobni sintaksi CSS. Kanali RGB so cela števila, odstotki HSL imajo največ dve decimalni mesti, svetlost in kroma OKLCH pa največ štiri.
Kaj se zgodi s prosojnimi barvami in barvami širokega barvnega razpona?
Vhodna alfa se ohrani pri vsakem tonu, zato imajo šestnajstiške kode nato 8 števk. Vrednosti zunaj barvnega razpona se preslikajo v sRGB z algoritmom CSS Color 4 v stolpcih HEX, RGB in HSL, medtem ko stolpec OKLCH ohrani nepreslikano vrednost.
Kako poustvarim ton v CSS?
Kopirajte šestnajstiško vrednost ali vrednost oklch() oziroma pustite brskalniku, da jo zmeša z color-mix(in oklab, var(--brand) 70%, #808080) za 30-odstotni ton pri nastavitvi OKLab. color-mix() deluje v vseh aktualnih večjih brskalnikih.