# Spalvų atspalvių generatorius

Generuokite tamsesnius spalvos atspalvius tolygiais žingsniais maišydami ją su juoda. Įveskite vieną spalvą bet kuriuo CSS formatu, pasirinkite nuo 2 iki 20 žingsnių ir maišymo erdvę – gausite lentelę, kurioje pateikiamos kiekvieno atspalvio HEX, RGB, HSL ir OKLCH reikšmės, pradedant pradine spalva. Maišymas sRGB erdvėje veikia kaip klasikiniai atspalvių įrankiai ir Sass, o naudojant OKLab gaunami suvokiamai tolygūs žingsniai. Puikiai tinka UI spalvų skalėms kurti.

## Dažnai užduodami klausimai

### Kas yra atspalvis?

Atspalvis – tai spalva, sumaišyta su juoda. Ji išlaiko savo toną ir tampa tamsesnė, kitaip nei šviesintas atspalvis, kuris maišomas su balta, 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 juodos spalvos, todėl 10 žingsnių reiškia 0%, 10%, 20% ir taip toliau iki 90%. Pirmoje eilutėje visada pateikiama pradinė spalva, o gryna juoda į 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 juoda ir veikia dauguma klasikinių atspalvių generatorių. Maišymas OKLab erdvėje vyksta suvokiamojoje erdvėje, todėl šviesumo žingsniai atrodo tolygesni, o tamsesni atspalviai išlaiko daugiau spalvos.

### 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 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 juodos 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 atspalviui, nes juoda 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 atspalvius CSS?

Nukopijuokite šešioliktaines arba oklch() reikšmes į pasirinktines ypatybes, pavyzdžiui, --brand-600 ir --brand-700. Norėdami maišyti tiesiai naršyklėje, naudokite color-mix(in oklab, var(--brand) 80%, black) – taip gausite tokį patį 20% atspalvį kaip pasirinkę OKLab.

### Ar tamsesni atspalviai automatiškai yra prieinami?

Ne. Patikrinkite teksto kontrastą su kiekvienu atspalviu, nes tamsiai atrodantis atspalvis vis tiek gali neatitikti 4.5:1 reikalavimo, kai naudojamas su kita tamsia spalva arba spalvotu tekstu.

Jūsų reklama čia?

[Parašykite mums el. paštu](mailto:hi@dennn.is?subject=Reklama%20svetain%C4%97je%20OneClick%20Pro)

[Reklama Įskiepių rinkinys, paruoštas agentams, skirtas WordPress.](https://sleekwp.com/?ref=oneclickpro)