Spalvų šviesintų atspalvių generatorius
Generuokite šviesesnius spalvos atspalvius tolygiais žingsniais maišydami ją su balta. Įveskite vieną spalvą bet kuriuo CSS formatu, pasirinkite nuo 2 iki 20 žingsnių ir maišymo erdvę – gausite lentelę, kurioje pateikiamos kiekvieno šviesinto atspalvio HEX, RGB, HSL ir OKLCH reikšmės, pradedant pradine spalva. Maišymas sRGB erdvėje veikia kaip klasikiniai šviesintų atspalvių įrankiai ir Sass, o naudojant OKLab gaunami suvokiamai tolygūs žingsniai. Puikiai tinka fonams, užvedimo būsenoms ir skalėms.
Dažnai užduodami klausimai
Kas yra šviesintas atspalvis?
Šviesintas atspalvis – tai spalva, sumaišyta su balta. Ji išlaiko savo toną ir tampa šviesesnė bei blankesnė, kitaip nei atspalvis, kuris maišomas su juoda, arba tonas, kuris maišomas su pilka.
Kaip išdėstomi žingsniai?
Kai žingsnių skaičius yra N, eilutėje k spalva maišoma su (k - 1) / N baltos spalvos, todėl 10 žingsnių reiškia 0%, 10%, 20% ir taip toliau iki 90%. Pirmoje eilutėje visada pateikiama pradinė spalva, o gryna balta į sąrašą neįtraukiama.
Kuo skiriasi maišymas sRGB ir OKLab erdvėse?
Maišant sRGB erdvėje apskaičiuojamas gama koduotų kanalų reikšmių vidurkis – taip Sass maišo mix() su balta ir veikia dauguma klasikinių šviesintų atspalvių generatorių. Maišymas OKLab erdvėje vyksta suvokiamojoje erdvėje, todėl šviesumo žingsniai atrodo tolygesni, o šviesūs atspalviai taip greitai neišblunka.
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 šviesintų atspalvių 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 rodomas baltos spalvos kiekis, šešioliktainis kodas, rgb(), hsl() ir oklch() šiuolaikine CSS sintakse. RGB kanalai pateikiami sveikaisiais skaičiais, HSL procentai – iki dviejų skaitmenų po kablelio, o OKLCH šviesumas ir spalvingumas – iki keturių.
Kas nutinka skaidrioms spalvoms?
Įvesties alfa reikšmė išsaugoma kiekvienam šviesintam atspalviui, nes balta maišoma naudojant tą pačią alfa reikšmę. Tuomet šešioliktainiai kodai turi 8 skaitmenis, o CSS funkcijose alfa reikšmė rašoma po pasvirojo brūkšnio.
Kas nutinka spalvoms už sRGB ribų?
Maišant naudojama visa spalva, tačiau HEX, RGB ir HSL gali rodyti tik sRGB, todėl už spalvų diapazono ribų esančių žingsnių reikšmės šiuose stulpeliuose pagal CSS Color 4 algoritmą konvertuojamos į sRGB. OKLCH stulpelyje paliekama nekonvertuota reikšmė.
Kaip naudoti šviesintus atspalvius CSS?
Nukopijuokite šešioliktaines arba oklch() reikšmes į pasirinktines ypatybes, pavyzdžiui, --brand-100 ir --brand-200. Norėdami maišyti tiesiai naršyklėje, naudokite color-mix(in oklab, var(--brand) 80%, white) – taip gausite tokį patį 20% šviesintą atspalvį kaip pasirinkę OKLab.
Ar galiu naudoti baltą tekstą ant šviesaus atspalvio?
Paprastai ne, nes šviesių atspalvių ir baltos spalvos kontrastas yra mažas. Ant šviesių atspalvių naudokite tamsų tekstą ir patikrinkite kiekvieną derinį kontrasto tikrintuvu; įprasto teksto kontrastas pagal WCAG AA turi būti bent 4.5:1.