DevToolPal
UK

Конвертер кольорів (HEX, RGB, HSL)

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

Працює локально, нічого не завантажується на сервер

Параметри

Колір

Результат

Тут з’явиться результат

Що робить інструмент

Конвертер кольорів приймає колір у будь-якому поширеному записі CSS і показує його одразу в усіх інших: HEX, RGB, HSL, HSV і CMYK. Також він показує зразок кольору, назву кольору в CSS (якщо є точний збіг) і коефіцієнт контрастності з білим і чорним, щоб ви могли перевірити читабельність.

Як користуватися

  1. Введіть або вставте колір у поле Колір чи скористайтеся піпеткою поруч із ним.
  2. Усі записи оновлюються під час введення. Натисніть Копіювати біля потрібного.
  3. Увімкніть HEX великими літерами, якщо ваш стайлгайд пише HEX у верхньому регістрі.
  4. Перш ніж використовувати колір для тексту, перевірте рядки контрасту: зелена позначка означає, що колір проходить WCAG AA.

Приклад

#1e90ff — це CSS-колір dodgerblue. Він перетворюється на:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Його контраст на білому — 3.24:1: цього достатньо для великих заголовків, але не для основного тексту.

Коротко про колірні моделі

  • HEX і RGB описують, скільки червоного, зеленого й синього світла випромінює екран. Саме їх усередині використовують браузери та дизайн-інструменти.
  • HSL описує відтінок (кут на колірному колі), насиченість і світлість, тож у ній легко отримати світліші чи темніші відтінки того самого кольору.
  • HSV (також HSB) використовується в більшості піпеток у програмах для дизайну.
  • CMYK описує блакитну, пурпурову, жовту й чорну фарби для друку.

Кольори з прозорістю, як-от #1e90ff80 чи rgb(30 144 255 / 50%), показуються з альфа-каналом у HEX, RGB і HSL.

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

› Як перетворити HEX у RGB?

Розбийте шість шістнадцяткових цифр на три пари й прочитайте кожну пару як число від 0 до 255. Для #1e90ff це 1e = 30, 90 = 144 і ff = 255, тобто rgb(30, 144, 255). Інструмент робить це за вас під час введення.

› Які формати можна вставляти?

HEX із # або без нього (3, 4, 6 чи 8 цифр), rgb() і rgba(), hsl() і hsla() як із комами, так і з пробілами, відсотки, кутові одиниці на кшталт deg і turn, а також усі 148 назв кольорів CSS.

› Що означає коефіцієнт контрастності?

Це контраст за WCAG 2 між кольором і білим або чорним тлом. Для основного тексту на рівні AA потрібно щонайменше 4.5:1; для великого тексту (близько 24px або 19px жирним) — 3:1.

› Чому CMYK лише приблизний?

Принтери використовують профілі фарб, що залежать від паперу й друкарської машини. Показаний тут CMYK розраховано за стандартною апаратно-незалежною формулою: це добра відправна точка, але не заміна профілю друку.