RevealTheme logo

Конвертер цвета (HEX/RGB/HSL)

Преобразует цвета между форматами HEX, RGB и HSL. Выберите цвет визуально или введите значения вручную.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

Как пользоваться этим инструментом

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

Что такое конвертер цвета (HEX/RGB/HSL)?

HEX, RGB и HSL — это три способа выразить один и тот же цвет. HEX (#RRGGBB) наиболее распространён в CSS и инструментах дизайна. RGB (rgb(R,G,B)) разделяет каналы численно. HSL (hsl(H,S%,L%)) более интуитивен для людей: тон (hue) — это цвет, насыщенность — это интенсивность, а светлота (lightness) — это яркость. Используйте HSL при разработке палитр; преобразуйте в HEX для реализации.

Типичные сценарии использования

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

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

Когда мне следует использовать HSL вместо HEX?
При проектировании: HSL позволяет независимо регулировать светлоту или насыщенность. Затем преобразуйте в HEX для кода.
А как насчёт OKLCH и современных цветовых пространств?
OKLCH перцептивно однороден и лучше подходит для доступности. Он поддерживается в CSS Color Level 4 (все современные браузеры).

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

Генератор CSS box-shadow

Визуально создавайте значения box-shadow в CSS. Предпросмотр в реальном времени и копирование сгенерированного CSS.

Генератор CSS-градиентов

Создавайте линейные и радиальные CSS-градиенты. Выбирайте цвета визуально и копируйте сгенерированный CSS.

Генератор кривых ускорения cubic-bezier

Создаёт кривые ускорения cubic-bezier для CSS. Включает стандартные предустановки.

Генератор цветовых палитр

Генерирует гармоничные цветовые палитры на основе любого базового цвета. Поддерживает комплементарные, аналоговые, триадические и монохроматические схемы.

Генератор CSS border-radius

Визуально создавайте сложные значения border-radius в CSS. Независимое управление каждым углом.

Генератор CSS clamp()

Генерирует плавные адаптивные значения CSS с помощью clamp(). Плавно масштабируется между минимальным и максимальным размерами в пределах диапазонов области просмотра.

Подпишитесь на обновления

Мы не продаем ваш адрес электронной почты. Мы не рассылаем спам.

© 2026 RevealTheme. All rights reserved.