Online výber farieb
Vyberte farbu na kolese, doladte ju na plátne sýtosti a jasu a prečítajte si ju v každom formáte, akým hovorí váš projekt – od #RRGGBB až po oklch(). Tento nástroj na výber farieb zvláda aj to, čo iné vynechávajú: tri geometrie kolesa vrátane maliarskeho kolesa RYB, harmonické prekrytia, ktoré vám samy zostavia paletu, alfa kanál a export celej palety jedným klikom ako CSS premenné, SCSS alebo JSON. Všetko sa počíta lokálne vo vašom prehliadači.
RYB vs RGB: tri kolesá, nie jedno
Selektor Režim kolesa mení samotnú geometriu kolesa:
- HSV a HSL sú digitálne kolesá – odtiene rozložené tak, ako ich miešajú svetlá RGB obrazoviek. Líšia sa tým, ako sa správa štvorcové plátno: najsvetlejší roh v HSV je čistý odtieň, HSL umiestňuje čisté odtiene pri 50 % svetlosti s bielou nad nimi.
- RYB (maliarske) usporadúva odtiene tak, ako sa ich učili maliari: červená, žltá a modrá ako primárne farby, s oranžovou, zelenou a fialovou medzi nimi. Jeho praktická hodnota sa prejaví pri harmóniách – na kolese RYB je komplementom červenej zelená a komplementom modrej oranžová, teda klasické pigmentové páry, zatiaľ čo digitálne koleso páruje červenú s azúrovou. Ak sa vám niekedy “komplementárna” paleta z bežného výberu farieb zdala nesprávna, toto je dôvod.
Farebné harmónie, ktoré vám zostavia paletu samy
Vyberte pravidlo pod Farebná harmónia a koleso označí sprievodné farby, ktoré sa zobrazia ako hotová paleta:
- Komplementárna – jedna opačná farba. Najsilnejší kontrast; použite ju na jediný akcent proti dominantnej brandovej farbe.
- Rozdelená komplementárna – dvaja susedia komplementu. Takmer rovnaký kontrast, oveľa ľahšie sa vyvažuje.
- Triadická – tri rovnomerne rozložené odtiene. Živé, no stabilné; nechajte jeden dominovať a zvyšné dva používajte striedmo.
- Tetradická (štvorec) – štyri odtiene. Bohaté schémy pre ilustrácie a vizualizáciu dát; v UI sa ťažko vyvažujú.
- Analogická – najbližší susedia. Nízke napätie, vhodné pre pozadia a gradienty.
- Monochromatická – jeden odtieň v odstupňovanej svetlosti. Najbezpečnejšia voľba pre stavy rozhrania (hover, active, disabled).
Panel palety skopíruje celú sadu jedným klikom, vo formáte, ktorý si zvolíte: obyčajný HEX, RGB, HSL, OKLCH, pripravené na vloženie CSS vlastné premenné (--color-1: …), premenné SCSS alebo JSON na odovzdanie do kódu.
Prevod HEX, RGB, HSL, OKLCH a CMYK: vložte čokoľvek, prečítajte si všetko
Vstupné polia prijmú prakticky akýkoľvek zápis farby, aký im predhodíte: #f80, #ff8800, 8-miestny hex s alfa kanálom, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 alebo CSS pomenované farby ako rebeccapurple. Nech vložíte čokoľvek, vráti sa vám sedem synchronizovaných výstupov: HEX, RGB, HSL, HSV, LCH, OKLCH a CMYK, každý s vlastným tlačidlom na kopírovanie.
Potiahnite posuvník Priehľadnosť (alfa) pod náhľadom a výstupy prepnú na svoje priehľadné formy – #RRGGBBAA, rgba(), hsla() – s náhľadom zobrazeným na šachovnicovom podklade, aby ste vedeli posúdiť priehľadnosť.
Nájdite najbližší Tailwind CSS token
Dva pomocné štítky pod náhľadom farbu za vás pomenujú: najbližšia pomenovaná CSS farba (užitočné pre rýchle prototypy a pri rozhovore o farbách) a najbližší token Tailwind (napr. orange-500), takže môžete zostať vo svojom dizajnovom systéme namiesto vymýšľania vlastných hodnôt. Kliknutím na štítok ho skopírujete.
Rieši to otázku, ktorá sa objaví pri každom odovzdávaní návrhu: dizajnér mi poslal hex kód – ktorá Tailwind trieda mu zodpovedá najbližšie? Zhoda sa počíta oproti predvolenej palete Tailwind CSS 4, takže token, ktorý dostanete, môžete rovno vložiť do názvu triedy.
Ktorý formát by ste mali použiť?
| Formát | Celý názov | Kedy ho použiť? |
|---|---|---|
| HEX | Hexadecimálny | Štandard webu. Kompaktný, univerzálne podporovaný, ľahko sa kopíruje. 8 znakov pridáva alfa kanál. |
| RGB | Red, Green, Blue | Ako uvažujú obrazovky. Tri svetelné kanály, 0–255. Formát, ktorý očakáva väčšina API aj kód pre canvas. |
| HSL | Hue, Saturation, Lightness | Pre ľudí, ktorí ladia ručne. “O trochu svetlejšia” alebo “menej sýta” je zmena jedného čísla. |
| HSV | Hue, Saturation, Value | Grafický softvér. Model, na ktorom stoja výbery farieb v Photoshope a GIMPe. |
| LCH | Lightness, Chroma, Hue | Percepčne uniformný. Rovnaké číselné kroky vyzerajú ako rovnaké vizuálne kroky – čo HSL len predstiera. |
| OKLCH | OK Lightness, Chroma, Hue | Moderná voľba pre CSS. Opravuje posuny odtieňov v modrých, ktoré má LCH; podporujú ho všetky súčasné prehliadače a je ideálny pre systémy dizajnových tokenov. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientácia pre tlač. Približný prevod na komunikáciu s tlačovými dizajnérmi – finálne hodnoty vždy určuje farebný profil tlačiarne. |
Drobnosti, ktoré ušetria čas
- História sa udržiava sama. Posledných 24 farieb, s ktorými ste pracovali, prežije aj obnovenie stránky – uložené výlučne v lokálnom úložisku vášho prehliadača, nikam sa neposielajú.
- Kvapkadlo (eyedropper). V prehliadačoch s API EyeDropper (Chrome a Edge) môžete vybrať farbu z ľubovoľného miesta na obrazovke, aj mimo okna prehliadača.
- Ovládanie klávesnicou. Koleso aj plátno sýtosti a jasu reagujú na šípky pre presné doladenie na pixel.
- Predvoľby pokrývajú bežné základné farby, keď potrebujete len rýchly východiskový bod.
Často kladené otázky (FAQ)
Ako prevediem OKLCH na HEX?
Vložte hodnotuoklch() do poľa OKLCH a všetky ostatné výstupy sa okamžite prepočítajú, vrátane HEX. Funguje to aj opačne – zadajte HEX kód a prečítate si zodpovedajúcu hodnotu oklch(). Jedna výhrada: OKLCH dokáže opísať aj farby mimo gamutu sRGB a tie sa orežú kanál po kanáli na to, čo sRGB dokáže zobraziť, takže veľmi sýty oklch() zápis a jeho HEX podoba nebudú na širokogamutovom displeji vyzerať identicky.
Je oklch() bezpečné použiť v produkčnom CSS?
Áno. Všetky súčasné verzie Chrome, Edge, Firefoxu aj Safari podporujúoklch() a stal sa preferovaným zápisom pre dizajnové tokeny (Tailwind CSS 4 v ňom definuje celú svoju paletu). Pre veľmi staré prehliadače pridajte na predchádzajúci riadok záložný zápis v HEXe – tento nástroj vám dá obe hodnoty.