Що таке Конвертер кольорів?
Конвертер кольорів — це незамінний інструмент для веб-розробників, графічних дизайнерів і всіх, хто працює з цифровими кольорами. Він забезпечує миттєву та точну конвертацію між трьома найбільш поширеними форматами кольорів: HEX (шістнадцятковий), RGB (червоний-зелений-синій) та HSL (відтінок-насиченість-яскравість). Нотація HEX записується як решітки, за якою йдуть шість шістнадцяткових цифр, наприклад #FF5733, і є стандартним форматом для CSS та веб-дизайну. Формат RGB, виражений як rgb(255, 87, 51), визначає кольори, вказуючи інтенсивність каналів. Формат HSL записується як hsl(11, 100%, 60%) і описує кольори за відтінком, насиченістю та яскравістю.
Коли використовувати цей калькулятор
- При конвертації специфікацій кольорів дизайнера.
- При створенні дизайн-системи.
- При створенні палітр кольорів за допомогою HSL.
- При перевірці контрастності кольорів для відповідності WCAG.
- При конвертації застарілих значень кольорів.
- При налагодженні проблем з кольорами CSS.
Кроки:
- Введіть значення кольору у будь-якому форматі.
- Виберіть формат введення.
- Перегляньте конвертовані значення.
- Скопіюйте результат.
- Перевірте значки контрастності WCAG.
Формула
HEX → RGB: розділити #RRGGBB на десяткові значення
RGB → HSL: нормалізувати RGB → знайти тон/насиченість/освітленість
HSL → RGB: перевести через формули хроматичності
HEX: #RRGGBB (0–255 кожне)
RGB: rgb(R, G, B) (0–255)
HSL: hsl(H°, S%, L%) (H: 0–360, S/L: 0–100)
Випадки використання
- Конвертація значень кольору CSS
- Створення кольорових схем з базових кольорів
- Підбір кольорів дизайн-системи
- Розуміння кольорових відносин через HSL
Ключові переваги
- Миттєва конвертація кольорів між форматами HEX, RGB та HSL
- Перегляд живого попереднього перегляду кольору
- Перевірка коефіцієнта контрастності WCAG з автоматичними значками
- Доступ до історії конвертацій
- Копіювання будь-якого формату одним кліком
- Повністю працює у браузері без передачі даних
Поради
- Використовуйте HSL для створення варіацій кольору.
- Завжди використовуйте HEX для CSS та HTML.
- Перевіряйте вибір кольору на відповідність вимогам контрастності WCAG.
- Визначайте базову палітру в HSL.
- Значення HEX нечутливі до регістру.
Поширені помилки
- Забути префікс # при введенні HEX-кольорів.
- Використовувати значення RGB вище 255 або нижче 0.
- Плутати діапазон відтінків HSL (0-360) з RGB (0-255).
- Припускати, що яскравість HSL та яскравість RGB еквівалентні.
Ключові терміни
- HEX: Шістнадцяткова нотація кольору, що використовується у CSS та веб-дизайні.
- RGB: Модель кольору червоний-зелений-синій.
- HSL: Модель кольору відтінок-насиченість-яскравість.
- Кольоровий простір: Математична модель для організації та представлення кольорів.
- Коефіцієнт контрастності WCAG: Числова міра різниці яскравості між текстом та фоном.
Пов'язані концепції
- Конвертер одиниць CSS: Конвертація між px, rem, em, vw та іншими одиницями CSS
- Base64 Encoder Decoder: Кодування та декодування рядків Base64
- Форматувальник JSON: Форматування та валідація даних JSON
- Тестер регулярних виразів: Тестування регулярних виразів на прикладі тексту
- Конвертер URL: Кодування та декодування URL-безпечних рядків
Приклад
введення: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). введення: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Інтерпретація результатів
Конвертер відображає ваш колір у всіх трьох форматах одночасно. HEX — найпоширеніший формат. RGB забезпечує прямий контроль над окремими каналами кольорів. HSL — найбільш інтуїтивно зрозумілий формат для людського сприйняття.