Online výber farieb
Vyberte farbu na kolese, doladíte ju na ploche sýtosti a jasu a prečítate si ju v každom formáte, aký váš projekt používa, od #RRGGBB po oklch(). Nástroj zvláda aj to, čo iné výbery farieb vynechávajú: tri podoby kolesa vrátane tradičného maliarskeho RYB, harmónie, ktoré si samy zostavia paletu, priehľadnosť a export celej palety jedným klikom ako CSS premenné, SCSS alebo JSON. Všetko sa počíta vo vašom prehliadači.
RYB, alebo RGB? Tri farebné kolesá namiesto jedného
Prepínač Režim kolesa mení rozloženie odtieňov na kolese:
- HSV a HSL sú digitálne kolesá. Odtiene ležia tak, ako ich mieša svetlo na obrazovke. Líšia sa štvorcovou plochou: v HSV je najsvetlejší roh čistý odtieň, HSL dáva čisté odtiene do stredu jasu a bielu nad ne.
- RYB (maliarske) radí odtiene tak, ako ich poznajú maliari: červená, žltá a modrá ako základné farby, medzi nimi oranžová, zelená a fialová (model RYB na Wikipédii, po anglicky). Rozdiel spoznáte hlavne pri harmóniách. Na kolese RYB je doplnkom červenej zelená a doplnkom modrej oranžová, teda klasické dvojice z výtvarnej výchovy. Digitálne koleso páruje červenú s azúrovou. Ak sa vám “komplementárna” paleta z bežného výberu farieb niekedy nezdala sedieť, toto je dôvod.
Farebné harmónie: paleta, ktorá sa zostaví sama
V poli Farebná harmónia zvoľte pravidlo. Koleso vyznačí sprievodné farby a pod ním sa zobrazí hotová paleta:
- Komplementárna: jedna protiľahlá farba. Najsilnejší kontrast, hodí sa na jediný akcent vedľa hlavnej farby značky.
- Rozdelená komplementárna: dvaja susedia protiľahlej farby. Kontrast takmer rovnako silný, no ľahšie sa vyvažuje.
- Triadická: tri odtiene rovnomerne po kolese. Živé, a pritom stabilné, keď jeden prevláda a zvyšné dva používate striedmo.
- Tetradická (štvorec): štyri odtiene. Bohaté schémy pre ilustrácie a grafy, v rozhraní aplikácie sa vyvažujú ťažko.
- Analogická: najbližší susedia. Pokojná kombinácia pre pozadia a prechody.
- Monochromatická: jeden odtieň vo viacerých úrovniach jasu. Najbezpečnejšia voľba pre stavy tlačidiel (hover, aktívne, vypnuté).
Celú paletu skopírujete jedným klikom vo formáte, ktorý si vyberiete: čistý HEX, RGB, HSL, OKLCH, CSS premenné (--color-1: …) pripravené na vloženie, premenné SCSS alebo JSON pre kód. Či farby palety držia kontrast aj pre ľudí, ktorí horšie rozlišujú odtiene, rýchlo overíte na snímke obrazovky po prevode do odtieňov sivej.
Prevod HEX, RGB, HSL, OKLCH a CMYK: vložte čokoľvek, dostanete všetko
Vstupné polia prijmú takmer akýkoľvek zápis farby: #f80, #ff8800, osemmiestny hex s priehľadnosťou, rgb() a rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 aj pomenované CSS farby ako rebeccapurple. Nech zadáte čokoľvek, dostanete sedem zladených výstupov: HEX, RGB, HSL, HSV, LCH, OKLCH a CMYK, každý s vlastným tlačidlom na kopírovanie.
Posuvník Priehľadnosť (alfa) pod náhľadom prepne výstupy do priehľadných zápisov #RRGGBBAA, rgba() a hsla(). Náhľad sa pritom vykreslí na šachovnici, takže priehľadnosť hneď vidíte.
Najbližší token Tailwind CSS k ľubovoľnej farbe
Dva štítky pod náhľadom farbu pomenujú: najbližšia pomenovaná CSS farba (hodí sa na rýchle prototypy) a najbližší token Tailwind, napríklad orange-500. Zostanete tak vo svojom dizajnovom systéme a nemusíte vymýšľať jednorazové hodnoty. Kliknutím štítok skopírujete.
Rieši to otázku, ktorá padne pri každom odovzdávaní návrhu: grafik mi poslal hex kód, ktorá trieda Tailwind mu zodpovedá najlepšie? Zhoda sa počíta oproti predvolenej palete Tailwind CSS 4 (pozri dokumentáciu Tailwindu, po anglicky), takže token môžete rovno použiť v názve triedy.
Ktorý formát farby použiť?
| Formát | Celý názov | Kedy ho použiť |
|---|---|---|
| HEX | Hexadecimal | Východisková voľba pre web. Krátky, všade podporovaný, ľahko sa kopíruje. Osem znakov pridáva priehľadnosť. |
| RGB | Red, Green, Blue | Tak uvažujú obrazovky. Tri svetelné kanály od 0 do 255. Formát, ktorý očakáva väčšina API a kódu pre canvas. |
| HSL | Hue, Saturation, Lightness | Na úpravy od oka. “O trochu svetlejšia” alebo “menej sýta” znamená zmeniť jediné číslo. |
| HSV | Hue, Saturation, Value | Grafické programy. Model, na ktorom stojí výber farieb vo Photoshope a GIMPe. |
| LCH | Lightness, Chroma, Hue | Vnímaná rovnomernosť. 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ňa v modrých tónoch, ktoré trápia LCH. Podporujú ho všetky aktuálne prehliadače a hodí sa na dizajnové tokeny. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientácia pre tlač. Približný prevod na dohodu s tlačiarňou, konečné hodnoty určuje jej farebný profil. |
Prečo je OKLCH vnímane rovnomernejší než staršie modely, vysvetľuje autor priestoru Oklab Björn Ottosson v pôvodnom článku (po anglicky). Syntax a podporu v prehliadačoch zhŕňa MDN (po anglicky). Ako funguje tlačový model, opisuje Wikipédia pri hesle CMYK (po anglicky).
Drobnosti, ktoré šetria čas
- História sa ukladá sama. Posledných 24 farieb prežije obnovenie stránky. Zostávajú len v úložisku vášho prehliadača a nikam sa neodosielajú.
- Kvapkadlo. V prehliadačoch s EyeDropper API (Chrome a Edge) vyberiete farbu odkiaľkoľvek na obrazovke, aj mimo okna prehliadača. Farbu z fotky alebo zo súboru s logom zistíte v online kvapátku.
- Ovládanie klávesnicou. Koleso aj plocha sýtosti a jasu reagujú na šípky, takže farbu doladíte po malých krokoch.
- Predvoľby ponúkajú bežné základné farby, keď potrebujete len rýchly začiatok.
Časté otázky
Ako prevediem OKLCH na HEX?
Vložte hodnotuoklch() do poľa OKLCH a ostatné výstupy vrátane HEX sa hneď prepočítajú. Funguje to aj opačne: zadajte HEX a prečítajte si zodpovedajúci oklch(). Jedna výhrada: OKLCH dokáže opísať aj farby mimo rozsahu sRGB a tie sa orežú na to, čo sRGB zobrazí. Veľmi sýty oklch() preto na displeji so širokým gamutom nebude vyzerať rovnako ako jeho HEX podoba.
Môžem oklch() používať v produkčnom CSS?
Áno. Všetky aktuálne verzie Chrome, Edge, Firefoxu aj Safarioklch() podporujú a stal sa obľúbeným zápisom pre dizajnové tokeny (Tailwind CSS 4 v ňom definuje celú paletu). Pre veľmi staré prehliadače dajte na riadok pred neho HEX ako zálohu. Tento nástroj vám dá obe hodnoty.