Як перевести RGB в HEX?

Введіть значення RGB, наприклад rgb(42, 157, 143) або просто 42, 157, 143, і скопіюйте HEX. Кожен канал стає двома шістнадцятковими цифрами: 42 — це 2a, 157 — 9d, 143 — 8f.

Чим відрізняються HSL і HSV?

Обидва використовують кут тону, але світлість HSL іде від чорного через чистий колір до білого, а значення HSV — лише від чорного до чистого кольору. CSS розуміє HSL; HSV (його також називають HSB) використовується в палітрах дизайнерських програм.

Що таке OKLCH і навіщо він потрібен?

OKLCH описує колір через сприйману світлість, хрому й тон. На відміну від HSL, однакова світлість виглядає однаково світлою для будь-якого тону, тож шкали й контраст лишаються передбачуваними, коли ви змінюєте тон. Усі сучасні браузери підтримують oklch() у CSS.

Чи можна конвертувати кольори з прозорістю?

Так. Введіть 8-значний HEX, rgb() з альфою після похилої риски, rgba() чи hsla() або скористайтеся повзунком «Альфа». Тоді кожен запис CSS міститиме значення альфа-каналу.

Чи точне значення CMYK для друку?

Це стандартне математичне перетворення, яке використовують вебінструменти. Реальний друк залежить від паперу, фарб і колірного профілю, тож для критичних фірмових матеріалів уточніть значення в друкарні або в програмі з підтримкою профілів.

Скільки іменованих кольорів у CSS?

CSS визначає 148 іменованих кольорів, зокрема rebeccapurple та написання grey і gray. Конвертер приймає всі з них і показує найближчу назву для будь-якого введеного кольору.

Конвертер кольорів: HEX, RGB, HSL, CMYK, OKLCH

Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH. Усе виконується локально — нічого не надсилається на сервер.

Вхід: HEX · RGB · HSL · HSV · CMYK · OKLCH · CSS names
Вихід: HEX · RGB · HSL · HSV · CMYK · OKLCH

Формати

#2a9d8f

Найближча назва CSS:

Непрозорість 100%

Альфа100%

HEX#2a9d8f
HEX8#2a9d8fff
RGBrgb(42 157 143)
RGB(A)rgb(42, 157, 143)
HSLhsl(172.7 57.8% 39%)
HSV / HSBhsv(172.7, 73.2%, 61.6%)
HWBhwb(172.7 16.5% 38.4%)
CMYKcmyk(73.2%, 0%, 8.9%, 38.4%)
OKLCHoklch(63.04% 0.1013 183.03)
OKLaboklab(63.04% -0.1012 -0.0054)

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

Варіації

клацніть, щоб використати

Світлі відтінки (до білого)

Темні відтінки (до чорного)

Приглушені відтінки (до сірого)

Комплементарна

#2a9d8f

#9d2a38

Аналогова

#2a9d56

#2a9d8f

#2a729d

Тріадна

#2a9d8f

#8f2a9d

#9d8f2a

Розділено-комплементарна

#2a9d8f

#9d2a72

#9d552a

Тетрадна

#2a9d8f

#552a9d

#9d2a38

#729d2a

Будь-який колір у всіх форматах запису

Вставте колір у будь-якому форматі, і цей конвертер кольорів одразу покаже його в усіх інших: HEX, RGB, HSL, HSV/HSB, HWB, CMYK, OKLCH, OKLab і найближчу назву кольору CSS. Прозорість зберігається всюди, а під значеннями ви отримуєте світлі, темні й приглушені відтінки кольору, а також комплементарні, аналогові та тріадні гармонії, кожну з яких можна одним клацанням зробити новим вхідним кольором. Усе обчислюється у вашому браузері під час введення.

Як перевести HEX в RGB (або в будь-що інше)

Введіть або вставте колір у поле: #2a9d8f, rgb(42 157 143), hsl(173 58% 39%), cmyk(73%, 0%, 9%, 38%), oklch(62% 0.1 183) або назву на кшталт teal. Або виберіть його палітрою.
Усі записи оновлюються миттєво. Натисніть кнопку копіювання поруч із потрібним.
Перетягніть повзунок Альфа, щоб зробити колір напівпрозорим; 8-значний HEX і CSS-функції з альфа-каналом оновлюються відповідно.
Клацніть будь-який зразок відтінку чи гармонії, щоб зробити його новим кольором і продовжити пошук.

Формати запису і коли який використовувати

HEX: #rrggbb або #rrggbbaa з альфа-каналом. Скорочена форма #rgb подвоює кожну цифру. Стандарт у дизайнерських інструментах і CSS.
RGB: Червоний, зелений і синій від 0 до 255. Сучасний CSS записує rgb(42 157 143 / 50%); старіший rgba(42, 157, 143, 0.5) і далі працює всюди.
HSL: Тон у градусах, насиченість і світлість у відсотках. Легко налаштовувати вручну, але 50% світлості не однаково яскраві для різних тонів: жовтий здається значно світлішим за синій.
HSV / HSB: Тон, насиченість і значення (або яскравість). Модель, на якій побудовані палітри в Photoshop, Figma та більшості дизайнерських програм. У CSS не підтримується.
HWB: Тон плюс кількість білого й чорного, які до нього домішуються. Валідний CSS починаючи з Color Level 4 і інтуїтивний для пастельних чи приглушених варіантів.
CMYK: Відсотки блакитної, пурпурової, жовтої та чорної (key) фарби для друку. Значення тут обчислюються за стандартною формулою; реальний друкований колір залежить від паперу й колірного профілю принтера.
OKLCH: Світлість, хрома й тон у перцептивно рівномірному просторі. Однакова світлість виглядає однаково світлою для всіх тонів, тому це найкращий вибір для побудови колірних шкал і доступних палітр. Підтримується всіма сучасними браузерами.
Назви CSS: 148 ключових слів, як-от tomato, rebeccapurple і slategray. Конвертер показує найближчу назву й позначає, коли збіг точний.

