Spalvų tonų generatorius
Generuokite spalvos tonus, maišydami ją su neutralia pilka vienodais žingsniais. Taip sumažinamas sodrumas, išlaikant atspalvį. Įveskite vieną spalvą bet kokiu CSS formatu, pasirinkite nuo 2 iki 20 žingsnių ir maišymo erdvę. Gausite lentelę su kiekvieno tono HEX, RGB, HSL ir OKLCH reikšmėmis, pradedant pradine spalva. Tinka prislopintoms paletėms, išjungtų elementų būsenoms, subtiliems paviršiams ir santūresniems prekės ženklo variantams.
Dažnai užduodami klausimai
Kas yra tonas?
Tonas – tai spalva, sumaišyta su pilka. Ji išlaiko savo atspalvį ir tampa prislopinta. Atspalvis (tint) maišomas su balta, o šešėlis – su juoda.
Kokia pilka spalva naudojama?
Naudojama sRGB vidutinė pilka #808080, rgb(128 128 128). Todėl šviesios spalvos šiek tiek patamsėja, o tamsios – pašviesėja, artėdamos prie jos. Jei norite maišyti su kita pilka spalva, naudokite spalvų maišytuvą ir pasirinkite ją patys.
Kaip išdėstomi žingsniai?
Esant N žingsnių, k-ojoje eilutėje spalva sumaišoma su (k - 1) / N pilkos spalvos. Pavyzdžiui, 10 žingsnių reiškia 0%, 10%, 20% ir t. t. iki 90%. Pirmoje eilutėje visada pateikiama pradinė spalva, o gryna pilka į sąrašą neįtraukiama.
Kuo tonas skiriasi nuo HSL sodrumo mažinimo?
Mažinant HSL sodrumą, išlaikomas HSL šviesumas, o maišant su pilka spalva šviesumas taip pat artėja prie vidutinio. Todėl tonai atrodo tarsi spalva, matoma pro pilką filtrą, ir tinka prislopintiems fonams bei išjungtų elementų būsenoms.
Kuo skiriasi maišymas sRGB ir OKLab erdvėse?
Maišant sRGB, apskaičiuojamas gama koduotų kanalų verčių vidurkis – klasikinis dažams būdingų tonų diagramų ir Sass mix() metodas. Maišant OKLab, naudojama suvokimo erdvė, todėl chroma tolygiau mažėja su kiekvienu žingsniu.
Kokius įvesties formatus galiu naudoti?
Šešioliktainiai kodai su # arba be jo, CSS spalvų pavadinimai, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() ir cmyk(). Vieno paleidimo metu įveskite vieną spalvą.
Kiek tonų galiu sugeneruoti?
Nuo 2 iki 20 per vieną paleidimą, numatytasis skaičius – 10. Į šį skaičių įtraukiama pradinė spalva pirmoje eilutėje.
Kokias reikšmes rodo lentelė?
Kiekvienam žingsniui pateikiama pilkos spalvos dalis, HEX kodas, rgb(), hsl() ir oklch() šiuolaikine CSS sintakse. RGB kanalų reikšmės pateikiamos sveikaisiais skaičiais, HSL procentai – iki dviejų skaitmenų po kablelio, o OKLCH šviesumas ir chroma – iki keturių.
Kas nutinka skaidrioms ir plataus spalvų diapazono spalvoms?
Pradinės spalvos alfa reikšmė išsaugoma kiekvienam tonui, todėl HEX kodai turi 8 skaitmenis. Už sRGB gamos ribų esančios reikšmės HEX, RGB ir HSL stulpeliuose pritaikomos sRGB naudojant CSS Color 4 algoritmą, o OKLCH stulpelyje paliekama nepritaikyta reikšmė.
Kaip atkurti toną naudojant CSS?
Nukopijuokite HEX arba oklch() reikšmę arba leiskite naršyklei sumaišyti spalvas naudodama color-mix(in oklab, var(--brand) 70%, #808080), kad gautumėte 30% toną pagal OKLab nustatymą. color-mix() veikia visose dabartinėse pagrindinėse naršyklėse.