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

Що таке конвертер кольорів?

Конвертер кольорів перекладає значення кольорів між різними колірними моделями: HEX, RGB, HSL, HSV та CMYK. Дизайнери та розробники часто потребують перемикання між форматами: CSS використовує HEX та RGB, дизайнерські інструменти часто використовують HSL для інтуїтивного вибору кольорів, а друкарські робочі процеси вимагають CMYK. Цей інструмент миттєво обробляє всі конвертації.

Кожна колірна модель по-різному представляє кольори. RGB (червоний, зелений, синій) змішує світло — використовується для екранів. CMYK (блакитний, пурпурний, жовтий, чорний) змішує чорнило — використовується для друку. HSL (відтінок, насиченість, яскравість) описує кольори так, як думають про них люди: чистий колір, насиченість та яскравість. HEX — це просто RGB, записаний у шістнадцятковому форматі.

Пояснення колірних моделей

• HEX — шестизначний шістнадцятковий код (#FF5733). Компактний і широко використовується у веброзробці.
• RGB — три значення (0–255) для червоного, зеленого та синього. Рідна колірна модель для екранів.
• HSL — відтінок (0–360 градусів), насиченість (0–100%) та яскравість (0–100%). Інтуїтивний для створення колірних палітр.
• HSV/HSB — подібний до HSL, але використовує значення/яскравість замість світлоти. Поширений у графічних дизайнерських інструментах.
• CMYK — чотири значення (0–100%) для блакитного, пурпурного, жовтого та чорного. Використовується у поліграфічному виробництві.

Як користуватися цим інструментом

Введіть значення кольору в будь-якому підтримуваному форматі — всі інші представлення розраховуються миттєво. Використовуйте палітру кольорів для візуального вибору. Інструмент показує зразок попереднього перегляду та конвертовані значення у форматах HEX, RGB, HSL, HSV та CMYK, готові до копіювання та вставлення у ваш код або дизайнерський інструмент.

Кольори у веброзробці

CSS підтримує кілька форматів кольорів: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) та іменовані кольори (tomato). Сучасний CSS також підтримує oklch() та oklab() для перцептуально рівномірних кольорових просторів. При виборі між форматами HEX є найкомпактнішим, HSL найлегший для програмного налаштування (освітлення збільшенням L, ненасиченість зменшенням S), а RGB найширше підтримується.

Приклад розрахунку

Шістнадцятковий колір #2563EB розкладається на червоний = 0x25 = 37, зелений = 0x63 = 99, синій = 0xEB = 235, тобто rgb(37, 99, 235). У HSL це приблизно hsl(217, 83%, 53%) — насичений синій. Щоб освітлити, підніміть значення L; щоб побудувати палітру, обертайте значення H кроками по 30°, тримаючи S і L сталими.

Поширені помилки

Поширена помилка вважати, що hex і RGB описують різні кольори — це ті самі значення в різному записі. Також ігнорують контраст: світло-сірий текст на білому може виглядати елегантно, але не відповідає коефіцієнтам WCAG. Крім того, RGB і CMYK не збігаються один до одного, тож яскравий колір на екрані може надрукуватися тьмянішим; робіть екранну пробу для друку, а не покладайтеся на монітор.

Часті запитання

Чому кольори на екрані та в друці виглядають по-різному?

Екрани випромінюють світло (RGB, адитивне змішування кольорів), тоді як принтери використовують чорнило, що поглинає світло (CMYK, субтрактивне змішування). Кольоровий охоплення RGB (діапазон можливих кольорів) більший за CMYK, тому деякі яскраві кольори екрана не можна відтворити в друці. Ось чому дизайнери повинні працювати в CMYK при створенні друкованих матеріалів і використовувати кольори Pantone для точного підбору.

У чому різниця між HSL та HSV?

Обидві використовують відтінок та насиченість, але різняться третім компонентом. Яскравість HSL варіюється від 0 (чорний) через 0,5 (чистий колір) до 1 (білий). Значення HSV варіюється від 0 (чорний) до 1 (повна яскравість). В HSL насиченість 100% при яскравості 50% дає найчистіший колір. В HSV насиченість 100% та значення 100% дає найчистіший колір. HSL загалом більш інтуїтивний для вебдизайну.

Яка різниця між HEX, RGB і HSL?

Усі три описують ті самі екранні кольори. HEX і RGB подають кількість червоного, зеленого та синього (у системі числення 16 або 10), а HSL використовує відтінок, насиченість і яскравість, що зручніше для налаштування чи створення палітр.