Color Picker — выбор цвета

Коды HEX, RGB, HSL. Готовые палитры (Tailwind, Material). Пипетка цвета из изображения. Гармоничные цвета и проверка контраста WCAG.

HEX #7D7DF5

RGB rgb(125, 125, 245)

HSL hsl(240, 86%, 72%)

ИМЯ Cornflower Blue

Недавние цвета

Здесь автоматически сохраняются ваши недавно выбранные цвета.

Гармоничные цвета

Комплементарные

Триада

Аналоговые

Контраст (WCAG)

ФОН

ТЕКСТ

3.21:1

Низкий контраст

AA · текст AA · крупный AAA · текст AAA · крупный

Нажмите на фон или текст, чтобы заменить его текущим цветом

Пипетка из изображения

Загрузите изображение

JPG, PNG, WEBP — нажмите или перетащите

Нажмите на изображение, чтобы взять цвет

Готовые палитры

Онлайн color picker — чем он полезен?

Color picker — незаменимый инструмент для дизайнера, frontend-разработчика и автора контента. Быстро получить цвет в форматах HEX, RGB, HSL, собрать палитру для своего бренда и взять цвет с изображения — всё это делается прямо в браузере с помощью этого сайта.

Готовые наборы палитр: Tailwind CSS, Material Design, Pastel, Vintage и Brand — каждый полезен в своей среде.

Что такое контраст WCAG?

WCAG (Web Content Accessibility Guidelines) — это стандарт, обеспечивающий доступность сайтов для пользователей с ограниченными возможностями зрения. Коэффициент контраста между текстом и фоном:

AA · текст — минимум 4.5:1 (для текста обычного размера)
AA · крупный — минимум 3:1 (текст 18pt или 14pt жирный)
AAA · текст — повышенный 7:1 (обычный текст)
AAA · крупный — повышенный 4.5:1 (крупный текст)

Что такое гармоничные цвета?

Чтобы несколько цветов смотрелись красиво вместе, между ними должна быть определённая связь:

Комплементарные — цвет, противоположный на цветовом круге на 180°. Сильный контраст.
Триада — 3 цвета с интервалом 120°. Естественный баланс.
Аналоговые — 3 близких друг к другу цвета. Мягкий вид.

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

Где используется код цвета?

HEX (#7D7DF5) — стандарт для дизайна и программирования frontend. RGB — в CSS и графических программах. HSL — для настройки насыщенности и светлоты цвета (темнее, светлее).

Как взять цвет с изображения?

Загрузите изображение в раздел «Пипетка из изображения» в правой части страницы. Затем нажмите в любом месте на изображении — будет взят точный цвет этой точки.

Где хранятся «Недавние цвета»?

Сохранённые цвета хранятся только в локальной памяти вашего браузера — они не отправляются в интернет. Нажатие на кнопку сохранения сохраняет цвет навсегда.

Что делает проверка контраста?

Она вычисляет коэффициент контраста между двумя цветами. На вашем сайте сочетание текста и фона должно быть достаточно различимым для пользователей со слабым зрением.

Зачем нужен случайный цвет?

Когда вы начинаете новый проект или ищете вдохновение. Начните со случайного цвета и создайте гармоничную палитру.