Конвертер кольорів

HEX та RGB — це два найпоширеніші формати кольорів в інтернеті. HEX-коди (#RRGGBB) є компактними та широко використовуються в CSS, тоді як значення RGB (0-255 на канал) використовуються в JavaScript та інструментах дизайну.

Наш конвертер hex в rgb миттєво переводить між цими форматами, що полегшує роботу в різних інструментах та кодових базах.

HSL (Відтінок, Насиченість, Світлість) — це найінтуїтивніша колірна модель для дизайнерів. Налаштуйте:

• Відтінок для зміни кольору
• Насиченість для живості
• Світлість для яскравості

Наш конвертер кольорів HSL полегшує створення колірних варіацій, побудову палітр та переведення значень HSL у HEX або RGB для впровадження.

Конвертація кольорів екрана (RGB) у кольори друку (CMYK) вимагає ретельного перетворення, оскільки обидві колірні моделі працюють по-різному. RGB є адитивною (на основі світла), тоді як CMYK є субтрактивною (на основі фарби).

Наш конвертер RGB в CMYK надає приблизні значення для друку, хоча кінцеві результати залежать від вашого принтера та паперу.

Щоб конвертувати колір HEX в RGB, розділіть шестизначний код (#RRGGBB) на три пари по два символи та переведіть кожну з базової 16 (шістнадцяткової) у базову 10 (десяткову): R = 16 × d1 + d2 тощо для зеленого та синього.

Наприклад, #FF5733 дає FF = 255, 57 = 87, 33 = 51, або rgb(255, 87, 51). Обидва позначення описують один і той самий колірний простір sRGB, визначений стандартом IEC 61966-2-1 та згаданий у специфікації W3C CSS Color.

Кожен канал охоплює 0–255 (8 біт), що дає 256³ = 16 777 216 можливих кольорів. Скорочений HEX (#F53) просто дублює кожну цифру в пару.

RGB конвертується в HSL та HSV за допомогою однакового першого кроку: нормалізуйте кожен канал до діапазону 0–1 (розділіть на 255), а потім знайдіть максимальне та мінімальне значення. Відтінок (Hue) у обох моделях однаковий і визначається за найбільшим каналом.

Для HSL світлість (Lightness) = (max + min) / 2; для HSV значення (Value) = max. Насиченість обчислюється інакше: HSL ділить хрому на 1 − |2L − 1|, тоді як HSV ділить хрому на max.

HSL та HSV — це циліндричні перетворення куба RGB, стандартизовані в модулі кольорів W3C CSS. Дизайнери надають їм перевагу, оскільки відтінок, насиченість і світлість відповідають тому, як люди описують колір.

HEX-код кольору — це шістнадцятковий скорочений запис значень каналів RGB, перед яким стоїть знак #.

• Загальна шестизначна форма (#RRGGBB) кодує червоний, зелений та синій кольори по дві шістнадцяткові цифри на кожен.
• Тризначний скорочений запис (#RGB) розширює кожну цифру до пари, тому #F53 дорівнює #FF5533.
• Восьмизначна форма (#RRGGBBAA) та чотиризначний скорочений запис додають канал альфа (прозорості), як визначено в модулі кольорів W3C CSS рівня 4.

Шістнадцяткова система є основою-16 з використанням цифр 0–9 і літер A–F, де A = 10, а F = 15. Завдяки такому компактному запису HEX домінує в CSS та палітрах інструментів дизайну.

Більшість значень HEX та RGB, які ви використовуєте в інтернеті, належать до sRGB — стандартного колірного простору, визначеного IEC 61966-2-1, який передбачається в CSS за замовчуванням, якщо не вказано інший простір. sRGB охоплює обмежену частину кольорів, які може бачити людське око, тому для сучасних дисплеїв існують простори з ширшим охватом, такі як Display P3 та Rec. 2020.

Модуль кольорів CSS рівня 4 від W3C додає такі функції, як color() та oklch(), щоб охопити ці кольорові простори. Цей конвертер працює в sRGB, який залишається найбезпечнішим і найбільш сумісним простором для повсякденної веб- та UI-роботи в різних браузерах і пристроях.

Конвертери кольорів перекладають окремий колір між форматами, щоб він працював скрізь, де це необхідно.

• Веброзробники конвертують HEX в RGB або RGBA, щоб додати прозорості в CSS.
• UI-дизайнери використовують HSL для створення світліших і темніших відтінків брендового кольору, регулюючи лише світлість.
• Команди друку конвертують RGB у CMYK перед відправленням макета в друкарню, оскільки фарба є субтрактивною.
• Інструменти візуалізації даних та доступності використовують ці значення для перевірки коефіцієнтів контрастності згідно з рекомендаціями WCAG від W3C.

Конвертер позбавляє від необхідності вручну виконувати обчислення в шістнадцятковій системі та забезпечує незмінність кольору в коді, файлах дизайну та друку.

CSS визначає 148 іменованих кольорів, таких як tomato (#FF6347), dodgerblue (#1E90FF) та rebeccapurple (#663399), кожен з яких є точним псевдонімом для конкретного HEX-значення sRGB. Ці назви стандартизовані в модулі кольорів W3C CSS і підтримуються кожним сучасним браузером.

Вони зручні для прототипування, але становлять лише крихітну частку з 16,7 мільйона кольорів, доступних через HEX та RGB.

Оскільки іменований колір дорівнює фіксованому HEX-коду, конвертери можуть відображати найближчий іменований колір для будь-якого введеного значення. Ключові слова кольорів не чутливі до регістру в CSS, тому 'DodgerBlue' та 'dodgerblue' відображаються однаково.

Уникайте цих частих помилок при конвертації кольорів:

• Найпоширенішою помилкою є пропуск префікса # або неправильне розділення HEX-пар, що спотворює результат RGB.
• Інша помилка полягає в тому, щоб вважати HSL та HSV ідентичними: їхній третій компонент (світлість проти значення) відрізняється, тому 50% світлості — це не 50% значення.
• Очікування, що конвертація RGB в CMYK буде точною, викликає несподіванки при друку, оскільки вихідні дані CMYK залежать від принтера, чорнила та паперу, а математичні розрахунки є лише приблизними згідно зі стандартами sRGB та профілів друку.
• Занадто раннє заокруглення при конвертації через HSL і назад також може призвести до зсуву кольору.
• Нарешті, забуття про альфа-канал призводить до втрати прозорості при переході між RGB та RGBA або #RRGGBBAA.

Кожен колірний формат підходить для певної задачі.

• HEX (#RRGGBB) є найкомпактнішим і використовується за замовчуванням для CSS та передачі дизайну в роботу.
• RGB (0–255 на канал) найлегше читати та змінювати в JavaScript, і він відображає те, як екрани випромінюють світло за адитивним принципом.
• HSL (відтінок, насиченість, світлість) найкраще підходить для створення палітр і інтуїтивного налаштування відтінків.
• CMYK (блакитний, маджента, жовтий, чорний) зарезервовано для друку, де колір утворюється субтрактивним чорнилом на папері.

Усі формати для екранів спільно використовують простір sRGB, визначений IEC 61966-2-1 та модулем кольорів W3C CSS, тому HEX, RGB та HSL є повністю взаємозамінними; лише CMYK вимагає приблизної конвертації, що залежить від пристрою.