HEX, RGB, HSL: у чому різниця між кольоровими форматами

Кольорові формати в Інтернеті

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

HEX (#RRGGBB)

Шістнадцяткове число є найпоширенішим форматом в Інтернеті.

колір: #4f46e5; /* Індиго */ 
колір: #09090b; /* Майже чорний */ 
колір: #fff; /* Коротка форма #ffffff */ 

Переваги: Стислість, зрозумілість для дизайнерів, підтримується всюди.

RGB (червоний, зелений, синій)

Встановлює колір через інтенсивність трьох каналів від 0 до 255.

колір: rgb(79, 70, 229); /* Індиго */ 
колір: rgba(79, 70, 229, 0,5); /* З прозорістю */ 

Переваги: Інтуїтивно зрозумілий, зручний для програмного керування кольором.

HSL (відтінок, насиченість, освітленість)

Самий «людський» формат: відтінок (°), насиченість (%), освітленість (%).

колір: hsl(243, 75%, 59%); /* Індиго */ 
колір: hsl(243, 75%, 45%); /* Темніше */ 
колір: hsl(243, 75%, 75%); /* Запальничка */ 

Переваги: Легко створюйте тональні палітри, змінюючи лише освітленість.

CMYK (блакитний, пурпуровий, жовтий, ключовий/чорний)

Використовується в поліграфії.

cmyk(66%, 69%, 0%, 10%) = індиго 

Переваги: Точна відповідність кольору під час друку.

Коли використовувати що?

Перетворюйте кольори в Інтернеті за допомогою нашого інструменту - перевірки контрастності HEX, RGB, HSL, CMYK і WCAG.