HEX в RGB вручну

Колір HEX — це три пари шістнадцяткових цифр. Розділіть #2a9d8f на 2a, 9d і 8f, потім переведіть кожну пару: 2a — це 2 × 16 + 10 = 42, 9d — це 9 × 16 + 13 = 157, а 8f — це 8 × 16 + 15 = 143, отже колір — rgb(42, 157, 143). У зворотному напрямку поділіть кожен канал на 16: частка — перша цифра, остача — друга. 8-значний HEX додає четверту пару для альфа-каналу, де ff — повна непрозорість, а 80 — приблизно 50%.

Перетворення між HEX, RGB, HSL, HSV і HWB точні з точністю до округлення. CMYK за своєю природою наближений, а кольори OKLCH, що виходять за межі діапазону sRGB, який може показати екран, повертаються в нього зменшенням хроми зі збереженням заданих світлості й тону.

Який формат використовувати в CSS?

Усі сучасні браузери розуміють HEX, rgb(), hsl(), hwb() і oklch(), тож вибір залежить від того, що легше читати й підтримувати. HEX компактний і саме його передають дизайнери, тому він лишається безпечним типовим варіантом для поодиноких значень. HSL зручний, коли треба трохи змінити колір вручну, наприклад для трохи світлішого стану hover.

Для дизайн-системи дедалі кращим вибором стає OKLCH. Оскільки його світлість перцептивна, набір фірмових кольорів з однаковим значенням L справді виглядає однаково світлим, і цілу шкалу можна отримати, змінюючи лише одне число. Він також описує яскравіші кольори широкогамутних екранів P3, чого не можуть HEX і rgb(). Пам'ятайте, що HSV, HSB і CMYK не є валідним CSS: вони тут для перенесення значень між дизайнерськими й поліграфічними інструментами.

Світлі, темні та приглушені відтінки й гармонії

Світлий відтінок (tint) змішує колір з білим, темний (shade) — з чорним, а приглушений (tone) — із сірим. Три ряди відходять від початкового кольору кроками по 10%, що дає стани hover, рамки й фони, які явно пасують одне одному.

Гармонії обертають тон по колу кольорів: комплементарна — протилежний тон, аналогова — сусіди на 30° з обох боків, тріадна — три тони через 120°, розділено-комплементарна — два тони обабіч доповняльного, а тетрадна — чотири тони через 90°. Це відправна точка для акцентів, а не правило: завжди перевіряйте кольори тексту в перевірці контрасту. Щоб натомість створити палітру з фото, скористайтеся генератором палітри кольорів.

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

Як перевести HEX в RGB?: Вставте HEX-код у конвертер і скопіюйте значення RGB. Вручну розділіть код на три пари й переведіть кожну із шістнадцяткової системи в десяткову: #2a9d8f стає 42, 157 і 143.
Як перевести RGB в HEX?: Введіть значення RGB, наприклад rgb(42, 157, 143) або просто 42, 157, 143, і скопіюйте HEX. Кожен канал стає двома шістнадцятковими цифрами: 42 — це 2a, 157 — 9d, 143 — 8f.
Чим відрізняються HSL і HSV?: Обидва використовують кут тону, але світлість HSL іде від чорного через чистий колір до білого, а значення HSV — лише від чорного до чистого кольору. CSS розуміє HSL; HSV (його також називають HSB) використовується в палітрах дизайнерських програм.
Що таке OKLCH і навіщо він потрібен?: OKLCH описує колір через сприйману світлість, хрому й тон. На відміну від HSL, однакова світлість виглядає однаково світлою для будь-якого тону, тож шкали й контраст лишаються передбачуваними, коли ви змінюєте тон. Усі сучасні браузери підтримують oklch() у CSS.
Чи можна конвертувати кольори з прозорістю?: Так. Введіть 8-значний HEX, rgb() з альфою після похилої риски, rgba() чи hsla() або скористайтеся повзунком «Альфа». Тоді кожен запис CSS міститиме значення альфа-каналу.
Чи точне значення CMYK для друку?: Це стандартне математичне перетворення, яке використовують вебінструменти. Реальний друк залежить від паперу, фарб і колірного профілю, тож для критичних фірмових матеріалів уточніть значення в друкарні або в програмі з підтримкою профілів.
Скільки іменованих кольорів у CSS?: CSS визначає 148 іменованих кольорів, зокрема rebeccapurple та написання grey і gray. Конвертер приймає всі з них і показує найближчу назву для будь-якого введеного кольору.

Схожі інструменти

Усі інструменти

WCAG Contrast CheckerCheck text and background colours against WCAG AA and AAA.Color Palette GeneratorPull the dominant colours out of any photo as HEX, RGB and HSL.Favicon GeneratorEvery favicon size, a real multi-size .ico and a web manifest from one image.Конвертер зображеньПерекодовуйте, змінюйте розмір і векторизуйте зображення з живим порівнянням до/після.Data StudioПереносьте структурований текст між JSON, YAML, TOML, CSV і Markdown.Стиснення та архіваціяСтискайте будь-які файли за допомогою gzip чи Brotli або пакуйте теку в ZIP.