Палитра цветов
Найдите точный код любого цвета в любом формате.
Проверка контраста
- AA
- AA крупный
- AAA
- AA
- AA крупный
- AAA
Работает в браузере. То, что вы вводите, никуда не отправляется.
- 5 форматов цвета
- Проверка контраста WCAG
- Поддержка прозрачности
Как выбрать цвет
- Двигайте по квадрату, чтобы задать насыщенность и яркость, затем передвиньте ползунок оттенка.
- Или введите код в любом формате: HEX, RGB, HSL, HSV или CMYK.
- Скопируйте нужный код и проверьте его контраст ниже.
Сравнение форматов цвета
Каждая строка ниже описывает один и тот же оранжевый цвет. Меняется только запись.
| Формат | Пример | Используется в |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, инструменты дизайна |
| RGB | rgb(240, 138, 60) | CSS, редакторы изображений |
| HSL | hsl(24, 84%, 59%) | CSS, проще всего настраивать на глаз |
| HSV/HSB | hsv(24, 75%, 94%) | Палитры в программах рисования и дизайна |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Дизайн для печати и смешивание красок |
Используйте HEX или RGB для веба, HSL, когда нужно подправить яркость или насыщенность цвета, не меняя его оттенок, а CMYK как отправную точку для печати.
Уровни контраста WCAG
Проверка контраста ниже сравнивает ваш цвет со сплошным белым и сплошным чёрным и оценивает оба варианта по уровням WCAG 2.
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Крупный текст означает примерно 24 пикселя или 19 пикселей жирным. Большинству сайтов достаточно пройти уровень AA. AAA задаёт более строгий порог, который в основном используют на государственных сайтах и сайтах, ориентированных на доступность.
Советы по выбору доступных цветов
- Оставьте оттенок неизменным и снизьте светлоту в HSL, чтобы получить более тёмный оттенок того же цвета для состояний hover и active.
- Цвет, который проходит AA на белом фоне, может не пройти на тонированном фоне, поэтому проверяйте контраст на реальном фоне страницы, а не только на белом или чёрном.
- Пипетка работает только в Chrome и Edge на компьютере. Firefox и Safari пока не добавили API EyeDropper.
- Получите цветопробу в типографии, прежде чем доверять значению CMYK для целого тиража. Одни и те же цифры могут выглядеть по-разному на мелованной и немелованной бумаге.
Частые вопросы о Палитра цветов
Как получить код цвета чего-либо на экране?
В Chrome и Edge на компьютере нажмите "Взять с экрана", затем щёлкните в любом месте экрана. Другие браузеры пока не поддерживают эту функцию, поэтому сделайте скриншот и откройте его в инструменте для выбора цвета из изображения.
В чём разница между HEX, RGB и HSL?
Они описывают один и тот же цвет по-разному. HEX и RGB задают количество красного, зелёного и синего (HEX записывает их в шестнадцатеричной системе), а HSL задаёт оттенок, насыщенность и светлоту, что удобнее настраивать вручную.
Какой коэффициент контраста нужен для читаемого текста?
Уровень WCAG AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного текста, то есть примерно 24 пикселя или 19 пикселей жирным. Уровень AAA повышает требование для обычного текста до 7:1.
Значения CMYK точные?
Это прямой математический пересчёт из RGB. Реальные цвета печати зависят от чернил, бумаги и профиля принтера, поэтому используйте их как отправную точку и проверяйте цветопробу.
Что меняет ползунок непрозрачности?
Он задаёт прозрачность от 0 (невидимо) до 100 (сплошной цвет). Ниже 100 код HEX получает два дополнительных символа, а RGB превращается в rgba(). Контраст проверяется для цвета таким, каким он выглядит на каждом фоне.
Чем HSV полезен там, где RGB не подходит?
HSV отделяет оттенок цвета от того, насколько ярким и насыщенным он выглядит, поэтому программы для рисования и фоторедакторы дают один ползунок для оттенка и другой для яркости, вместо того чтобы смешивать красный, зелёный и синий на глаз.
Можно получить цвет Pantone здесь?
Нет. Pantone это лицензированная система плашечных цветов, привязанная к конкретным чернилам, а не простой математический пересчёт из RGB или CMYK. Используйте значение CMYK как отправную точку и уточните точное соответствие в своей типографии.