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.
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.
Harmónie, ktoré vám zostavia paletu za vás
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.
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.
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.
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ť.
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)
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.