Інструменти кольору

Онлайн-конвертер кольорів | Синхронізація RGB, HEX, HSL, HSV і CMYK

Перетворюйте кольори між RGB, HEX, HSL, HSV, CMYK та їх alpha-версіями. Введіть будь-який формат у конвертері кольорів — решта оновиться миттєво.

Жива синхронізаціяБез завантаження файлів

Візуальний попередній перегляд

Використовуйте зразок, вбудований вибір кольору та повзунок alpha, щоб точно налаштувати той самий колір у всіх форматах.

Колір попереднього перегляду

#3B82F6

rgba(59, 130, 246, 0.84)

#3B82F6
0.84
01

Живі канали

HEX
R
59
G
130
B
246
A
0.84

Якщо під час введення поле тимчасово стає некоректним, останній валідний колір залишається активним. Завершіть значення, і інші формати автоматично синхронізуються знову.

Жива синхронізаціяБез завантаження файлів

Двобічний редактор форматів кольору

Усі формати нижче можна редагувати. Змініть HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK або CMYKA, і решта колірних моделей одразу залишатиметься синхронізованою.

HEX

джерело

RGB

RGBA

HSL

HSLA

HSV

HSVA

CMYK

CMYKA

Пояснення

Пояснення

RGB

RGB — це стандартна колірна модель, що складається з каналів червоного (R), зеленого (G) та синього (B). Змінюючи інтенсивність цих трьох каналів, RGB може відтворити більшість кольорів, видимих на екранах. Це одна з найпоширеніших колірних систем у цифровому середовищі.

RGBA

RGBA — це RGB з альфа-каналом для прозорості. R, G і B зазвичай мають значення від 0 до 255, а A — від 0 до 1 або від 0% до 100%. Формат часто використовують у CSS, коли одному й тому самому кольору потрібні різні рівні непрозорості.

HEX

HEX — це шістнадцятковий спосіб представлення кольорів. Він широко використовується у вебдизайні та CSS, тому що є компактним і зручним для копіювання. Значення на кшталт #2E8B57 зберігає червоний, зелений і синій як шістнадцяткові пари, а розширені варіанти можуть також містити прозорість.

HSL

HSL (тон, насиченість, світлість) подає RGB-кольори в циліндричній системі координат. H означає базовий відтінок, S — чистоту кольору, а L — яскравість. 0% — найтемніший варіант, 50% — збалансований, 100% — найсвітліший.

HSLA

HSLA — це варіант HSL з альфа-каналом. Він зберігає тон, насиченість і світлість та додає прозорість, тому підходить для тіней, напівпрозорих заливок, оверлеїв і станів інтерфейсу.

HSV

HSV (тон, насиченість, значення) — це колірний простір, створений A. R. Smith у 1978 році, також відомий як Hexcone Model. Оскільки Value безпосередньо описує сприйману яскравість, HSV часто зручний для інтуїтивного вибору кольорів.

HSVA

HSVA розширює HSV альфа-каналом. Це корисно, коли ви хочете працювати з тоном, насиченістю та значенням і водночас описувати непрозорість для кольорів інтерфейсу та багатошарової графіки.

CMYK

CMYK — це колірна модель, яка використовується в друці. Друковані матеріали видно завдяки відбитому світлу, тому CMYK добре підходить для газет, пакування та брошур. На відміну від RGB для екранів, CMYK створено для фарби на папері.

CMYKA

CMYKA розширює CMYK додаванням альфа-каналу. Це корисно, коли потрібно описати значення cyan, magenta, yellow і key разом із прозорістю для передачі дизайну або багатошарових ресурсів.

Як користуватися онлайн-конвертером кольорів

01

Вставте або введіть значення в будь-яке поле формату, наприклад HEX, RGB, RGBA, HSL, HSV або CMYK.

02

Щойно значення стане коректним, інструмент автоматично перетворить його в усі інші підтримувані формати кольорів.

03

Скористайтеся панеллю попереднього перегляду, вибором кольору, повзунком alpha і діями копіювання, щоб точно налаштувати та експортувати потрібний колір.

Ключові можливості

Двобічна синхронізація форматів

Змінюйте будь-який підтримуваний формат і підтримуйте RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK і CMYKA синхронізованими в реальному часі.

Візуальне керування кольором

Одразу бачте поточний колір завдяки живому зразку, вибору кольору браузера, повзунку alpha і показникам каналів.

Конвертація в браузері

