Конвертер цветов Hex RGB HSL

Бесплатный конвертер цветов: HEX в RGB, RGB в HEX, а также HSL, HSV, CMYK и альфа. Живые ползунки, палитра цветов, EyeDropper, сохраненные образцы, гармонии, контрастность WCAG, предварительный просмотр для людей с дальтонизмом и экспорт кода, без регистрации, запускается локально.

Создан и поддерживается Shehzad Munir. ·

Конвертер цветов Hex RGB HSL
Loading Color Converter
Share

Мгновенное преобразование цветов во всех направлениях

Преобразуйте любой цвет между HEX, RGB, HSL, HSV/HSB и CMYK в любом направлении в момент ввода. Созданный для дизайнеров и разработчиков, он добавляет интерактивные ползунки RGB/HSL/альфа с динамическими дорожками градиента, палитру цветов, экранную пипетку, сохраненные и последние образцы, готовые цветовые гармонии, шкалу оттенка/тени, двухцветный микшер, предварительный просмотр при цветовой слепоте, живые проверки контрастности WCAG и готовые к копированию фрагменты кода для CSS, Tailwind, SCSS, Swift и Android, и все это в вашем браузере, ничего не загружается.

Конвертер цветов полезен только в том случае, если он воспроизводит все ваши обозначения. Этот инструмент преобразует HEX в RGB и обратно, а также объединяет HSL, HSV (также называемый HSB) и CMYK одновременно и в реальном времени. Введите HEX, например #3b82f6, и вы сразу получите его rgb(59, 130, 246), его hsl(217, 91%, 60%), его hsv(217, 97%, 96%) и его cmyk(76%, 47%, 0%, 4%). Измените любое отдельное поле, и остальные последуют за ним, чтобы вы могли рассуждать о модели, которая соответствует заданию: HEX для разметки, RGB для холста и градиентов, HSL/HSV для интуитивной настройки яркости и насыщенности и CMYK, когда дизайн отправляется на печать.

Функции

  • Двунаправленный HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK, с альфа-каналом
  • Интерактивные слайдеры RGB, HSL и альфа с динамическими дорожками градиента
  • Собственная палитра цветов + браузер EyeDropper
  • Недавняя история + сохраненные образцы (хранятся в вашем браузере)
  • Поддержка именованных цветов CSS (малиновый, бирюзовый, золотой…)
  • Гармонии, цветовая гамма + двухцветный смеситель
  • Предварительный просмотр цветовой слепоты (протанопия, дейтеранопия, тританопия)
  • Контрастные значки WCAG AA/AAA в реальном времени
  • Готовый к копированию экспорт для CSS, Tailwind, SCSS, Swift и Android

Как использовать Конвертер цветов Hex RGB HSL

  1. 1

    Выберите или введите цвет

    Используйте палитру цветов EyeDropper или введите значение HEX, rgb(), hsl(), hsv()/hsb(), cmyk() или имя цвета CSS, например «бирюзовый». Все остальные форматы обновляются мгновенно.

  2. 2

    Читать конверсии

    Поля HEX, RGB, HSL, HSV и CMYK остаются синхронизированными. Отредактируйте любой из них, а остальные пересчитаются в реальном времени, так что вы можете работать в любой записи, которую предпочитаете.

  3. 3

    Исследуйте палитры и гармонии

    Щелкните дополнительные, аналогичные, триадные или тетрадные образцы, пройдите по шкале яркости оттенка/оттенка или смешайте два цвета с помощью миксера, чтобы получить именно тот оттенок, который вам нужен.

  4. 4

    Скопируйте и проверьте контрастность

    Скопируйте любой формат одним щелчком мыши и прочтите значки WCAG AA/AAA, чтобы убедиться, что ваш цвет остается читаемым на белом или черном, прежде чем отправлять его.

Распространенные случаи использования

  • Преобразуйте HEX в RGB (или RGB в HEX) при написании CSS или JSX.
  • Переведите HEX бренда в HSL/HSV для тематики и альфа-настройки.
  • Превратите цвет в CMYK для рабочих процессов печати и допечатной подготовки.
  • Создавайте доступные палитры с мгновенной обратной связью WCAG по контрастности.
  • Создавайте дополнительные и аналогичные схемы пользовательского интерфейса и иллюстраций.
  • Возьмите цвет прямо с экрана с помощью пипетки.

Подробное руководство

От HEX до RGB, HSL, HSV и CMYK без математики

