Вставте будь-яке значення HEX, RGB або HSL і отримайте миттєві переведення між усіма трьома форматами з живим зразком кольору, щоб ви могли точно бачити, з чим працюєте, ще до того, як додати його у код.
Завантаження калькулятора...
Цей інструмент вам допоміг?
Що таке Конвертер кольорів?
Кольоровий конвертер перетворює кольори між моделями кольорів HEX, RGB та HSL. Необхідний для веброзробників і дизайнерів, які працюють із CSS, інструментами дизайну та теорією кольору. Включає живий попередній перегляд кольору.
Коли використовувати цей калькулятор
Коли потрібно оцінити витрати на інструмент перед початком проекту
Коли порівнюєте результати з подібними інструментами
Коли вивчаєте, як використовувати інструмент у різних сценаріях
Коли ділитеся результатами з командою або клієнтами
Коли перевіряєте точність обчислень інструменту
Коли шукаєте швидкий і простий спосіб вирішення конкретної проблеми
Кроки:
Enter your input in the field above.
Configure any available options to customize the output.
View the results instantly with real-time updates.
Copy or export your results for use in your projects.
Формула
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)
Випадки використання
конвертуватиing CSS колір значенняs
Створення кольорових схем з базових кольорів
Підбір кольорів дизайн-системи
Розуміння кольорових відносин через HSL
Ключові переваги
Get accurate results instantly in your browser.
Save time with real-time calculations as you type.
No data leaves your device - complete privacy.
Free to use on any device, no sign-up required.
Поради
Use HSL for intuitive колір adjustments
Використовуйте HEX for CSS compatibility
Використовуйте попередній перегляд для перевірки кольору перед використанням
Зберігайте довідник поширених переведень кольорів
Поширені помилки
Забування префікса # для HEX-кольорів
Використання значень RGB вище 255 або нижче 0
Плутання діапазону відтінку HSL (0-360) з RGB (0-255)
Цей інструмент показує детальні результати на основі ваших вхідних даних. Уважно перегляньте кожен розділ, щоб зрозуміти, як інтерпретувати цифри та приймати на їх основі рішення.
Якщо у вас є запитання про те, як працює інструмент або як інтерпретувати певні результати, перегляньте розділ поширених запитань нижче або зверніться до служби підтримки.
Часті запитання
Яка різниця між HEX, RGB та HSL?
HEX — це шістнадцяткове представлення з 6 цифр (#FF0000). RGB визначає кольори як значення червоного/зеленого/синього (rgb(255, 0, 0)). HSL використовує відтінок, насиченість та яскравість (hsl(0, 100%, 50%)).
Який формат кольору мені використовувати?
HEX найпоширеніший у веб-розробці для простих кольорів. RGB забезпечує точний контроль над каналами кольору. HSL найінтуїтивніший для людей — регулюйте відтінок для різних кольорів, насиченість для інтенсивності та яскравість для освітлення.
Яка перевага HSL?
HSL більш зрозумілий для людей. Ви можете створювати кольорові схеми, зберігаючи S та L постійними, змінюючи H. Наприклад, hsl(0, 50%, 50%) = червоний, hsl(120, 50%, 50%) = зелений, hsl(240, 50%, 50%) = синій.
Що таке контрастність кольору і чому це важливо?
Контрастність кольору — це різниця в яскравості між текстом переднього плану та його фоном. Вища контрастність робить текст легшим для читання. Руківництва WCAG вимагають мінімальних співвідношень: 4,5:1 для звичайного тексту (AA) та 7:1 для покращеної читабельності (AAA).
Чи можна конвертувати CMYK в HEX або RGB?
CMYK (використовується у друку) не конвертується безпосередньо в RGB/HEX (використовується на екранах), оскільки вони використовують різні колірні охоплення. Конвертація залежить від вашого колірного профілю.
Що робить альфа-канал в RGBA?
Альфа-канал керує прозорістю, варіюючись від 0 (повністю прозорий) до 1 (повністю непрозорий). RGBA розширює RGB цим четвертим значенням.
Чому HEX і RGB іноді показують дещо різні кольори?
Вони не повинні — HEX і RGB представляють одні й ті ж значення кольорів, просто в різній нотації. #FF0000 дорівнює rgb(255, 0, 0). Якщо ви помічаєте різницю, це, ймовірно, через калібрування вашого монітора.
Як створити гармонійну кольорову палітру?
Використовуйте HSL для створення палітр: зберігайте насиченість (S) та яскравість (L) постійними, змінюючи відтінок (H) для доповнюючих кольорів. Для аналогічних кольорів змінюйте H на 30–60 градусів.
Яка різниця між sRGB та Display P3?
sRGB — стандартний колірний простір для веб-контенту. Display P3 (використовується пристроями Apple та сучасними моніторами) підтримує ширше охоплення, показуючи більш яскраві червоні та зелені кольори.
Як тестувати кольори для користувачів з дальтонізмом?
Використовуйте контрастність для забезпечення читабельності незалежно від сприйняття кольору. Висококонтрастні комбінації універсально читабельні. Уникайте покладатися лише на колір для передачі інформації.
Чому мої RGB-значення виглядають по-різному на екрані?
Різні монітори мають різні колірні профілі, яскравість та налаштування контрастності. Крім того, браузери можуть дещо по-різному відображати кольори. Для точного відповідності кольорів відкалібруйте монітор.
