# Barevné kolo

> Barevné kolo HSV, HSL i malířské RYB, hotové harmonie barev a převod mezi HEX, RGB, HSL, OKLCH a CMYK. K tomu nejbližší Tailwind token. Zdarma, bez instalace.

URL: https://acrafto.com/cs/barevne-kolo/  
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 barvu na kole, dolaďte ji na ploše sytosti a jasu a přečtěte si ji v každém formátu, který váš projekt používá, od `#RRGGBB` po `oklch()`. Nástroj umí i věci, které jiné výběry barev vynechávají: tři podoby kola včetně tradičního malířského RYB, harmonie, které samy sestaví paletu, průhlednost a export celé palety jedním kliknutím jako CSS proměnné, SCSS nebo JSON. Všechno se počítá ve vašem prohlížeči.

## RYB, nebo RGB? Tři barevná kola místo jednoho

Přepínač **Režim kola** mění rozložení odstínů na kole:

- **HSV** a **HSL** jsou digitální kola. Odstíny leží tak, jak je míchá světlo na obrazovce. Liší se čtvercovou plochou: v HSV je nejsvětlejší roh čistý odstín, HSL dává čisté odstíny doprostřed jasu a bílou nad ně.
- **RYB (malířské)** řadí odstíny tak, jak je znají malíři: červená, žlutá a modrá jako základní barvy, mezi nimi oranžová, zelená a fialová ([model RYB na Wikipedii](https://cs.wikipedia.org/wiki/RYB)). Rozdíl poznáte hlavně u harmonií. Na kole RYB je doplňkem červené **zelená** a doplňkem modré **oranžová**, tedy klasické dvojice z výtvarky. Digitální kolo páruje červenou s azurovou. Pokud vám „komplementární“ paleta z běžného výběru barev nikdy neseděla, tady je důvod.

## Barevné harmonie: paleta, která se sestaví sama

V poli **Barevná harmonie** zvolte pravidlo. Kolo vyznačí doprovodné barvy a pod ním se zobrazí hotová paleta:

- **Komplementární:** jedna protilehlá barva. Nejsilnější kontrast, hodí se pro jediný akcent vedle hlavní barvy značky.
- **Rozdělená komplementární:** dva sousedé protilehlé barvy. Kontrast skoro stejně silný, ale snáz se vyvažuje.
- **Triáda:** tři odstíny rovnoměrně po kole. Živé a přitom stabilní, když jeden převládá a dva zbylé používáte střídmě.
- **Tetráda (čtverec):** čtyři odstíny. Bohatá schémata pro ilustrace a grafy, v rozhraní aplikace se vyvažují těžko.
- **Analogická:** nejbližší sousedé. Klidná kombinace pro pozadí a přechody.
- **Monochromatická:** jeden odstín v několika úrovních jasu. Nejbezpečnější volba pro stavy tlačítek (najetí, aktivní, vypnuté).

Celou paletu zkopírujete jedním kliknutím ve formátu, který si vyberete: čisté **HEX**, **RGB**, **HSL**, **OKLCH**, **CSS proměnné** (`--color-1: …`) připravené k vložení, **SCSS proměnné** nebo **JSON** pro kód. Jestli si barvy palety drží kontrast i pro lidi, kteří hůř rozlišují odstíny, rychle ověříte na screenshotu po [převodu do odstínů šedi](https://acrafto.com/cs/odstiny-sedi/).

## Převod HEX, RGB, HSL, OKLCH a CMYK: vložte cokoliv, dostanete všechno

Vstupní pole přijmou skoro jakýkoliv zápis barvy: `#f80`, `#ff8800`, osmimístný hex s průhledností, `rgb()` a `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` i pojmenované CSS barvy jako `rebeccapurple`. Ať zadáte cokoliv, dostanete sedm sladěných výstupů: **HEX, RGB, HSL, HSV, LCH, OKLCH a CMYK**, každý s vlastním tlačítkem pro kopírování.

Posuvník **Průhlednost (alfa)** pod náhledem přepne výstupy do průhledných zápisů `#RRGGBBAA`, `rgba()` a `hsla()`. Náhled se přitom vykreslí na šachovnici, takže průhlednost hned vidíte.

## Nejbližší Tailwind CSS token k libovolné barvě

Dva štítky pod náhledem barvu pojmenují: **nejbližší pojmenovaná CSS barva** (hodí se pro rychlé prototypy) a **nejbližší Tailwind token**, například `orange-500`. Zůstanete tak ve svém design systému a nemusíte vymýšlet jednorázové hodnoty. Kliknutím štítek zkopírujete.

Řeší to otázku, která padne při každém předávání návrhu: grafik mi poslal hex kód, která Tailwind třída mu odpovídá nejlíp? Shoda se počítá proti výchozí paletě Tailwind CSS 4 (viz [dokumentace Tailwindu](https://tailwindcss.com/docs/colors), anglicky), takže token můžete rovnou použít v názvu třídy.

## Který formát barvy použít?

| Formát | Celý název | Kdy ho použít |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Výchozí volba pro web.** Krátký, všude podporovaný, snadno se kopíruje. Osm číslic přidá průhlednost. |
| **RGB** | Red, Green, Blue | **Tak uvažují obrazovky.** Tři světelné kanály od 0 do 255. Formát, který čeká většina API a kódu pro canvas. |
| **HSL** | Hue, Saturation, Lightness | **Pro úpravy od oka.** „Trochu světlejší“ nebo „méně syté“ znamená změnit jediné číslo. |
| **HSV** | Hue, Saturation, Value | **Grafické programy.** Model, na kterém stojí výběr barvy ve Photoshopu a GIMPu. |
| **LCH** | Lightness, Chroma, Hue | **Vnímaná rovnoměrnost.** Stejné číselné kroky vypadají jako stejné vizuální kroky, což HSL jen předstírá. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Moderní volba pro CSS.** Opravuje posuny odstínu v modrých tónech, které trápí LCH. Podporují ho všechny aktuální prohlížeče a hodí se pro design tokeny. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orientace pro tisk.** Přibližný převod pro domluvu s tiskárnou, konečné hodnoty určuje její barevný profil. |

Proč je OKLCH vnímaně rovnoměrnější než starší modely, vysvětluje autor prostoru Oklab Björn Ottosson v [původním článku](https://bottosson.github.io/posts/oklab/) (anglicky). Syntaxi a podporu v prohlížečích shrnuje [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (anglicky). Jak funguje tiskový model, popisuje [Wikipedie u hesla CMYK](https://cs.wikipedia.org/wiki/CMYK).

## Drobnosti, které šetří čas

- **Historie se ukládá sama.** Posledních 24 barev přežije obnovení stránky. Zůstávají jen v úložišti vašeho prohlížeče a nikam se neodesílají.
- **Kapátko.** V prohlížečích s EyeDropper API (Chrome a Edge) vyberete barvu odkudkoliv na obrazovce, i mimo okno prohlížeče. Barvu z fotky nebo ze souboru s logem zjistíte v [online kapátku](https://acrafto.com/cs/vyber-barev-z-obrazku/).
- **Ovládání klávesnicí.** Kolo i plocha sytosti a jasu reagují na šipky, takže barvu doladíte po malých krocích.
- **Předvolby** nabízejí běžné základní barvy, když potřebujete jen rychlý začátek.

## Časté otázky

### Jak převést OKLCH na HEX?

Vložte hodnotu `oklch()` do pole OKLCH a ostatní výstupy včetně HEX se hned přepočítají. Funguje to i obráceně: zadejte HEX a přečtěte si odpovídající `oklch()`. Jedna výhrada: OKLCH umí popsat i barvy mimo rozsah sRGB a ty se oříznou na to, co sRGB zobrazí. Velmi syté `oklch()` proto na displeji s širokým gamutem nebude vypadat stejně jako jeho HEX podoba.

### Můžu oklch() používat v produkčním CSS?

Ano. Všechny aktuální verze Chrome, Edge, Firefoxu i Safari `oklch()` podporují a stal se oblíbeným zápisem pro design tokeny (Tailwind CSS 4 v něm definuje celou paletu). Pro velmi staré prohlížeče dejte na řádek před něj HEX jako zálohu. Tento nástroj vám dá obě hodnoty.

### Proč se harmonie změní, když přepnu na kolo RYB?

Protože to, co je „naproti“, závisí na rozložení odstínů po kruhu. Kolo RYB rozkládá pigmentové základní barvy rovnoměrně, takže doplňkové dvojice odpovídají tomu, co znají malíři: červená a zelená, modrá a oranžová, žlutá a fialová. Kola HSV a HSL rozkládají odstíny podle míchání světla, a proto párují červenou s azurovou. Ani jedno není špatně: RYB odpovídá výtvarné výchově, HSV a HSL tomu, co dělají obrazovky.

### Můžu věřit hodnotám CMYK pro tisk?

Berte je jako orientační. Skutečný převod pro tisk závisí na [barevném profilu](https://cs.wikipedia.org/wiki/Barevn%C3%BD_profil) tiskárny, papíru a inkoustu. Stejná RGB barva vyjde jinak na křídovém a jinak na nenatíraném papíře. Hodnoty tady počítá standardní vzorec, který vás dostane blízko, ale finální nátisk je věc tiskárny.

### Kde je tlačítko kapátka ve Firefoxu nebo Safari?

Je schválně skryté. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, anglicky), na kterém tlačítko stojí, zatím umí jen prohlížeče postavené na Chromiu (Chrome, Edge, Opera). Ostatní funkce nástroje fungují všude, chybí jen výběr barvy z obrazovky. Pokud potřebujete barvu z obrázku, použijte [online kapátko](https://acrafto.com/cs/vyber-barev-z-obrazku/), které funguje ve všech prohlížečích.

### Zůstává moje historie barev soukromá?

Ano. Historie je uložená v localStorage vašeho prohlížeče na vašem zařízení. Nic, co vyberete, vložíte nebo zkopírujete, se nikam neodesílá. Celý nástroj běží jako JavaScript v prohlížeči, což si ověříte na záložce Síť ve vývojářských nástrojích.

## Other languages

- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/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))