# Online výber farieb

> Farebné koleso HSV, HSL a maliarske RYB, hotové harmónie a prevod HEX, RGB, HSL, OKLCH, CMYK. Aj najbližší token Tailwind. Zadarmo, bez inštalácie.

URL: https://acrafto.com/sk/online-vyber-farieb/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://en.wikipedia.org/wiki/RYB_color_model), 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](https://acrafto.com/sk/prevod-obrazkov-do-odtienov-sivej-online/).

## 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](https://tailwindcss.com/docs/colors), 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](https://bottosson.github.io/posts/oklab/) (po anglicky). Syntax a podporu v prehliadačoch zhŕňa [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (po anglicky). Ako funguje tlačový model, opisuje [Wikipédia pri hesle CMYK](https://en.wikipedia.org/wiki/CMYK_color_model) (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](https://acrafto.com/sk/online-kvapatko-vyber-farieb-z-obrazku/).
- **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 hodnotu `oklch()` 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 Safari `oklch()` 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.

### Prečo sa harmónia zmení, keď prepnem na koleso RYB?

Pretože to, čo je "oproti", závisí od rozloženia odtieňov po kruhu. Koleso RYB rozkladá pigmentové základné farby rovnomerne, takže doplnkové dvojice zodpovedajú tomu, čo poznajú maliari: červená a zelená, modrá a oranžová, žltá a fialová. Kolesá HSV a HSL rozkladajú odtiene podľa miešania svetla, a preto párujú červenú s azúrovou. Ani jedno nie je zlé: RYB zodpovedá výtvarnej výchove, HSV a HSL tomu, čo robia obrazovky.

### Môžem veriť hodnotám CMYK pre tlač?

Berte ich ako orientačné. Skutočný prevod pre tlač závisí od [farebného profilu](https://en.wikipedia.org/wiki/ICC_profile) (po anglicky) tlačiarne, papiera a atramentu. Rovnaká farba RGB vyjde inak na kriedovom a inak na nenatieranom papieri. Hodnoty tu počíta štandardný vzorec, ktorý vás dostane blízko, ale finálny nátlač je vecou tlačiarne.

### Kde je tlačidlo kvapkadla vo Firefoxe alebo v Safari?

Je schválne skryté. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, po anglicky), na ktorom tlačidlo stojí, zatiaľ vedia len prehliadače postavené na Chromiu (Chrome, Edge, Opera). Ostatné funkcie nástroja fungujú všade, chýba len výber farby z obrazovky. Ak potrebujete farbu z obrázka, použite [online kvapátko](https://acrafto.com/sk/online-kvapatko-vyber-farieb-z-obrazku/), ktoré funguje vo všetkých prehliadačoch.

### Zostáva moja história farieb súkromná?

Áno. História je uložená v localStorage vášho prehliadača na vašom zariadení. Nič, čo vyberiete, vložíte alebo skopírujete, sa nikam neodosiela. Celý nástroj beží ako JavaScript v prehliadači, čo si overíte na karte Sieť vo vývojárskych nástrojoch.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))