Цвета: конвертер HEX ↔ RGB и подбор палитры

Введите цвет в любом формате — #00DD11, rgb(0, 221, 17), hsl(125, 100%, 43%) или просто royalblue — и получите его во всех популярных форматах: HEX, RGB, HSL, HSV, CMYK, OKLCH, а также готовые коды для Android, SwiftUI и Flutter. Ниже — оттенки от 50 до 950, гармоничные палитры и проверка контраста текста. Любое значение копируется одним нажатием.

Что умеет инструмент

• Конвертер цветов. Понимает HEX (3, 4, 6 и 8 знаков), rgb(), hsl(), hsv(), cmyk(), названия цветов CSS, а также три числа через пробел — 30 144 255.
• Прозрачность. Ползунок меняет альфа-канал: получите #RRGGBBAA, rgb(… / 0.5) и ARGB для Android.
• Выбор цвета. Нажмите на большой образец — откроется системная палитра. В Chrome, Edge и Opera на компьютере есть кнопка «Пипетка»: берёт цвет с любого места экрана.
• Оттенки 50–950. Шкала светлее и темнее основного цвета, как в Tailwind CSS. Экспортируется одной кнопкой в CSS-переменные, SCSS, Tailwind или JSON.
• Гармонии. Комплементарная, аналоговая, триада, тетрада и другие схемы строятся автоматически.
• Контраст. Проверка читаемости текста на выбранном фоне по стандарту WCAG.
• Ссылка на цвет. Кнопка копирует адрес вида /cveta-hex-rgb/?color=1E90FF — удобно отправить коллеге. Нажмите пробел, чтобы получить случайный цвет.

Форматы цвета: HEX, RGB, HSL и другие

Все эти записи описывают один и тот же цвет #1E90FF — просто разными способами.

Как перевести HEX в RGB вручную

HEX — это три числа от 0 до 255, записанные в шестнадцатеричной системе: две цифры на красный, две на зелёный и две на синий. Разберём #00DD11:

Буквы означают числа: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. Короткая запись #0D1 — это то же самое, что #00DD11: каждая цифра повторяется дважды.

Обратно, из RGB в HEX, каждое число делят на 16: целая часть и остаток — это две цифры. Например, 221 = 13 × 16 + 13 → DD.

В коде это делается в одну строку:

// HEX → RGB
const hex = '#00DD11';
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16)); // 0, 221, 17

// RGB → HEX
const toHex = (r, g, b) => '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
toHex(0, 221, 17); // '#00dd11'

h = "00DD11"
r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4))   # 0 221 17
print(f"#{r:02X}{g:02X}{b:02X}")                       # #00DD11

[$r, $g, $b] = sscanf('#00DD11', '#%02x%02x%02x');  // 0, 221, 17
printf('#%02X%02X%02X', $r, $g, $b);                  // #00DD11

printf '#%02X%02X%02X\n' 0 221 17      # #00DD11
printf '%d %d %d\n' 0x00 0xDD 0x11      # 0 221 17

HSL и OKLCH: почему их любят дизайнеры

С HEX и RGB неудобно работать руками: чтобы сделать цвет чуть светлее, нужно менять все три числа. В HSL всё проще:

• H (hue) — тон, угол на цветовом круге от 0 до 360°: 0 — красный, 120 — зелёный, 240 — синий;
• S (saturation) — насыщенность в процентах;
• L (lightness) — светлота в процентах.

Хотите кнопку темнее при наведении — уменьшите только L:

.btn       { background: hsl(125 100% 43%); }
.btn:hover { background: hsl(125 100% 36%); }

У HSL есть недостаток: жёлтый и синий с одинаковой «светлотой» выглядят совсем по-разному. OKLCH это исправляет — его светлота совпадает с тем, как её видит человек. Поэтому палитры на OKLCH получаются ровнее, а цвета при изменении светлоты не «грязнеют». Формат поддерживают все современные браузеры:

:root {
  --brand: oklch(77.8% 0.262 142.8);
  --brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
}

Как подобрать палитру

Цветовые гармонии — это проверенные способы сочетать цвета по кругу оттенков:

