Посібник із перетворення HEX, RGB, HSL для команд продуктів

Довідка з перетворення HEX, RGB, HSL для продуктових команд

Дизайнери передають коди HEX у Figma. Інженери пишуть RGB у коді. HSL — це те, що вам дійсно потрібно для програмної маніпуляції кольорами. Тут показано, як пов'язані ці три формати та коли використовувати кожен із них.

Три формати

HEX -- #FF5733

Два шістнадцяткових цифри на канал: #RRGGBB. Кожна пара — 00-FF (0-255 у десятковому вигляді). Веб-стандарт з 1990-х років. Компактний, універсально підтримуваний, але непрозорий для людського сприйняття.

RGB -- rgb(255, 87, 51)

Три десяткові значення, 0-255 на канал. Що використовує CSS rgb(). Трохи більш читабельний, ніж HEX, але все ще важко змінити подумки («зробити на 20% світлішим» не є очевидним у RGB).

HSL -- hsl(11, 100%, 60%)

Відтінок (0-360 градусів на колірному колі), Насиченість (0-100%), Світлість (0-100%). Розроблений для людей: ви можете безпосередньо міркувати про співвідношення кольорів.

Коли використовувати кожен

Чому HSL виграє для систем тем

З HSL маніпуляція кольорами є арифметичною:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% світлість */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% світлість */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* зменшена насиченість */
}

Змініть --hue на 210, і ваша вся палітра зміститься від оранжевого до синього. Спробуйте це з HEX.

Зробити світлішим: збільшити L. 60% → 80% = світлішим.

Зробити темнішим: зменшити L. 60% → 40% = темнішим.

Зменшити насиченість: зменшити S. 100% → 40% = більш приглушеним.

Допоміжний колір: додати 180 до H. 11 → 191.

Шпаргалка з перетворення

HEX → RGB: Розділити на пари, перетворити шістнадцяткові у десяткові.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (спрощено):

Не запам'ятовувати формули. Використовуйте Інструмент вибору кольорів, щоб миттєво перетворювати всі три формати.

Сучасний CSS: oklch()

CSS Color Level 4 представлений oklch() -- сприймається рівномірна світлість. На відміну від HSL, рівні L значення дійсно виглядають однаково яскравими по всіх відтінках. Якщо ви починаєте нову систему дизайну у 2025 році або пізніше, розгляньте використання oklch() поряд із HSL.

Пов'язані матеріали