# Вибір кольору онлайн

> Колірне коло HSV, HSL і малярське RYB, готові гармонії та конвертація HEX, RGB, HSL, OKLCH і CMYK. Плюс найближчий токен Tailwind. Безкоштовно.

URL: https://acrafto.com/uk/kolir-picker-onlayn/  
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.

Виберіть колір на колі, доопрацюйте його на полотні насиченості й яскравості та прочитайте його в кожному форматі, яким користується ваш проєкт, від `#RRGGBB` до `oklch()`. Інструмент уміє й те, що інші засоби вибору кольору пропускають: три геометрії кола, зокрема традиційне малярське коло RYB, гармонії, які самі складають палітру, канал прозорості та експорт усієї палітри одним кліком як CSS-змінні, SCSS або JSON. Усе обчислюється у вашому браузері.

## RYB чи RGB? Три колірні кола замість одного

Перемикач **Режим кола** змінює розташування відтінків на колі:

- **HSV** і **HSL**: цифрові колеса. Відтінки розташовані так, як їх змішує світло на екрані. Відрізняються квадратним полотном: у HSV найяскравіший кут це чистий відтінок, HSL розміщує чисті відтінки посередині світлості, а білий над ними.
- **RYB (малярське)**: розташовує відтінки так, як їх знають художники: червоний, жовтий і синій як основні кольори, а між ними оранжевий, зелений і фіолетовий (див. [модель RYB](https://en.wikipedia.org/wiki/RYB_color_model), англійською). Різницю найкраще видно на гармоніях. На колі RYB доповненням червоного є **зелений**, а доповненням синього **оранжевий**: класичні пігментні пари з уроків малювання. Цифрове коло натомість парує червоний з блакитним. Якщо «комплементарна» палітра зі звичайного вибору кольору вам колись здавалася невдалою, ось причина.

## Колірні гармонії: палітра, яка складається сама

У полі **Колірна гармонія** оберіть правило. Коло позначить супутні кольори, і під ним з’явиться готова палітра:

- **Комплементарна**: один протилежний колір. Найсильніший контраст, годиться для єдиного акценту біля основного кольору бренду.
- **Розділена комплементарна**: два сусіди протилежного кольору. Контраст майже такий самий сильний, але його легше збалансувати.
- **Тріадна**: три відтінки рівномірно по колу. Жвава і водночас стабільна, якщо один переважає, а два інші використовуєте помірно.
- **Тетрадна (квадрат)**: чотири відтінки. Багаті схеми для ілюстрацій і графіків, важко збалансувати в інтерфейсі застосунку.
- **Аналогова**: найближчі сусіди. Спокійне поєднання для фонів і переходів.
- **Монохромна**: один відтінок у кількох рівнях світлості. Найбезпечніший вибір для станів кнопок (наведення, активний, вимкнений).

Усю палітру скопіюєте одним кліком у форматі на вибір: звичайний **HEX**, **RGB**, **HSL**, **OKLCH**, готові до вставки **CSS-змінні** (`--color-1: …`), **SCSS-змінні** або **JSON** для коду. Чи палітра тримає контраст для людей, які гірше розрізняють відтінки, швидко перевірите на скриншоті після [переведення у відтінки сірого](https://acrafto.com/uk/perevedennya-zobrazhen-u-vidtinky-siroho-onlayn/).

## Конвертація HEX, RGB, HSL, OKLCH і CMYK: вставте що завгодно, отримаєте все

Поля введення приймають майже будь-який запис кольору: `#f80`, `#ff8800`, восьмизначний hex із прозорістю, `rgb()` і `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` і названі кольори CSS на кшталт `rebeccapurple`. Що б ви не ввели, отримаєте сім узгоджених виводів: **HEX, RGB, HSL, HSV, LCH, OKLCH і CMYK**, кожен зі своєю кнопкою копіювання.

Повзунок **Непрозорість (альфа)** під попереднім переглядом перемикає виводи на прозорі записи `#RRGGBBAA`, `rgba()` і `hsla()`. Попередній перегляд малюється на шахівниці, тож прозорість одразу видно.

## Найближчий токен Tailwind CSS для будь-якого кольору

Дві позначки під попереднім переглядом називають колір: **найближчий іменований колір CSS** (для швидких прототипів) і **найближчий токен Tailwind**, наприклад `orange-500`. Так ви лишаєтесь у своїй дизайн-системі й не вигадуєте одноразові значення. Клацання на позначці копіює її.

Це відповідь на питання, яке виникає під час кожної передачі макета: дизайнер надіслав hex-код, який клас Tailwind йому найближчий? Відповідність рахується проти стандартної палітри Tailwind CSS 4 (див. [документацію Tailwind](https://tailwindcss.com/docs/colors), англійською), тож токен одразу можна вставити в назву класу.

## Який формат кольору використати?

| Формат | Повна назва | Коли використовувати? |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Типовий вибір для вебу.** Короткий, підтримується всюди, легко копіюється. Вісім цифр додають прозорість. |
| **RGB** | Red, Green, Blue | **Так мислять екрани.** Три канали світла від 0 до 255. Формат, якого очікує більшість API та код canvas. |
| **HSL** | Hue, Saturation, Lightness | **Для редагування на око.** «Трохи світліше» або «менш насичено» означає змінити лише одне число. |
| **HSV** | Hue, Saturation, Value | **Графічні програми.** Модель, на якій побудований вибір кольору в Photoshop і GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Перцептивна рівномірність.** Однакові числові кроки виглядають як однакові візуальні кроки, чим HSL лише вдає. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Сучасний вибір для CSS.** Виправляє зсуви відтінку в синіх тонах, які властиві LCH. Підтримується всіма сучасними браузерами, годиться для дизайн-токенів. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Орієнтир для друку.** Приблизна конвертація для розмови з друкарнею, остаточні значення визначає її кольоровий профіль. |

Чому OKLCH перцептивно рівномірніший за старіші моделі, пояснює автор простору Oklab Б’єрн Оттоссон у [первинній статті](https://bottosson.github.io/posts/oklab/) (англійською). Синтаксис і підтримку в браузерах підсумовує [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (англійською). Як працює модель для друку, описує [Вікіпедія у статті CMYK](https://uk.wikipedia.org/wiki/CMYK).

## Дрібниці, які економлять час

- **Історія зберігається сама.** Останні 24 кольори переживають оновлення сторінки. Вони лишаються тільки в сховищі вашого браузера й нікуди не надсилаються.
- **Піпетка.** У браузерах з EyeDropper API (Chrome і Edge) виберете колір будь-де на екрані, навіть поза вікном браузера. Колір із фото чи файлу з логотипом дізнаєтесь в [онлайн піпетці](https://acrafto.com/uk/onlajn-pipetka-koloru/).
- **Керування з клавіатури.** Коло і полотно насиченості й яскравості реагують на стрілки, тож колір доопрацюєте малими кроками.
- **Готові кольори** пропонують поширені базові кольори, коли потрібен лише швидкий старт.

## Часті запитання

### Як перевести OKLCH у HEX?

Вставте значення `oklch()` у поле OKLCH, і решта виводів, зокрема HEX, одразу перерахуються. Працює і навпаки: введіть HEX і прочитайте відповідний `oklch()`. Один нюанс: OKLCH уміє описувати й кольори поза діапазоном sRGB, і їх обрізає до того, що здатен показати sRGB. Тому дуже насичений `oklch()` на дисплеї з широким гамутом виглядатиме не так, як його HEX-варіант.

### Чи можна використовувати oklch() у продакшн CSS?

Так. Усі сучасні версії Chrome, Edge, Firefox і Safari підтримують `oklch()`, і запис став популярним для дизайн-токенів (Tailwind CSS 4 визначає в ньому всю палітру). Для дуже старих браузерів додайте HEX як резерв рядком вище. Цей інструмент дає обидва значення.

### Чому гармонії змінюються, коли перемикаю на коло RYB?

Тому що те, що вважається «протилежним», залежить від розташування відтінків по колу. Коло RYB рівномірно розкладає пігментні основні кольори, тож комплементарні пари відповідають тому, що знають художники: червоний і зелений, синій і оранжевий, жовтий і фіолетовий. Колеса HSV і HSL розкладають відтінки за змішуванням світла, тому пара у них червоний і блакитний. Жоден варіант не помилковий: RYB відповідає художній освіті, HSV і HSL тому, що роблять екрани.

### Чи можна довіряти значенням CMYK для друку?

Сприймайте їх як орієнтир. Справжня конвертація для друку залежить від [ICC-профілю](https://en.wikipedia.org/wiki/ICC_profile) (англійською) принтера, паперу та фарби. Той самий колір RGB вийде інакше на крейдованому й на некрейдованому папері. Значення тут рахує стандартна формула, яка наближає результат, але фінальний відбиток це справа друкарні.

### Де кнопка піпетки у Firefox чи Safari?

Вона схована навмисно. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, англійською), на якому тримається кнопка, наразі вміють лише браузери на Chromium (Chrome, Edge, Opera). Решта функцій інструмента працює всюди, бракує лише вибору кольору з екрана. Якщо потрібен колір із зображення, скористайтеся [онлайн піпеткою](https://acrafto.com/uk/onlajn-pipetka-koloru/), яка працює в усіх браузерах.

### Чи лишається моя історія кольорів приватною?

Так. Історія зберігається в localStorage вашого браузера на вашому пристрої. Ніщо з того, що ви вибираєте, вставляєте чи копіюєте, нікуди не надсилається. Увесь інструмент працює як JavaScript у браузері, що можна перевірити на вкладці «Мережа» в інструментах розробника.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- 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))
- Русский (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))