• Комплементарная — два противоположных цвета. Максимальный контраст: подходит для акцентов и кнопок.
• Аналоговая — соседние оттенки. Спокойно и естественно, хорошо для фонов и иллюстраций.
• Триада — три цвета через 120°. Ярко, но нужна одна главная краска.
• Раздельно-комплементарная — мягче комплементарной, но всё ещё контрастная.
• Тетрада — четыре цвета. Богато, но легко перегрузить интерфейс.
• Монохромная — один тон разной светлоты. Самый безопасный вариант для сайтов.

Практические советы:

1. Правило 60-30-10. 60% — основной нейтральный цвет, 30% — дополнительный, 10% — акцент.
2. Один яркий цвет. Кнопки, ссылки и важные элементы — фирменным цветом, остальное — нейтральными оттенками.
3. Шкала оттенков. Возьмите основной цвет как 500, фоны — из 50–100, границы — из 200–300, текст на светлом фоне — из 700–900.
4. Тёмная тема. Не используйте чистый чёрный #000 — фон 900–950 из шкалы серого выглядит мягче, а яркие цвета стоит чуть приглушить.

Контраст текста и доступность

Чтобы текст было удобно читать всем, включая людей со слабым зрением, стандарт WCAG задаёт минимальный контраст между текстом и фоном:

Крупным считается текст от 24 px (18 pt) или от 18.66 px (14 pt) жирным начертанием. Контраст считается от 1 : 1 (одинаковые цвета) до 21 : 1 (чёрный на белом).

CMYK: почему цвет на экране и в печати отличается

Экран излучает свет и смешивает красный, зелёный и синий (RGB). Бумага отражает свет, и цвет получается смешением голубой, пурпурной, жёлтой и чёрной красок (CMYK). Многие яркие экранные цвета — особенно насыщенные зелёные и синие — напечатать невозможно.

Конвертер показывает CMYK по простой формуле, без цветового профиля. Для макета в типографию уточните профиль (например, ISO Coated или профиль конкретной типографии) и переведите цвета в графическом редакторе.

Как узнать цвет с экрана

• В этом конвертере — кнопка «Пипетка» в Chrome, Edge и Opera на компьютере.
• Windows — утилита Color Picker из Microsoft PowerToys: Win + Shift + C.
• macOS — встроенная программа «Цифровой колориметр» (Программы → Утилиты).
• Linux — приложение Eyedropper (Flathub) для GNOME, KColorChooser для KDE.
• Браузер — в инструментах разработчика (F12) нажмите на квадратик цвета в стилях — там есть пипетка.
• Figma — клавиша I.

Нужно оформить текст для соцсетей? Загляните в генератор красивых шрифтов и подборку эмодзи.

Частые вопросы

Как перевести HEX в RGB?

Вставьте HEX-код в поле конвертера — RGB появится сразу. Вручную: разбейте код на пары знаков и переведите каждую из шестнадцатеричной системы в десятичную, например DD = 13 × 16 + 13 = 221.

Чем HEX отличается от RGB?

Ничем, кроме записи. HEX — это те же три числа RGB от 0 до 255, записанные в шестнадцатеричной системе: rgb(255, 0, 0) и #FF0000 — один и тот же красный.

Что означают две последние цифры в восьмизначном HEX?

Это прозрачность (альфа-канал): FF — полностью непрозрачный цвет, 80 — примерно 50%, 00 — полностью прозрачный. В Android прозрачность пишется в начале: 0x80RRGGBB.

Какой контраст текста нужен для сайта?

По стандарту WCAG уровня AA — не меньше 4.5 : 1 для обычного текста и 3 : 1 для крупного. Для уровня AAA — 7 : 1 и 4.5 : 1.

Точный ли перевод в CMYK?

Приблизительный. Точный CMYK зависит от цветового профиля печати, бумаги и красок, поэтому для печатных макетов переводите цвета в графическом редакторе с профилем типографии.

Можно ли вводить названия цветов?

Да. Конвертер понимает все названия цветов CSS: red, gold, royalblue, teal и другие — всего их около 150.