Что такое Выбор цвета?

Выберите любой цвет визуально и получите его значения hex, RGB и HSL. Кликните или перетащите, чтобы найти нужный оттенок, и скопируйте код.

Перетаскивая внутри квадрата насыщенности/яркости меняешь тон, ползунком оттенка переключаешься между семействами цвета, а инструмент сразу выдаёт hex, RGB и HSL — копируешь одним кликом. Если вписать hex в поле, точка прыгает на нужное место — удобно подкручивать готовый цвет бренда, а не начинать с случайного оттенка.

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

1. Кликните по цветовой области или перетащите селектор, чтобы найти нужный цвет
2. Тонко настройте с помощью ползунка оттенка и контроля прозрачности
3. Скопируйте значение hex, RGB или HSL одним кликом

Когда использовать

• Подобрать акцентные цвета для CSS сайта, не открывая дизайнерские программы.
• Перевести hex из брендбука в HSL для дизайн-системы.
• Собрать небольшой набор соседних оттенков, переставляя ползунок оттенка.

Результат

Выберите тёплый оранжевый: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

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

Чем HSL отличается от HSB (HSV)?

HSL идёт от чёрного до белого через насыщенный цвет при 50% светлоты — удобно для симметричных тёмных и светлых тонов. HSB (используется в Photoshop) идёт от чёрного до насыщенного цвета при 100% яркости, что ближе к смешиванию красок.

Почему цвета на экране и в печати разные?

Экран работает в RGB (свет складывается), печать — в CMYK (краска вычитает). Особенно ярко-зелёные и электрик-синие в CMYK точного эквивалента не имеют. Перед утверждением обязательно делайте пробу на целевом носителе.

Hex-коды сразу соответствуют WCAG?

Нет — доступность определяется парой цветов, а не одним. Сочетайте hex переднего плана с hex фона и проверяйте контраст: не ниже 4,5:1 для основного текста и 3:1 для крупного.

Как взять цвет, который уже есть на экране?

Нажмите «Взять с экрана», и пипетка позволит снять цвет с любого пикселя на вашем экране — точный hex сразу загрузится в палитру, чтобы подправить насыщенность, яркость или прозрачность. (Кнопка пипетки появляется только там, где это поддерживается; иначе считайте hex измерителем цвета вашей системы — Digital Color Meter в macOS, PowerToys в Windows, Chrome DevTools — и вставьте его в поле ввода.)

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

Да. Под полосой оттенка есть ползунок прозрачности — альфа задаётся от 0 до 100%. За образцом видна шахматная подложка, чтобы уровень прозрачности был заметен сразу. Когда альфа становится меньше 100%, кнопки копирования RGB и HSL автоматически переключаются на rgba() и hsla().

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