Конвертер цветовых кодов

Конвертер цветов между кодами HEX, RGB, HSL и OKLCH, с расчётом коэффициента контраста WCAG для двух цветов. Проверяйте доступность прямо при подборе палитры, бесплатно.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Коррекция HSL

H217S91%L60%

Коэффициент контраста (WCAG)

Сравнить с цветом:

샘플 텍스트

Коэффициент контраста: 3.68:1

WCAG: AA Large

Встроить

<iframe src="https://devtools.patrache.studio/ru/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Конвертер цветовых кодов — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/ru/converters/color-converter/">Конвертер цветовых кодов</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Последнее обновление: 2026 · Бесплатный онлайн-инструмент

Что такое Конвертер цветовых кодов?

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

1
Введите цвет— Используйте палитру или текстовый ввод. Поддерживаются форматы HEX, rgb(), hsl().
2
Просмотрите форматы— Форматы HEX, RGB, HSL и OKLCH отображаются одновременно.
3
Скопируйте значения— Используйте кнопку копирования для каждого формата, чтобы скопировать CSS-значение.
4
Проверьте контрастность— Установите цвет для сравнения, чтобы проверить контрастность WCAG.

Связанные инструменты

Генератор CSS-градиентовВизуальный генератор CSS-градиентов: линейных, радиальных и конических. Добавляйте точки цвета, меняйте угол и копируйте готовый CSS для фонов и кнопок, бесплатно в браузере.

Генератор CSS box-shadowГенератор CSS box-shadow с настройкой смещения, размытия, растяжения, цвета и inset и живым предпросмотром тени. Скопируйте готовый CSS-код, бесплатно в браузере.

Справочник единиц CSSСправочник единиц CSS px, em, rem, %, vw, vh, vmin, vmax и ch, сгруппированных по категориям. С понятными пояснениями к каждой абсолютной и относительной единице, бесплатно.

Конвертер PX-REMКонвертер PX в REM, пересчитывающий пиксели и rem в обе стороны по настраиваемому корневому размеру шрифта, включая дробные значения. С таблицей и CSS-сниппетом для копирования.

Часто задаваемые вопросы

OKLCH — цилиндрическое представление цветового пространства Oklab, наиболее перцептивно однородного. Поддерживается в CSS Color Level 4.

Измеряет разницу яркости между текстом и фоном. AA требует не менее 4,5:1, AAA — 7:1.

В настоящее время поддерживаются только непрозрачные цвета (RGB, 6-значный HEX). RGBA и HSLA будут добавлены позже.

Да. Результат каждого формата можно вставить прямо в CSS.

Нет. Все преобразования цветов выполняются в браузере.