Generator de nuanțe de culoare
Generați nuanțe mai întunecate ale unei culori amestecând-o cu negru în trepte egale. Introduceți o culoare în orice format CSS, alegeți între 2 și 20 de trepte și un spațiu de amestecare, apoi obțineți un tabel cu valori HEX, RGB, HSL și OKLCH pentru fiecare nuanță, începând cu culoarea originală. Amestecarea sRGB se potrivește cu instrumentele clasice de generare a nuanțelor și cu Sass, în timp ce OKLab oferă trepte uniforme perceptual. Ideal pentru construirea scalelor de culori UI.
Întrebări frecvente
Ce este o nuanță?
O nuanță este o culoare amestecată cu negru. Își păstrează tonalitatea și devine mai întunecată, spre deosebire de o tentă, care se amestecă cu alb, sau de un ton, care se amestecă cu gri.
Cum sunt distribuite treptele?
Cu N trepte, rândul k amestecă culoarea cu (k - 1) / N negru, astfel încât 10 trepte dau 0%, 10%, 20% și așa mai departe până la 90%. Primul rând este întotdeauna culoarea originală, iar negrul pur nu apare niciodată în listă.
Care este diferența dintre amestecarea sRGB și OKLab?
Amestecarea sRGB calculează media valorilor canalelor codificate gamma, așa cum fac Sass mix() cu negrul și majoritatea generatoarelor clasice de nuanțe. Amestecarea OKLab are loc într-un spațiu perceptual, astfel încât treptele par mai uniforme ca luminozitate, iar nuanțele mai întunecate își păstrează mai bine culoarea.
Ce formate de intrare pot folosi?
Coduri hexazecimale cu sau fără #, nume de culori CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() și cmyk(). Introduceți o singură culoare per rulare.
Câte nuanțe pot genera?
Între 2 și 20 per rulare, implicit 10. Numărul include culoarea originală de pe primul rând.
Ce valori sunt afișate în tabel?
Pentru fiecare treaptă: proporția de negru, codul hexazecimal, rgb(), hsl() și oklch() în sintaxa modernă CSS. Canalele RGB sunt numere întregi, procentele HSL au cel mult două zecimale, iar luminozitatea și croma OKLCH au cel mult patru.
Ce se întâmplă cu culorile transparente?
Valoarea alfa a culorii de intrare este păstrată pentru fiecare nuanță, deoarece negrul este amestecat la aceeași valoare alfa. Codurile hexazecimale au apoi 8 cifre, iar funcțiile CSS se termină cu valoarea alfa după o bară oblică.
Ce se întâmplă cu culorile din afara sRGB?
Amestecarea folosește culoarea completă, dar HEX, RGB și HSL pot afișa doar sRGB, așa că treptele din afara gamei sunt convertite în sRGB cu algoritmul Color 4 CSS în acele coloane. Coloana OKLCH păstrează valoarea neconvertită.
Cum folosesc nuanțele în CSS?
Copiați valorile hexazecimale sau oklch() în proprietăți personalizate precum --brand-600 și --brand-700. Pentru a amesteca direct în browser, color-mix(in oklab, var(--brand) 80%, black) dă aceeași nuanță de 20% ca setarea OKLab.
Sunt nuanțele mai întunecate accesibile automat?
Nu. Verificați contrastul textului pe fiecare nuanță cu un instrument de verificare a contrastului, deoarece o nuanță care pare întunecată poate avea totuși un contrast sub 4.5:1 față de o altă culoare întunecată sau față de text colorat.