Конвертер кольору
Конвертуйте кольори між різними форматами: HEX, RGB, HSL та HSV. Незамінний для дизайнерів і розробників, яким потрібно працювати з кольорами на різних платформах і в різних дизайнерських інструментах. Миттєво конвертуйте будь-яке значення кольору у формат, потрібний для CSS, графічних програм або інших додатків.
Поширені запитання
HEX - шістнадцяткова система числення (наприклад, #FF5733), яка зазвичай використовується у веб-дизайні. RGB представляє кольори за допомогою значень червоного, зеленого та синього (0-255). HSL використовує відтінок (0-360°), насиченість (0-100%) і світлоту (0-100%), що робить його інтуїтивно зрозумілим для налаштування кольорів. HSV використовує відтінок, насиченість і значення (яскравість), популярні в графічних програмах. Кожен формат має свої переваги для різних випадків використання.
Використовуйте HSL, коли потрібно відрегулювати яскравість або насиченість кольору, зберігши відтінок незмінним. HSL більш інтуїтивно зрозумілий для створення колірних варіацій, відтінків і відтінків. Він чудово підходить для створення доступних колірних схем і адаптивного дизайну, де потрібно передбачувано регулювати яскравість. RGB краще, коли вам потрібен точний контроль над окремими колірними каналами.
Використовуйте інструменти розробника вашого браузера, щоб переглянути елемент і скопіювати значення кольору з CSS. Вставте його в наш конвертер у будь-якому форматі (HEX, RGB або HSL), і ми миттєво покажемо вам еквівалентні значення в усіх інших форматах. Ви також можете використовувати розширення для браузерів або інструменти для захоплення кольорів зі скріншотів.
Альфа-канал контролює прозорість зі значеннями від 0 (повністю прозорий) до 1 (повністю непрозорий). RGBA і HSLA включають це четверте значення для підтримки прозорих і напівпрозорих кольорів. Це важливо для накладання, тіней і багатошарових елементів дизайну в сучасному веб-дизайні.
Так! Сучасні браузери повністю підтримують кольорові формати HSL і HSLA в CSS. Використовуйте синтаксис: hsl(360, 100%, 50%) або hsla(360, 100%, 50%, 0.5) для кольорів з прозорістю. HSL особливо корисний в CSS для створення колірних варіацій за допомогою функції calc() або кастомних властивостей CSS для динамічних тем.
Тризначні HEX-коди (#RGB) - це скорочення, де кожна цифра подвоюється. Наприклад, #F00 еквівалентно #FF0000. Це скорочення працює лише тоді, коли обидві цифри кожного колірного каналу однакові. Використовуйте повний 6-значний формат (#RRGGBB) для точного керування кольором і для всіх кольорів, які не вписуються в шаблон скорочення.
RGB - це загальна концепція представлення кольорів за допомогою червоного, зеленого та синього кольорів. sRGB (стандартний RGB) - це специфічний колірний простір RGB, стандартизований для узгодженості між пристроями та веб-браузерами. Більшість веб-колірних схем використовують sRGB, тому кольори зазвичай виглядають однаково на різних екранах і в різних браузерах.
Після перетворення кольорів перевірте співвідношення контрастності для доступності тексту. WCAG вимагає контрастності 4,5:1 для звичайного тексту і 3:1 для великого тексту. При перетворенні між форматами значення кольорів залишаються незмінними, але наявність їх у різних форматах допомагає використовувати їх у різних інструментах дизайну, зберігаючи доступність.
Так! Дизайнерські програми, такі як Figma, Adobe XD або Photoshop, зазвичай відображають кольори у форматі RGB або HEX. Скопіюйте ці значення і перетворіть їх у формат, необхідний для вашого коду. Це забезпечить ідеальну відповідність кольорів між макетами дизайну та остаточною реалізацією.
Перетворення між форматами кольорів може передбачати округлення. HEX використовує цілі числа (0-255), RGB використовує цілі числа, а HSL/HSV використовує градуси та відсотки. При багаторазовому перетворенні туди і назад можуть виникати незначні відхилення через округлення. Для критично важливого узгодження кольорів працюйте в одному форматі послідовно.