Про ці формати кольору
HEX і RGB є стандартними форматами для екранів і CSS: HEX компактний (#3B82F6), RGB чітко показує кожен канал (0-255). HSL (відтінок, насиченість, світлота) та HSV (відтінок, насиченість, яскравість) описують колір ближче до того, як його сприймає людина - легше обрати відтінок чи варіацію в межах того самого тону. CMYK (блакитний, пурпуровий, жовтий, чорний) призначений для друку, де колір створюється змішуванням чорнила, а не випромінюванням світла.
Що робить цей інструмент
Конвертер кольорів показує один колір одразу в п'яти записах: HEX, RGB, HSL, HSV і CMYK. Введіть hex-код, задайте значення RGB, пересуньте повзунки чи оберіть один із 148 іменованих кольорів CSS — усі формати оновляться миттєво.
Кожен рядок має власну кнопку копіювання й записаний у готовому для CSS синтаксисі, наприклад rgb(59, 130, 246) чи hsl(217, 91%, 60%). Конвертація повністю виконується у вашому браузері.
Коли використовувати
- Перенесення фірмового кольору з макета в HEX у код CSS, Android чи iOS, де очікується RGB чи HSL.
- Отримання світлішого чи темнішого відтінку того самого тону зміною лише світлоти в HSL.
- Перевірка того, що текст на кольоровому тлі лишається читабельним, за допомогою Перевірка Контрасту Кольору.
- Складання палітри для дизайн-системи й документування кожного кольору в усіх записах, які можуть знадобитися розробникам.
Приклад
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Запитання про цей інструмент
Чому CMYK лише приблизно передає друковані кольори?
Екрани змішують світло, а принтери — фарбу, і кожен принтер і вид паперу поводяться по-своєму. Значення CMYK — це математичне перетворення, тож коли важливий точний колір, попросіть у друкарні значення на основі колірного профілю.
Чим HSL відрізняється від HSV?
Обидва починаються з тону й насиченості. HSL використовує світлоту, де 100% — завжди білий, а HSV — значення (яскравість), де 100% — найнасиченіший варіант кольору. Графічні редактори часто використовують HSV, а CSS — HSL.
Чи підтримується прозорість?
Непрозорість тут не входить до цих п'яти форматів. У CSS додайте її четвертим значенням, наприклад rgb(59 130 246 / 50%), або двома додатковими hex-цифрами: #3B82F680.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.