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

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

Color Converter — це безкоштовний онлайн-конвертер кольорів із HEX у RGB та HSL для розробників і дизайнерів. Введіть колір у будь-якій нотації — HEX (#rrggbb або скорочена форма #rgb), RGB (наприклад, "255, 100, 0" чи "rgb(255 100 0)") або HSL (наприклад, "220, 91%, 64%") — і кожен інший формат миттєво оновиться поруч із великим живим зразком попереднього перегляду. Вбудований засіб вибору кольору дає змогу підібрати відтінок візуально, а кожне значення має кнопку копіювання одним кліком, тож він зручний щоразу, коли потрібно узгодити фірмові кольори або перенести значення кольору CSS між кодом та інструментами дизайну.

Як користуватися Конвертер кольорів

1. Введіть або вставте колір у поле HEX, RGB чи HSL або клацніть зразок засобу вибору кольору, щоб підібрати відтінок візуально.
2. Спостерігайте, як два інші поля та великий зразок попереднього перегляду миттєво оновлюються, відображаючи той самий колір.
3. Прочитайте плитки зведення R / G / B, H / S / L та HEX нижче, щоб побачити перетворені значення каналів.
4. Натисніть кнопку копіювання поруч із полем, щоб скопіювати його значення: HEX копіює рядок #rrggbb, а RGB та HSL копіюють готові до використання рядки rgb(...) і hsl(...).
5. Якщо значення відхилено, перевірте вбудовану помилку та введіть його заново у форматі, зазначеному в підказці поля.

Приклади

#ff6400

RGB 255, 100, 0 / HSL 24, 100%, 50%

#fff

HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%

Поширені запитання

Які формати кольорів підтримує цей конвертер?

Він перетворює між трьома форматами: HEX (повний #rrggbb та скорочена форма #rgb), RGB (0-255 на канал) і HSL (тон у градусах, насиченість і яскравість у відсотках). Наразі він не обробляє альфа/прозорість, HSV, CMYK або іменовані кольори CSS.

Чому мій колір показує помилку "Invalid HEX color", "Invalid RGB color" або "Invalid HSL color"?

Значення не відповідає очікуваному формату або виходить за межі діапазону. HEX має складатися з 3 або 6 шістнадцяткових цифр, канали RGB мають бути в діапазоні 0-255, а насиченість і яскравість HSL мають бути в діапазоні 0-100%. Введіть його заново, дотримуючись підказки під цим полем.

Чи можу я вставити повне значення CSS, наприклад rgb(255 100 0)?

Так. Поля RGB та HSL просто витягують числа з тексту, тож і "255, 100, 0", і "rgb(255 100 0)" працюють, а кнопки копіювання виводять готові до використання рядки rgb(...) і hsl(...).

Чи округлюються перетворені значення?

Так. Канали RGB та значення HSL округлюються до цілих чисел, тож перетворення туди й назад може відрізнятися від оригіналу на одну одиницю. Вивід HEX завжди містить дві цифри на канал (#rrggbb).

Чи завантажуються мої дані про колір кудись?

Ні. Усе перетворення виконується локально у вашому браузері за допомогою JavaScript — нічого не надсилається на сервер і жодні значення кольору не завантажуються, тож він працює приватно й навіть офлайн після завантаження сторінки.