Кожне поле підтримує звичний функціональний синтаксис, а всі перетворення відбуваються в браузері швидко та конфіденційно.

Поширені запитання про конвертер кольорів

Чи можу я редагувати будь-який формат кольору й оновлювати всі інші?

Так. Конвертер синхронізує значення в обидва боки. Якщо ви редагуєте RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK або CMYKA, інші формати оновляться відразу після введення коректного значення.

Як обробляється прозорість під час конвертації?

HEX показується без alpha, тому що сторінка зосереджена на потрібних форматах. Прозорість зберігається в RGBA, HSLA, HSVA і CMYKA, а попередній перегляд завжди відображає поточну непрозорість.

Цей конвертер кольорів приватний?

Ні. Уся логіка конвертації виконується локально у вашому браузері, тому значення кольорів не надсилаються на сервер.

Щоб перевести RGB у HEX (чи навпаки), введіть значення в будь-яке поле — наприклад, rgb(46, 139, 87) або #2E8B57 — і всі інші формати оновляться миттєво. Конвертер кольорів синхронізує HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK і CMYKA в обидва боки, показує живий зразок, вбудований вибір кольору (color picker) та повзунок alpha. Усі обчислення відбуваються прямо у браузері, тож ваші значення кольору нікуди не надсилаються.

Як користуватися конвертером кольорів

  1. 1

    Введіть значення кольору

    Вставте або наберіть значення в будь-яке поле формату: наприклад, #2E8B57 для HEX, rgb(46, 139, 87) для RGB або hsl(146, 50%, 36%) для HSL.

  2. 2

    Дивіться, як синхронізуються формати

    Щойно значення стане коректним, інструмент одразу перерахує його в усі інші формати — RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK і CMYKA.

  3. 3

    Точно налаштуйте колір

    Скористайтеся живим зразком, вбудованим вибором кольору та повзунком alpha, щоб підкоригувати відтінок і непрозорість, або натисніть «Випадково», щоб знайти новий колір.

  4. 4

    Скопіюйте або експортуйте

    Клацніть будь-яке поле, щоб скопіювати його значення, або натисніть «Копіювати все», щоб одразу взяти всі формати для CSS, дизайн-файлів чи коду.

Джерела

  • W3C — CSS Color Module Level 4

    Специфікація W3C, що визначає колірні формати CSS, зокрема HEX, rgb(), hsl(), hwb() та сучасний синтаксис кольору.

  • MDN — значення CSS <color>

    Довідник MDN з усіх нотацій кольору CSS — HEX, RGB/RGBA, HSL/HSLA — та пояснення того, як працює альфа-прозорість.

Пов’язані інструменти

Поширені запитання

Як перевести RGB у HEX?
Введіть значення на кшталт rgb(46, 139, 87) у поле RGB — і поле HEX миттєво покаже #2E8B57. Не потрібно нічого натискати: щойно значення RGB стає коректним, HEX-код оновлюється автоматично.
Як перевести HEX у RGB?
Введіть HEX-код, наприклад #2E8B57, у поле HEX — і поле RGB одразу покаже rgb(46, 139, 87). Оскільки формати синхронізовані в обидва боки, конвертація працює в будь-якому напрямку без окремого кроку.
Чи можу я редагувати будь-який формат кольору й оновлювати всі інші?
Так. Конвертер синхронізує значення в обидва боки. Якщо ви редагуєте RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK або CMYKA, інші формати оновляться відразу після введення коректного значення.
Чи є тут вибір кольору (color picker) для RGB і HEX?
Так. Вбудований вибір кольору дає змогу обрати відтінок візуально, а поля RGB і HEX одразу показують відповідні значення. Можна також скористатися повзунком alpha, щоб задати рівень непрозорості.
Як обробляється прозорість під час конвертації?
HEX показується без alpha, тому що сторінка зосереджена на потрібних форматах. Прозорість зберігається в RGBA, HSLA, HSVA і CMYKA, а попередній перегляд завжди відображає поточну непрозорість.
Чи перетворює інструмент RGB у CMYK для друку?
Так. Поля CMYK і CMYKA оновлюються щоразу, коли ви змінюєте інший формат, даючи готові для друку значення cyan, magenta, yellow і key. Зверніть увагу: CMYK залежить від пристрою, тому колір на екрані та у друці може трохи відрізнятися.
Чи конфіденційний цей конвертер кольорів?
Так. Жодні дані не залишають ваш пристрій. Уся логіка конвертації виконується локально у браузері, тому значення кольорів ніколи не надсилаються на сервер.