Выбор цвета и проверка контраста
Выберите цвет в палитре, на экране или на изображении и скопируйте его код HEX, RGB, HSL, CMYK или OKLCH. Затем проверьте, хорошо ли читается текст этого цвета, и получите светлые и тёмные оттенки и сочетающиеся цвета.
Бесплатно · Без регистрации
Как пользоваться
- Выберите цвет в палитре, введите или вставьте код либо откройте изображение и коснитесь нужного цвета.
- Уточните его ползунками тона, насыщенности, светлоты и непрозрачности.
- Скопируйте нужный код: HEX, RGB, HSL, HSV, CMYK или OKLCH.
- Укажите фон, чтобы проверить контраст по WCAG, и при плохой читаемости используйте предложенный цвет.
Почему стоит использовать этот инструмент
Пипетка для экрана и изображений
Используйте пипетку браузера, если она есть, или откройте фото или скриншот и коснитесь пикселя.
Все популярные форматы
HEX, RGB, HSL, HSV, CMYK и OKLCH с кнопкой копирования, а также ближайшее название цвета в CSS.
Проверка контраста по WCAG
Коэффициент контрастности и результат AA и AAA для обычного и крупного текста, значков и рамок.
Подсказка для исправления
Если текст не проходит, инструмент находит ближайший более светлый или тёмный вариант цвета, который проходит.
Оттенки и цветовые схемы
По девять светлых и тёмных оттенков, а также комплементарная, аналоговая, триада и квадрат.
Конфиденциально и бесплатно
Изображения читаются в браузере и никуда не загружаются. Без регистрации и ограничений.
Какие бывают коды цвета
Один и тот же цвет можно записать по-разному. Вот #3366CC, синий цвет из примера на этой странице, во всех форматах, которые показывает инструмент:
| Формат | Пример | Где используется |
|---|---|---|
| HEX | #3366CC | Веб-дизайн и CSS, брендбуки |
| RGB | rgb(51 102 204) | Экраны, CSS и большинство программ для дизайна |
| HSL | hsl(220 60% 50%) | CSS, ручная настройка светлоты и насыщенности |
| HSV (HSB) | hsv(220, 75%, 80%) | Палитры в Photoshop, Figma и похожих программах |
| CMYK | cmyk(75%, 50%, 0%, 20%) | Приблизительная отправная точка для печати |
| OKLCH | oklch(53.2% 0.168 262.3) | Современный CSS, палитры с равномерными шагами светлоты |
Как перевести HEX в RGB
Код HEX — это три пары шестнадцатеричных цифр для красного, зелёного и синего. Каждая пара — число от 00 до FF, то есть от 0 до 255 в десятичной системе. Чтобы перевести пару, умножьте первую цифру на 16 и прибавьте вторую; буквы от A до F означают числа от 10 до 15:
- Красный: 33 = 3 × 16 + 3 = 51.
- Зелёный: 66 = 6 × 16 + 6 = 102.
- Синий: CC = 12 × 16 + 12 = 204.
- Значит, #3366CC — это rgb(51 102 204). Короткий код вроде #36C удваивает каждую цифру и даёт тот же цвет. Восьмизначный код вроде #3366CC80 добавляет прозрачность: rgb(51 102 204 / 0.5).
Требования WCAG к контрасту
Руководство по доступности веб-контента (WCAG) измеряет контраст как отношение от 1:1 (контраста нет) до 21:1 (чёрное на белом). Оно считается как (L1 + 0,05) ÷ (L2 + 0,05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета. Минимальные значения:
| Уровень | Обычный текст | Крупный текст | Значки и рамки полей |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | – |
Популярные цвета на белом и чёрном фоне
Многие популярные цвета читаются хуже, чем кажется. Результаты для текста на белом и на чёрном фоне:
| Цвет | На белом | На чёрном |
|---|---|---|
| Красный #FF0000 | 3,99:1 (не соответствует AA) | 5,25:1 (соответствует AA) |
| Оранжевый #FFA500 | 1,97:1 (не соответствует AA) | 10,63:1 (соответствует AA) |
| Зелёный #008000 | 5,13:1 (соответствует AA) | 4,08:1 (не соответствует AA) |
| Синий #0000FF | 8,59:1 (соответствует AA) | 2,44:1 (не соответствует AA) |
| Серый #767676 | 4,54:1 (соответствует AA) | 4,62:1 (соответствует AA) |
| Серый #777777 | 4,47:1 (не соответствует AA) | 4,68:1 (соответствует AA) |
| Синий (пример) #3366CC | 5,36:1 (соответствует AA) | 3,91:1 (не соответствует AA) |
Как взять цвет с изображения или экрана
Чтобы узнать код цвета логотипа, фотографии или скриншота, нажмите «Взять с изображения» и коснитесь нужного места. Изображение отрисовывается в браузере и никуда не загружается.
- Мелкие детали сначала увеличьте: пиксель на краю буквы часто оказывается смесью двух цветов.
- На фотографиях есть шум и тени, поэтому коснитесь нескольких соседних точек и сравните коды.
- «Взять с экрана» использует пипетку браузера, которой нет в некоторых браузерах, в том числе в большинстве мобильных. Если кнопки нет, сделайте скриншот и откройте его через «Взять с изображения».
Частые вопросы
Как узнать HEX-код цвета на картинке?
Нажмите «Взять с изображения», откройте фото или скриншот и коснитесь цвета. Коды HEX, RGB и другие появятся сразу, у каждого есть кнопка копирования. Изображение остаётся на вашем устройстве.
Какой контраст нужен для текста?
Уровень AA в WCAG требует не менее 4,5:1 для обычного текста и 3:1 для крупного, то есть примерно от 24 px или от 18,7 px полужирным. Значкам и рамкам полей нужно 3:1. Уровень AAA повышает требования к тексту до 7:1 и 4,5:1.
HEX и RGB — это один и тот же цвет?
Да. Это два способа записать одни и те же значения красного, зелёного и синего. #3366CC и rgb(51 102 204) — абсолютно одинаковый цвет, используйте ту запись, которую ждёт ваша программа или код.
Есть ли в России стандарт доступности сайтов?
Да, ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме». Он действует с 1 апреля 2020 года и разработан на основе WCAG 2.1. Требования к контрасту в нём те же: не менее 4,5:1 для обычного текста и 3:1 для крупного (от 18 пунктов или от 14 пунктов полужирным).
Почему цвет CMYK при печати выглядит иначе?
Экран смешивает свет (RGB), а принтер — краску (CMYK), и не каждый яркий экранный цвет можно напечатать. Инструмент использует простую формулу без цветового профиля, поэтому точные значения для конкретной машины и бумаги уточните в типографии.
Что такое OKLCH?
OKLCH описывает цвет через светлоту, хрому (насыщенность) и тон по шкале, близкой к восприятию человека. Два цвета с одинаковой светлотой OKLCH выглядят примерно одинаково светлыми, поэтому так проще строить ровные палитры. Современные браузеры поддерживают oklch() в CSS.
Загружаются ли мои изображения или цвета?
Нет. Всё работает в вашем браузере. На этом устройстве сохраняются только недавние цвета и цвет фона, и их можно в любой момент очистить.
Как подобрать доступные цвета для сайта
Похожие инструменты
Нужно что-то создать?
Расскажите, что вы хотите построить.
Расскажите, что вам нужно создать: от простого сайта до полноценного приложения, AI-решения, автоматизации или индивидуальной системы.