Color Picker
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Выбор цвета и конвертация между форматами HEX, RGB, HSL. Палитра цветов с копированием CSS-значений
Контраст WCAG
Оттенки
Tailwind CSS
Гармонии
Конвертация цветов между форматами HEX, RGB и HSL.
Визуальный выбор цвета с помощью палитры. Изменение значения в любом формате автоматически пересчитывает остальные.
Можно скопировать значение цвета в любом из трёх форматов для использования в CSS, дизайне или разработке.
Color Picker онлайн — выбор цвета, гармонии, Tailwind CSS
Профессиональный инструмент для работы с цветом: конвертация между HEX, RGB, HSL, CMYK, подбор цветовых гармоний, проверка контрастности WCAG, поиск ближайшего Tailwind CSS класса и шкала оттенков. Всё в одном месте без установки дизайнерского ПО.
Цветовые модели и форматы
| Формат | Пример | Применение |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, веб-дизайн — самый распространённый |
| RGB | rgb(59, 130, 246) | CSS, Canvas API, фильтры изображений |
| HSL | hsl(217, 91%, 60%) | Программная манипуляция цветом, тематизация |
| CMYK | 76%, 47%, 0%, 4% | Печать, полиграфия |
HSL особенно удобен для программной работы с цветом: чтобы сделать цвет светлее — увеличьте L, темнее — уменьшите. Для генерации гармоничных оттенков меняйте H на фиксированный шаг.
Гармонии цветов
Цветовые гармонии — это наборы цветов, приятных глазу в сочетании. Наш инструмент автоматически вычисляет их для выбранного цвета:
- Комплементарный — противоположный на цветовом круге (сдвиг H на 180°). Максимальный контраст.
- Аналоговый — соседние цвета (сдвиг ±30°). Мягкое, гармоничное сочетание.
- Триадический — три цвета через 120°. Яркий, сбалансированный набор.
- Сплит-комплементарный — базовый + два соседних с комплементарным. Менее напряжённый, чем комплементарный.
Tailwind CSS — поиск ближайшего класса
Инструмент автоматически находит ближайший класс Tailwind CSS по евклидову расстоянию в пространстве RGB среди всех 242 стандартных цветов (22 семейства × 11 оттенков). Например, для #3B82F6 ближайший класс — bg-blue-500. Нажмите «Копировать» рядом с классом.
Контрастность WCAG
WCAG (Web Content Accessibility Guidelines) определяет минимальный коэффициент контрастности для читаемости текста. Наш инструмент показывает контрастность текущего цвета на белом и чёрном фоне. Для подбора доступной пары цветов используйте Контраст WCAG.
Часто задаваемые вопросы
Как перевести HEX в RGB?
HEX #3B82F6: R = 0x3B = 59, G = 0x82 = 130, B = 0xF6 = 246. Наш инструмент делает это автоматически при вводе любого формата.
Что такое шкала оттенков?
Шкала из 10 вариантов цвета от очень светлого (L=95%) до очень тёмного (L=5%) при сохранении исходного оттенка (H) и насыщенности (S). Удобно для создания UI с несколькими состояниями кнопок.
Чем HSL лучше RGB для дизайна?
HSL (Hue, Saturation, Lightness) интуитивно понятен: H — тон (0–360°), S — насыщенность, L — яркость. Легко предсказать, как изменится цвет при изменении компонента.
Как использовать CMYK для печати?
CMYK — субтрактивная модель для полиграфии. Конвертация RGB→CMYK приблизительна: точный результат зависит от цветового профиля печатного оборудования. Для точной полиграфии используйте профессиональное ПО.
Для проверки контрастности используйте Контраст WCAG, а для создания градиентов — CSS Gradient.
Полезные статьи
WCAG контрастность: доступность цветов в веб-дизайне
Как проверить контрастность цветов по стандарту WCAG 2.1. Уровни AA и AAA, формула расчёта, рекомендации.
CSS Border Radius: скругление углов элементов
Как использовать border-radius: синтаксис, сокращённая запись, эллиптические углы. Генератор border-radius онлайн.