Barevné kolo
Vyberte barvu na kole, dolaďte ji na ploše sytosti a jasu a přečtěte si ji v každém formátu, který váš projekt používá, od #RRGGBB po oklch(). Nástroj umí i věci, které jiné výběry barev vynechávají: tři podoby kola včetně tradičního malířského RYB, harmonie, které samy sestaví paletu, průhlednost a export celé palety jedním kliknutím jako CSS proměnné, SCSS nebo JSON. Všechno se počítá ve vašem prohlížeči.
RYB, nebo RGB? Tři barevná kola místo jednoho
Přepínač Režim kola mění rozložení odstínů na kole:
- HSV a HSL jsou digitální kola. Odstíny leží tak, jak je míchá světlo na obrazovce. Liší se čtvercovou plochou: v HSV je nejsvětlejší roh čistý odstín, HSL dává čisté odstíny doprostřed jasu a bílou nad ně.
- RYB (malířské) řadí odstíny tak, jak je znají malíři: červená, žlutá a modrá jako základní barvy, mezi nimi oranžová, zelená a fialová (model RYB na Wikipedii). Rozdíl poznáte hlavně u harmonií. Na kole RYB je doplňkem červené zelená a doplňkem modré oranžová, tedy klasické dvojice z výtvarky. Digitální kolo páruje červenou s azurovou. Pokud vám „komplementární“ paleta z běžného výběru barev nikdy neseděla, tady je důvod.
Barevné harmonie: paleta, která se sestaví sama
V poli Barevná harmonie zvolte pravidlo. Kolo vyznačí doprovodné barvy a pod ním se zobrazí hotová paleta:
- Komplementární: jedna protilehlá barva. Nejsilnější kontrast, hodí se pro jediný akcent vedle hlavní barvy značky.
- Rozdělená komplementární: dva sousedé protilehlé barvy. Kontrast skoro stejně silný, ale snáz se vyvažuje.
- Triáda: tři odstíny rovnoměrně po kole. Živé a přitom stabilní, když jeden převládá a dva zbylé používáte střídmě.
- Tetráda (čtverec): čtyři odstíny. Bohatá schémata pro ilustrace a grafy, v rozhraní aplikace se vyvažují těžko.
- Analogická: nejbližší sousedé. Klidná kombinace pro pozadí a přechody.
- Monochromatická: jeden odstín v několika úrovních jasu. Nejbezpečnější volba pro stavy tlačítek (najetí, aktivní, vypnuté).
Celou paletu zkopírujete jedním kliknutím ve formátu, který si vyberete: čisté HEX, RGB, HSL, OKLCH, CSS proměnné (--color-1: …) připravené k vložení, SCSS proměnné nebo JSON pro kód. Jestli si barvy palety drží kontrast i pro lidi, kteří hůř rozlišují odstíny, rychle ověříte na screenshotu po převodu do odstínů šedi.
Převod HEX, RGB, HSL, OKLCH a CMYK: vložte cokoliv, dostanete všechno
Vstupní pole přijmou skoro jakýkoliv zápis barvy: #f80, #ff8800, osmimístný hex s průhledností, rgb() a rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 i pojmenované CSS barvy jako rebeccapurple. Ať zadáte cokoliv, dostanete sedm sladěných výstupů: HEX, RGB, HSL, HSV, LCH, OKLCH a CMYK, každý s vlastním tlačítkem pro kopírování.
Posuvník Průhlednost (alfa) pod náhledem přepne výstupy do průhledných zápisů #RRGGBBAA, rgba() a hsla(). Náhled se přitom vykreslí na šachovnici, takže průhlednost hned vidíte.
Nejbližší Tailwind CSS token k libovolné barvě
Dva štítky pod náhledem barvu pojmenují: nejbližší pojmenovaná CSS barva (hodí se pro rychlé prototypy) a nejbližší Tailwind token, například orange-500. Zůstanete tak ve svém design systému a nemusíte vymýšlet jednorázové hodnoty. Kliknutím štítek zkopírujete.
Řeší to otázku, která padne při každém předávání návrhu: grafik mi poslal hex kód, která Tailwind třída mu odpovídá nejlíp? Shoda se počítá proti výchozí paletě Tailwind CSS 4 (viz dokumentace Tailwindu, anglicky), takže token můžete rovnou použít v názvu třídy.
Který formát barvy použít?
| Formát | Celý název | Kdy ho použít |
|---|---|---|
| HEX | Hexadecimal | Výchozí volba pro web. Krátký, všude podporovaný, snadno se kopíruje. Osm číslic přidá průhlednost. |
| RGB | Red, Green, Blue | Tak uvažují obrazovky. Tři světelné kanály od 0 do 255. Formát, který čeká většina API a kódu pro canvas. |
| HSL | Hue, Saturation, Lightness | Pro úpravy od oka. „Trochu světlejší“ nebo „méně syté“ znamená změnit jediné číslo. |
| HSV | Hue, Saturation, Value | Grafické programy. Model, na kterém stojí výběr barvy ve Photoshopu a GIMPu. |
| LCH | Lightness, Chroma, Hue | Vnímaná rovnoměrnost. Stejné číselné kroky vypadají jako stejné vizuální kroky, což HSL jen předstírá. |
| OKLCH | OK Lightness, Chroma, Hue | Moderní volba pro CSS. Opravuje posuny odstínu v modrých tónech, které trápí LCH. Podporují ho všechny aktuální prohlížeče a hodí se pro design tokeny. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientace pro tisk. Přibližný převod pro domluvu s tiskárnou, konečné hodnoty určuje její barevný profil. |
Proč je OKLCH vnímaně rovnoměrnější než starší modely, vysvětluje autor prostoru Oklab Björn Ottosson v původním článku (anglicky). Syntaxi a podporu v prohlížečích shrnuje MDN (anglicky). Jak funguje tiskový model, popisuje Wikipedie u hesla CMYK.
Drobnosti, které šetří čas
- Historie se ukládá sama. Posledních 24 barev přežije obnovení stránky. Zůstávají jen v úložišti vašeho prohlížeče a nikam se neodesílají.
- Kapátko. V prohlížečích s EyeDropper API (Chrome a Edge) vyberete barvu odkudkoliv na obrazovce, i mimo okno prohlížeče. Barvu z fotky nebo ze souboru s logem zjistíte v online kapátku.
- Ovládání klávesnicí. Kolo i plocha sytosti a jasu reagují na šipky, takže barvu doladíte po malých krocích.
- Předvolby nabízejí běžné základní barvy, když potřebujete jen rychlý začátek.
Časté otázky
Jak převést OKLCH na HEX?
Vložte hodnotuoklch() do pole OKLCH a ostatní výstupy včetně HEX se hned přepočítají. Funguje to i obráceně: zadejte HEX a přečtěte si odpovídající oklch(). Jedna výhrada: OKLCH umí popsat i barvy mimo rozsah sRGB a ty se oříznou na to, co sRGB zobrazí. Velmi syté oklch() proto na displeji s širokým gamutem nebude vypadat stejně jako jeho HEX podoba.
Můžu oklch() používat v produkčním CSS?
Ano. Všechny aktuální verze Chrome, Edge, Firefoxu i Safarioklch() podporují a stal se oblíbeným zápisem pro design tokeny (Tailwind CSS 4 v něm definuje celou paletu). Pro velmi staré prohlížeče dejte na řádek před něj HEX jako zálohu. Tento nástroj vám dá obě hodnoty.