Конвертер цветов
Вставьте цвет в hex, rgb() или hsl() и получите все три формата плюс готовый ряд тонов и оттенков для вашей дизайн-системы.
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)Not a color we can read. Try #0071e3, rgb(0, 113, 227) or hsl(211, 100%, 45%).
The swatch row mixes the color with white (left) and black (right) at 20/40/60/80% — handy for hover states and dark-mode variants.
Инструмент полностью работает в вашем браузере. Данные не покидают устройство и не загружаются ни на один сервер.
Как пользоваться
- 1Вставьте цвет в любом из трёх форматов — hex, rgb() или hsl().
- 2Читайте конвертированные значения и копируйте нужное.
- 3Берите тона и оттенки из ряда образцов ниже.
Конвертер цветов
Скормите #0071e3, rgb(0, 113, 227) или hsl(211, 100%, 45%) — парсер сам определит формат и выдаст hex, RGB и HSL сразу, каждый с копированием в один клик.
Под значениями ряд тонов и оттенков смешивает ваш цвет с белым и чёрным шагами 20/40/60/80 %: мгновенные состояния наведения, рамки и варианты тёмной темы без открытия дизайн-инструмента.
Частые вопросы
Как HSL конвертируется в RGB?
Через стандартное цилиндрическое отображение: хроматичность c = (1 − |2L − 1|) × S, промежуточное значение x по сектору оттенка, затем каждый канал смещается на m = L − c/2. Формулы — учебниковые, поэтому результаты совпадают с дизайн-инструментами.
Почему код цвета помечается как неверный?
Принимаются формы #RGB / #RRGGBB, rgb(r, g, b) и hsl(h, s%, l%). Каналы должны быть в диапазоне (0–255 для RGB, 0–360 для оттенка, 0–100 % для остальных), а части разделяться запятой или пробелом.
Для чего нужны тона и оттенки?
Тона (смешение с белым) — для фонов наведения, бейджей и карточек; оттенки (смешение с чёрным) — для нажатых состояний, рамок и поверхностей тёмной темы. Вывод обоих из одного фирменного цвета держит все состояния интерфейса визуально едиными.
Похожие инструменты
Выбор цвета
Выберите цвет из образца или возьмите его прямо с экрана через EyeDropper API — hex, RGB и HSL копируются одним кликом.
Все инструменты →
Генератор QR-кодов
Превратите любой текст или URL в чёткий QR-код с настраиваемым размером, цветами и уровнем коррекции ошибок — скачайте как PNG или SVG.
Все инструменты →
Калькулятор пропорций
Задайте пропорцию вроде 16:9 и одну сторону — недостающая ширина или высота появится мгновенно, плюс пресеты от 1:1 до 21:9 для видео и дизайна.
Все инструменты →
Генератор UUID
Генерируйте случайные идентификаторы UUID v4 пачками одним кликом — от 1 до 500 за раз, на криптографической случайности вашего браузера. Бесплатно, мгновенно, работает офлайн.
Все инструменты →
Встроить этот инструмент
Одна строка — и инструмент на вашем сайте. Он работает в браузере посетителя.
<iframe src="https://zoyku.com/ru/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>