Ви знайшли ідеальний колір у форматі HEX, але дизайнерський інструмент, що ви використовуєте, вимагає RGB. Або клієнт надіслав колір у RGB, а вам потрібне значення HSL для CSS. Конвертація кольорових форматів — щоденне завдання для дизайнерів та розробників. Наш Конвертер кольорів робить це миттєвим.
Що вам знадобиться
- Значення кольору в будь-якому форматі (HEX, RGB, HSL або інших)
- Веб-браузер (Chrome, Firefox, Safari або Edge)
- Акаунт або встановлення не потрібні
Покрокова інструкція
Введіть значення кольору
Відкрийте інструмент Конвертер кольорів. Введіть або вставте значення кольору в будь-якому підтримуваному форматі. Наприклад, введіть #3B82F6 як значення HEX, rgb(59, 130, 246) як RGB або hsl(217, 91%, 60%) як HSL. Інструмент автоматично розпізнає формат.
Перегляньте всі конвертації форматів
Інструмент миттєво відображає ваш колір у кожному підтримуваному форматі: HEX, RGB, HSL та інших. Ви бачите живий попередній перегляд кольору поряд з усіма його еквівалентними значеннями. Якщо потрібно налаштувати колір, використовуйте палітру кольорів для візуального уточнення.
Скопіюйте потрібний формат
Натисніть кнопку копіювання поряд з будь-яким форматом, щоб скопіювати значення в буфер обміну. Вставляйте безпосередньо у CSS-файл, дизайнерський інструмент або будь-де, де вам потрібно. Ніякого ручного перетворення не потрібно.
Корисно знати Конвертер кольорів повністю запускається у вашому браузері. Він працює в автономному режимі після завантаження та не потребує акаунта або встановлення.
Розуміння кольорових форматів
Різні інструменти та контексти використовують різні кольорові формати. Ось коли використовувати кожен:
HEX
Найбільш поширений формат у вебі. HEX-колір починається з # і слідують шість символів (літери та цифри), наприклад #FF5733.
- Використовується в: CSS, HTML, дизайнерських інструментах (Figma, Sketch, Photoshop)
- Формат:
#RRGGBB, де кожна пара — шістнадцяткове значення від 00 до FF - Приклад:
#3B82F6(середньо-синій)
RGB
Описує колір за допомогою компонентів Червоного, Зеленого та Синього, кожен у діапазоні від 0 до 255.
- Використовується в: CSS (функція
rgb()), мовах програмування, LED-освітленні - Формат:
rgb(red, green, blue) - Приклад:
rgb(59, 130, 246)
HSL
Описує колір за допомогою Відтінку (0-360 градусів на кольоровому колі), Насиченості (0-100%) та Світлості (0-100%).
- Використовується в: CSS (функція
hsl()), теорії кольору, дизайн-системах - Формат:
hsl(hue, saturation%, lightness%) - Приклад:
hsl(217, 91%, 60%)
Порада HSL — найінтуїтивніший формат для налаштування кольорів. Хочете більш світлий відтінок? Збільште значення світлості. Хочете більш приглушений тон? Зменшіть насиченість. Це робить HSL ідеальним для побудови кольорових систем та створення варіантів базового кольору.
Коли використовувати який формат
| Ситуація | Рекомендований формат |
|---|---|
| Написання CSS вручну | HEX (коротко і знайомо) або HSL (легко регулювати) |
| Специфікації дизайнерського інструмента | HEX (галузевий стандарт) |
| Динамічне маніпулювання кольором у коді | HSL (найлегший для програмного налаштування) |
| Передача кольорів клієнтам | HEX (найбільш загальновизнаний) |
| Друкарський дизайн | CMYK (окремо від екранних форматів) |
Вихід за рамки окремих кольорів
Після конвертації кольору ви можете дослідити пов'язані інструменти:
- Генератор градієнтів: Створюйте плавні CSS-градієнти з ваших кольорів. Введіть два або більше кольорів і отримайте готовий код градієнта для вставки у таблицю стилів.
- Генератор кольорових палітр: Генеруйте гармонійні кольорові палітри на основі початкового кольору. Автоматично отримуйте додаткові, аналогічні, тріадні та інші кольорові схеми.
Ці інструменти працюють у парі з Конвертером кольорів, допомагаючи побудувати повну кольорову систему для вашого проекту.
Важливо Кольори можуть виглядати по-різному на різних екранах через калібрування дисплея, кольорові профілі та налаштування яскравості. Коли точність кольору критична (брендинг, друкарський дизайн), завжди перевіряйте кольори на цільовому носії, а не лише на своєму екрані.
Часті запитання
Яка різниця між HEX та RGB?
Вони представляють одну й ту саму інформацію в різних нотаціях. HEX використовує шістнадцяткову (основа 16), а RGB — десяткову (основа 10) системи. #FF0000 та rgb(255, 0, 0) — обидва чистий червоний.
Чи можна конвертувати в CMYK для друку? Екранні кольорові формати (HEX, RGB, HSL) та друкарські формати (CMYK) — принципово різні кольорові моделі. Математична конвертація існує, але для точних кольорів друку слід використовувати професійний інструмент управління кольорами.
Як щодо прозорості (альфа)?
HEX підтримує альфа за допомогою двох додаткових символів (#3B82F680). RGB та HSL підтримують її як функції rgba() та hsla(). Конвертер кольорів також обробляє ці формати.
Наступні кроки
Після конвертації кольорів спробуйте Генератор градієнтів для створення гарних CSS-градієнтів або скористайтесь Генератором кольорових палітр для побудови повної кольорової схеми навколо обраного кольору.