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

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

Конвертер кольорів перекладає значення кольорів між різними колірними моделями: 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 найширше підтримується.

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

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

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

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

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