Generátor barevných tónů
Vytvářejte odstíny barvy jejím smícháním s neutrální šedou v rovnoměrných krocích, čímž snížíte sytost a zachováte odstín. Zadejte jednu barvu v libovolném formátu CSS, zvolte 2 až 20 kroků a prostor míchání. Výsledkem bude tabulka s hodnotami HEX, RGB, HSL a OKLCH pro každý odstín, počínaje původní barvou. Hodí se pro tlumené palety, neaktivní stavy, jemné povrchy a klidnější varianty značkových barev.
Často kladené otázky
Co je tón barvy?
Tón je barva smíchaná se šedou. Zachová si svůj odstín a bude tlumenější, na rozdíl od zesvětlení, při kterém se míchá s bílou, nebo ztmavení, při kterém se míchá s černou.
Jaká šedá se používá?
Střední šedá v sRGB #808080, rgb(128 128 128). Světlé barvy proto při přibližování k ní mírně tmavnou a tmavé mírně světlají. Pokud chcete míchat s jinou šedou, použijte Míchání barev a zadejte vlastní šedou.
Jak jsou kroky rozloženy?
Při N krocích se barva v řádku k míchá s podílem šedé (k - 1) / N, takže 10 kroků dává 0 %, 10 %, 20 % a tak dále až do 90 %. První řádek vždy obsahuje původní barvu a čistá šedá se v seznamu nikdy neobjeví.
Jak se tón liší od snížení sytosti HSL?
Při snížení sytosti HSL zůstane zachována světlost HSL, zatímco při míchání se šedou se světlost zároveň posouvá ke střední hodnotě. Tóny proto vypadají, jako byste barvu viděli přes šedý filtr, což se hodí pro tlumená pozadí a neaktivní stavy.
Jaký je rozdíl mezi mícháním v sRGB a OKLab?
Při míchání v sRGB se zprůměrují hodnoty kanálů zakódované pomocí gama korekce. Jde o klasický přístup známý z tónových tabulek připomínajících barvy a Sass mix(). Míchání v OKLab probíhá v percepčním prostoru, takže sytost klesá rovnoměrněji s každým krokem.
Jaké vstupní formáty mohu použít?
Hexadecimální kódy s # nebo bez něj, názvy barev CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() a cmyk(). Při každém spuštění zadejte jednu barvu.
Kolik odstínů mohu vygenerovat?
Od 2 do 20 při jednom spuštění, výchozí počet je 10. Do počtu se započítává původní barva v prvním řádku.
Jaké hodnoty tabulka zobrazuje?
Pro každý krok se zobrazí podíl šedé, kód hex, rgb(), hsl() a oklch() v moderní syntaxi CSS. Kanály RGB jsou celá čísla, procenta HSL mají až dvě desetinná místa a světlost a sytost OKLCH až čtyři.
Co se stane s průhlednými barvami a barvami se širokým gamutem?
Průhlednost vstupu se zachovává u každého odstínu, takže kódy hex mají 8 číslic. Barvy mimo gamut se ve sloupcích HEX, RGB a HSL převedou do sRGB pomocí algoritmu Color 4 CSS, zatímco sloupec OKLCH ponechá hodnotu bez převodu.
Jak znovu vytvořím tón v CSS?
Zkopírujte hodnotu hex nebo oklch(), případně nechte prohlížeč tón namíchat pomocí color-mix(in oklab, var(--brand) 70%, #808080), což při nastavení OKLab vytvoří tón s 30% podílem šedé. color-mix() funguje ve všech současných hlavních prohlížečích.