Внутри конвертер нормализует каждый входной сигнал до одной тройки RGB, а затем применяет стандартные формулы sRGB для получения других пространств, которые используют те же математические браузеры и инструменты дизайна, поэтому числа соответствуют тем, что вы видите в Figma, Photoshop или Chrome DevTools. Он также понимает сокращенный HEX (#fff), 8-значный HEX с буквой (#3b82f6aa), rgb()/rgba(), hsl()/hsla() и распространенные цвета с именами CSS, такие как малиновый, бирюзовый и золотой, поэтому вам никогда не придется запоминать формулы или переключать вкладки. В каждом формате есть кнопка копирования, а большой образец предварительного просмотра показывает ваш цвет на реальном фоне, так что вы можете сразу проверить его работоспособность.

Создавайте лучшие палитры с гармониями и наклонами.

Выбрать один цвет легко; Создание связной палитры — сложная часть. Конвертер генерирует цветовые гармонии на основе правил теории цвета: дополнительные (противоположные на круге), аналогичные (соседи), триадные и тетрадные (равномерно расположенные) в виде кликабельных образцов, которые вы можете добавить прямо в свой проект. График яркости меняется от почти черного к почти белому с одним и тем же оттенком и насыщенностью, предоставляя вам те оттенки и оттенки, которые дизайнеры используют, когда им нужны состояния наведения, границы и отключения. Двухцветный миксер позволяет смешивать любую пару цветов в выбранном соотношении для создания промежуточных тонов, а ряд точной настройки позволяет осветлять, затемнять, насыщать, обесцвечивать или поворачивать оттенок одним щелчком мыши.

Доступность и конфиденциальность встроены

Хороший цвет — читаемый цвет. Конвертер показывает коэффициент контрастности WCAG вашего цвета как по отношению к белому, так и по черному, а также отмечает соответствие стандартам AA (4,5:1) и AAA (7:1), поэтому вы можете распознавать низкоконтрастный текст до его отправки, что является естественным дополнением к специальной программе проверки контрастности. А поскольку все работает локально в вашем браузере, ваши цвета никогда не покидают ваше устройство: нет загрузки, нет учетной записи и нет отслеживания, что обеспечивает конфиденциальность работы бренда и клиента, а инструмент остается мгновенным.

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

Как преобразовать HEX в RGB?

Введите или вставьте шестнадцатеричное значение (например, #3b82f6 или #fff) в поле HEX или воспользуйтесь палитрой цветов. Значение RGB мгновенно появляется как rgb(r, g, b), и вы можете скопировать его одним щелчком мыши. Преобразование работает и в другую сторону: введите значение rgb(), и HEX обновится в реальном времени.

Могу ли я конвертировать в HSL, HSV и CMYK одновременно?

Да. Каждое поле: HEX, RGB, HSL, HSV/HSB и CMYK остается синхронизированным. Отредактируйте любой из них, и остальные немедленно пересчитаются, так что вы сможете прочитать все пять обозначений одного и того же цвета, не запуская отдельные инструменты.

В чем разница между HSL и HSV?

Оба описывают цвет по оттенку, но HSL (Яркость) и HSV/HSB (Значение/Яркость) моделируют насыщенность по-разному. HSL присваивает чистым цветам яркость 50 %, а HSV — 100 %, поэтому одинаковый процент может выглядеть светлее или темнее между ними. Этот инструмент показывает оба варианта, поэтому вы можете выбрать тот, который ожидает ваша платформа.

Как получить значение CMYK для печати?

Введите цвет в любом формате и прочитайте поле CMYK, например #3b82f6 станет cmyk(76%, 47%, 0%, 4%). CMYK — это субтрактивная модель, используемая принтерами, поэтому она удобна, когда цвет полотна необходимо подобрать в брошюре или упаковке.

Могу ли я выбрать цвет с экрана?

Да, в поддерживаемых браузерах (Chrome, Edge и других с API EyeDropper) кнопка «Выбрать» открывает экранную пипетку, с помощью которой вы можете выбрать любой пиксель, цвет из изображения, веб-сайта или рабочего стола и загрузить его прямо в конвертер.

Могу ли я настроить цвета с помощью ползунков и добавить прозрачность?

Да. Каждый из интерактивных ползунков R, G, B, H, S, L и альфа показывает живую дорожку градиента, поэтому вы можете точно настроить оттенок, перетаскивая или вводя точное значение. Альфа-слайдер выдает 8-значный HEX и вывод rgba()/hsla() для прозрачности.

Показывает ли он, как цвет выглядит для пользователей с дальтонизмом?

Да. Предварительный просмотр цветовой слепоты имитирует, как ваш цвет проявляется при протанопии, дейтеранопии, тританопии и полной ахроматопсии, поэтому вы можете убедиться, что палитра по-прежнему понятна примерно 1 из 12 мужчин и 1 из 200 женщин с дефицитом цветового зрения.

Могу ли я экспортировать цвет в виде CSS, Tailwind или кода приложения?

Да. Панель экспорта предоставляет готовые к копированию фрагменты для переменных CSS, rgb(), SCSS, записи конфигурации Tailwind, Swift UIColor, Android Color.parseColor и JSON, а также недавние и сохраненные образцы, хранящиеся локально в вашем браузере.

Является ли конвертер цветов бесплатным и конфиденциальным?

Да. Это совершенно бесплатно и без регистрации, а все преобразования происходят локально в вашем браузере. Ваши цвета никогда не загружаются на сервер, поэтому работа бренда и клиентов остается конфиденциальной.

Могу ли я преобразовать RGB или HEX в HSL и OKLCH?

Да. Он преобразует HEX, RGB(A), HSL и современный OKLCH, поэтому вы можете скопировать именно тот формат, который нужен вашему CSS или инструменту дизайна.

Справляется ли он с прозрачностью (RGBA/HEX с альфа-каналом)?

Да. Добавьте альфа-значение, и оно создаст RGBA и 8-значный шестнадцатеричный код, поэтому непрозрачность сохранится при копировании цвета в ваши стили.

Из журнала

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min