Color Converter

Цвета в веб-разработке и дизайне могут быть заданы в разных форматах: HEX (#RRGGBB), RGB (Red, Green, Blue) и HSL (Hue, Saturation, Lightness). Данный инструмент мгновенно конвертирует цвет между всеми тремя форматами с визуальным превью.

Форматы цветов HEX — компактный шестнадцатеричный формат, наиболее распространённый в CSS. RGB задаёт цвет через интенсивность трёх каналов (красный, зелёный, синий) от 0 до 255. HSL описывает цвет через оттенок (0–360°), насыщенность и яркость (0–100%), что интуитивно понятнее при подборе гармоничных цветовых схем и вариаций одного оттенка.

Бесплатный онлайн-конвертер цветов между тремя основными форматами: HEX, RGB и HSL. Используйте встроенный визуальный пикер для удобного выбора цвета или введите значение вручную в любом из форматов — остальные обновятся автоматически. Большой блок превью в реальном времени показывает выбранный цвет.

HEX (#RRGGBB) — компактный шестнадцатеричный формат, наиболее распространённый в CSS и веб-дизайне. RGB (Red, Green, Blue) задаёт цвет через интенсивность трёх каналов от 0 до 255. HSL (Hue, Saturation, Lightness) описывает цвет через оттенок (0–360°), насыщенность и яркость (0–100%), что интуитивно понятнее для подбора гармоничных цветовых схем.

Каждое значение можно скопировать одним кликом в готовом CSS-формате: hex, rgb() или hsl(). Инструмент необходим веб-разработчикам, дизайнерам и всем, кто работает с цветом в цифровых проектах — от подбора палитры до отладки стилей.

Как пользоваться

  1. Выберите цвет в визуальном пикере или введите значение в любом формате: HEX (#1e90ff), RGB (30, 144, 255) или HSL (210°, 100%, 56%).
  2. Остальные форматы пересчитываются автоматически, а образец показывает цвет.
  3. Скопируйте нужную запись в готовом CSS-синтаксисе: hex, rgb() или hsl().

Когда пригодится

  • Вёрстка по макету: перевести цвет из Figma в HEX для CSS или получить HSL, чтобы сделать оттенок светлее, меняя только lightness.
  • Дизайн-системы: описать палитру через HSL, где цвета одной группы отличаются только насыщенностью и яркостью.
  • Печать и брендбук: сверить, что цвет на сайте соответствует значениям из фирменного стиля.

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

Когда лучше использовать HSL вместо HEX?

Когда цвета нужно осмысленно менять: HSL позволяет получить более светлый или тусклый вариант, изменив одну компоненту, а в HEX для этого пришлось бы пересчитывать все три канала.

Что такое короткая HEX-запись?

#fff и #1af — сокращения для #ffffff и #11aaff: каждая цифра удваивается. Конвертер понимает обе формы.

Поддерживается ли прозрачность?

Да, введите восьмизначный HEX (#1e90ff80) или rgba/hsla — альфа-канал сохранится во всех форматах.

Похожие инструменты