Color Picker Online
Vyberte barvu na kole, dolaďte ji na ploše sytosti a jasu a přečtěte si ji zpátky v každém formátu, kterým mluví váš projekt – od #RRGGBB po oklch(). Tento picker navíc zvládá i to, co jiné nástroje vynechávají: tři geometrie kola včetně tradičního malířského kola RYB, harmonické překryvy, které vám samy sestaví paletu, alfa kanál a export celé palety jedním kliknutím jako CSS proměnné, SCSS nebo JSON. Vše se počítá lokálně ve vašem prohlížeči.
Tři kola, ne jedno
Volič Režim kola mění geometrii samotného kola:
- HSV a HSL jsou digitální kola – odstíny rozmístěné tak, jak je mísí světlo na RGB obrazovkách. Liší se v tom, jak se chová čtvercová plocha: u HSV je nejsvětlejší roh čistý odstín, HSL umisťuje čisté odstíny na 50% jas s bílou nad nimi.
- RYB (malířské) řadí odstíny tak, jak se je učí malíři: červená, žlutá a modrá jako základní barvy, mezi nimi oranžová, zelená a fialová. Jeho praktický přínos se projeví u harmonií – na kole RYB je komplementární barvou k červené zelená a k modré oranžová, tedy klasické pigmentové dvojice, zatímco digitální kolo páruje červenou s azurovou. Pokud vám někdy “komplementární” paleta z běžného pickeru přišla vizuálně špatně, tohle je důvod.
Harmonie, které vám sestaví paletu samy
Zvolte pravidlo v Barevná harmonie a kolo označí doprovodné barvy, které se zároveň zobrazí jako hotová paleta:
- Komplementární – jedna protilehlá barva. Nejsilnější kontrast; použijte ji pro jediný akcent proti dominantní brandové barvě.
- Rozdělená komplementární – dvě sousední barvy komplementu. Téměř stejně silný kontrast, mnohem snazší vyvážit.
- Triáda – tři rovnoměrně rozložené odstíny. Živé, ale stabilní; nechte jeden dominovat a zbylé dva použijte úsporně.
- Tetráda (čtverec) – čtyři odstíny. Bohatá schémata pro ilustrace a datové vizualizace; obtížně se vyvažuje v UI.
- Analogická – bezprostřední sousedé. Nízké napětí, vhodné pro pozadí a gradienty.
- Monochromatická – jeden odstín ve stupňovaném jasu. Nejbezpečnější volba pro stavy rozhraní (hover, aktivní, deaktivovaný).
Panel palety zkopíruje celou sadu jedním kliknutím ve formátu, který si vyberete: čistý HEX, RGB, HSL, OKLCH, přímo vložitelné CSS vlastní proměnné (--color-1: …), SCSS proměnné nebo JSON pro předání do kódu.
Vložte cokoliv, přečtete si všechno
Vstupní pole přijmou prakticky jakýkoliv zápis barvy: #f80, #ff8800, osmimístný hex s alfou, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 nebo pojmenované CSS barvy jako rebeccapurple. Ať zadáte cokoliv, vrátí se vám sedm synchronizovaných výstupů: HEX, RGB, HSL, HSV, LCH, OKLCH a CMYK, každý s vlastním tlačítkem pro kopírování.
Dva pomocné štítky pod náhledem barvu za vás pojmenují: nejbližší pojmenovaná CSS barva (užitečná pro rychlé prototypy a pojmenovávání barev) a nejbližší Tailwind token (např. orange-500), takže můžete zůstat uvnitř svého design systému místo vymýšlení jednorázových hodnot.
Přetáhněte posuvník Průhlednost (alfa) pod náhledem a výstupy se přepnou do svých průhledných forem – #RRGGBBAA, rgba(), hsla() – přičemž náhled se zobrazí nad šachovnicovým vzorem, abyste snadno posoudili průhlednost.
Který formát použít?
| Formát | Celý název | Kdy ho použít? |
|---|---|---|
| HEX | Hexadecimal | Výchozí volba pro web. Kompaktní, univerzálně podporovaný, snadno se kopíruje. 8 číslic přidá alfu. |
| RGB | Red, Green, Blue | Jak uvažují obrazovky. Tři světelné kanály, 0–255. Formát, který očekává většina API a canvas kódu. |
| HSL | Hue, Saturation, Lightness | Pro ruční úpravy člověkem. “O trochu světlejší” nebo “méně syté” znamená změnu jediného čísla. |
| HSV | Hue, Saturation, Value | Grafický software. Model za výběrem barev v Photoshopu a GIMPu. |
| LCH | Lightness, Chroma, Hue | Percepčně uniformní. Stejné číselné kroky vypadají jako stejné vizuální kroky – to, čím se HSL jen tváří být. |
| OKLCH | OK Lightness, Chroma, Hue | Moderní volba pro CSS. Opravuje posuny odstínu v modré, které trápí LCH; podporují ho všechny aktuální prohlížeče a je ideální pro systémy designových tokenů. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientace pro tisk. Přibližný převod pro komunikaci s tiskovým studiem – finální hodnoty vždy určuje barevný profil tiskárny. |
Drobnosti, které šetří čas
- Historie se udržuje sama. Posledních 24 barev, se kterými jste pracovali, přežije obnovení stránky – uložené jen v místním úložišti vašeho prohlížeče, nikdy nikam neodeslané.
- Kapátko. V prohlížečích s EyeDropper API (Chrome a Edge) můžete vybrat barvu odkudkoliv na obrazovce, i mimo okno prohlížeče.
- Ovládání klávesnicí. Kolo i plocha sytosti a jasu reagují na šipky pro pixelově přesné úpravy.
- Předvolby pokrývají běžné základní barvy, když potřebujete jen rychlý výchozí bod.
Často kladené otázky (FAQ)
Je bezpečné používat oklch() v produkčním CSS?
Ano. Všechny aktuální verze Chrome, Edge, Firefoxu i Safari podporujíoklch() a stal se preferovaným zápisem pro designové tokeny (Tailwind CSS 4 v něm definuje celou svou paletu). Pro velmi staré prohlížeče uveďte na předchozím řádku HEX fallback – tento nástroj vám dá obě hodnoty.