У цій статті
Формати кольорів
Кольори в цифровому дизайні та веб-розробці представлені в кількох форматах, кожен з яких підходить для різних контекстів. HEX (#ff5733) — лаконічний і універсальний для вебу. RGB (255, 87, 51) — інтуїтивний для змішування кольорів. HSL (14°, 100%, 60%) — найбільш зрозумілий людині для налаштування відтінку, насиченості та яскравості.
Різні інструменти використовують різні формати кольорів — дизайнерське програмне забезпечення часто надає перевагу HSL, HTML/CSS використовує HEX і RGB, бібліотеки JavaScript для роботи з кольорами можуть підтримувати різні формати, а поліграфічний дизайн використовує CMYK. Точне перетворення між ними потребує математичних формул.
Як працює конвертація кольорів
Конвертер застосовує точні математичні перетворення між колірними просторами.
- Розбір HEX — декодує 3- та 6-значні шістнадцяткові коди, з альфа-каналом або без нього
- Нормалізація RGB — обробляє цілочисельні значення від 0 до 255 та значення з рухомою комою від 0 до 1
- Обчислення HSL — конвертує до/від відтінку (0–360°), насиченості (0–100%) та яскравості (0–100%)
Спробуйте безкоштовно — реєстрація не потрібна
Конвертувати колір →Коли використовувати конвертацію кольорів
Конвертація кольорів необхідна щоразу, коли кольори переміщуються між різними інструментами, форматами або контекстами.
- Від дизайну до коду — конвертація HSL-значень кольорів із Figma/Sketch у HEX для реалізації в CSS
- Узгодженість бренду — перевірка відповідності значень кольорів у різних дизайнерських інструментах та реалізаціях коду
- Доступність — обчислення коефіцієнтів контрастності (що використовують відносну яскравість із RGB-значень) для відповідності стандарту WCAG
Часті запитання
У чому різниця між RGB та RGBA?
RGBA додає до RGB альфа-канал, що представляє прозорість від 0 (повністю прозорий) до 1 (повністю непрозорий) або від 0 до 255 у деяких контекстах. Аналогічно, HEXA додає два шістнадцяткові символи для альфа (наприклад, #FF5733FF для повністю непрозорого або #FF573380 для 50% прозорості). Альфа-значення дозволяють використовувати прозорі та напівпрозорі кольори.
Чому конвертація кольору та зворотна конвертація не завжди повертає точно те саме значення?
Перетворення колірних просторів передбачає операції з числами з рухомою комою та округлення. Конвертації туди і назад (RGB → HSL → RGB) можуть мати незначні похибки округлення в останній цифрі. Це нормально, і різниця непомітна для людського ока. Для роботи, де важлива точність, завжди зберігайте кольори в єдиному канонічному форматі.
У чому різниця між HSL та HSV/HSB?
HSL (відтінок, насиченість, яскравість) та HSV/HSB (відтінок, насиченість, значення/яскравість) — це різні циліндричні колірні моделі. У HSL повний білий — це L=100% незалежно від насиченості; у HSV повний білий — це S=0%, V=100%. HSL більш інтуїтивний для веб-дизайну; HSV широко використовується в елементах керування вибором кольору.