Generátor barevných odstínů
Vytvářejte tmavší odstíny barvy jejím mícháním s černou v rovnoměrných krocích. Zadejte jednu barvu v libovolném formátu CSS, zvolte 2 až 20 kroků a prostor míchání. Zobrazí se tabulka s hodnotami HEX, RGB, HSL a OKLCH pro každý odstín, počínaje původní barvou. Míchání v sRGB odpovídá klasickým nástrojům pro tvorbu odstínů a Sass, zatímco OKLab vytváří perceptuálně rovnoměrné kroky. Ideální pro tvorbu barevných škál UI.
Často kladené otázky
Co je odstín?
Odstín vznikne smícháním barvy s černou. Zachovává si svůj barevný tón a tmavne, na rozdíl od zesvětlené varianty, která se míchá s bílou, nebo tónu, který se míchá se šedou.
Jak jsou kroky rozloženy?
Při N krocích se v řádku k smíchá barva s černou v poměru (k - 1) / N, takže 10 kroků představuje 0 %, 10 %, 20 % a tak dále až do 90 %. První řádek vždy obsahuje původní barvu a čistá černá v seznamu nikdy není.
Jaký je rozdíl mezi mícháním v sRGB a OKLab?
Míchání v sRGB vypočítá průměr hodnot kanálů zakódovaných pomocí gama korekce, což dělají Sass mix() s černou a většina klasických generátorů odstínů. Míchání v OKLab probíhá v perceptuálním prostoru, takže kroky vypadají rovnoměrněji z hlediska světlosti a tmavší odstíny si zachovávají více své barvy.
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?
U každého kroku podíl černé, hexadecimální kód, rgb(), hsl() a oklch() v moderní syntaxi CSS. Kanály RGB jsou celá čísla, procentuální hodnoty HSL mají až dvě desetinná místa a světlost a sytost OKLCH až čtyři.
Co se stane s průhlednými barvami?
Alfa kanál vstupní barvy se zachová u všech odstínů, protože se černá přimíchává se stejnou hodnotou alfa. Hexadecimální kódy pak mají 8 číslic a funkce CSS končí hodnotou alfa za lomítkem.
Co se stane s barvami mimo sRGB?
Míchání používá celou barvu, ale HEX, RGB a HSL mohou zobrazit pouze sRGB, takže se kroky mimo gamut v těchto sloupcích převedou do sRGB pomocí algoritmu Color 4 CSS. Sloupec OKLCH zachovává nepřevedenou hodnotu.
Jak použiji odstíny v CSS?
Zkopírujte hexadecimální hodnoty nebo hodnoty oklch() do vlastních vlastností, například --brand-600 a --brand-700. Pokud chcete barvu smíchat přímo v prohlížeči, color-mix(in oklab, var(--brand) 80%, black) vytvoří stejný odstín s 20% podílem jako nastavení OKLab.
Jsou tmavší odstíny automaticky přístupné?
Ne. Zkontrolujte kontrast textu vůči každému odstínu, protože i odstín, který vypadá tmavě, může mít vůči jiné tmavé barvě nebo barevnému textu kontrast nižší než 4.5:1.