Generátor farebných odtieňov
Vytvárajte tmavšie odtiene farby jej rovnomerným miešaním s čiernou. Zadajte jednu farbu v ľubovoľnom formáte CSS, vyberte 2 až 20 krokov a priestor miešania. Získate tabuľku s hodnotami HEX, RGB, HSL a OKLCH pre každý odtieň, počnúc pôvodnou farbou. Miešanie v sRGB zodpovedá klasickým nástrojom na tvorbu odtieňov a Sass, zatiaľ čo OKLab vytvára rovnomerné kroky z hľadiska vnímania. Ideálne na vytváranie farebných škál UI.
Často kladené otázky
Čo je odtieň?
Odtieň je farba zmiešaná s čiernou. Zachováva si svoj farebný tón a stmavne, na rozdiel od zosvetlenia, pri ktorom sa mieša s bielou, alebo tónovania, pri ktorom sa mieša so sivou.
Ako sú kroky rozložené?
Pri N krokoch sa v riadku k zmieša farba s podielom čiernej (k - 1) / N. Pri 10 krokoch teda získate 0 %, 10 %, 20 % a tak ďalej až po 90 %. Prvý riadok vždy obsahuje pôvodnú farbu a čistá čierna v zozname nikdy nie je.
Aký je rozdiel medzi miešaním v sRGB a OKLab?
Pri miešaní v sRGB sa spriemerujú hodnoty kanálov s gama kódovaním, čo robia aj Sass mix() s čiernou a väčšina klasických generátorov odtieňov. Miešanie v OKLab prebieha v percepčnom priestore, takže kroky vyzerajú rovnomernejšie z hľadiska svetlosti a tmavšie odtiene si zachovávajú viac farby.
Ktoré vstupné formáty môžem použiť?
Hexadecimálne kódy s # alebo bez neho, CSS názvy farieb, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() a cmyk(). Pri každom spustení zadajte jednu farbu.
Koľko odtieňov môžem vytvoriť?
Od 2 do 20 pri jednom spustení, predvolene 10. Počet zahŕňa pôvodnú farbu v prvom riadku.
Ktoré hodnoty zobrazuje tabuľka?
Pre každý krok podiel čiernej, hexadecimálny kód, rgb(), hsl() a oklch() v modernej syntaxi CSS. Kanály RGB sú celé čísla, percentá HSL majú najviac dve desatinné miesta a svetlosť a sýtosť OKLCH najviac štyri.
Čo sa stane s priehľadnými farbami?
Priehľadnosť vstupu sa zachová pri každom odtieni, pretože čierna sa primiešava s rovnakou úrovňou priehľadnosti. Hexadecimálne kódy potom majú 8 číslic a funkcie CSS končia hodnotou priehľadnosti za lomkou.
Čo sa stane s farbami mimo sRGB?
Pri miešaní sa používa celá farba, ale HEX, RGB a HSL dokážu zobraziť iba sRGB, preto sa v týchto stĺpcoch farby mimo gamutu prevedú do sRGB pomocou algoritmu CSS Color 4. Stĺpec OKLCH zachováva hodnotu bez tohto prevodu.
Ako môžem použiť odtiene v CSS?
Skopírujte hodnoty hexadecimálnych kódov alebo oklch() do vlastných vlastností, napríklad --brand-600 a --brand-700. Ak chcete miešať farby priamo v prehliadači, color-mix(in oklab, var(--brand) 80%, black) vytvorí rovnaký 20 % odtieň ako nastavenie OKLab.
Sú tmavšie odtiene automaticky prístupné?
Nie. Skontrolujte kontrast textu s každým odtieňom pomocou nástroja na kontrolu kontrastu, pretože aj zdanlivo tmavá farba môže mať kontrast pod hodnotou 4.5:1 voči inej tmavej farbe alebo farebnému textu.