Онлайн цветовая студия

Конвертируйте, создавайте палитры, проверяйте контрастность. Все в одном месте.

Изменить цвет
#

Копировать CSS-код

Доступность и контрастность

Белый текст

Пример заголовка

Как этот текст читается на фоне?

4.5:1
AA ✔ AAA ✘
Черный текст

Пример заголовка

Как этот текст читается на фоне?

4.5:1
AA ✔ AAA ✘

Цветовые гармонии

Дополнительный

Триадный

Аналоговый

Тона и тени

Тона (Tints) К белому
Тени (Shades) К черному

Цветовые пространства и конверсии

Что такое CMYK?

Означает Cyan, Magenta, Yellow, Black (Key) (Голубой, Пурпурный, Желтый, Черный). В то время как экраны (RGB) излучают свет для создания цвета, принтеры (CMYK) используют чернила. Всегда проверяйте значения CMYK, если вы создаете макет для печати.

RGB против HEX

Технически они представляют одно и то же. HEX-код — это более короткое шестнадцатеричное представление значений RGB. Браузеры обрабатывают оба формата с одинаковой скоростью.

Доступность (Коэффициент контрастности)

Руководство по обеспечению доступности веб-контента (WCAG) требует определенного коэффициента контрастности между текстом и фоном.
Уровень AA: Коэффициент не менее 4.5:1 (для обычного текста).
Уровень AAA: Коэффициент не менее 7:1 (высокая читаемость).

Этот инструмент автоматически рассчитывает, что более читабельно — белый или черный текст — при размещении на выбранном цвете.

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

Что такое HEX-код?

Цветовой код HEX — это 6-значное шестнадцатеричное число, начинающееся с # и представляющее компоненты красного, зеленого и синего цветов.

В чем разница между RGB и HSL?

RGB определяет цвета как смесь красного, зеленого и синего света. HSL использует значения оттенка, насыщенности и яркости.

Почему важен цветовой контраст?

Хорошее соотношение контрастности улучшает читаемость текстов и соответствует стандартам веб-доступности (WCAG).

Инструменты (Другое)

Настройки файлов cookie

Мы используем файлы cookie и технологии LocalStorage, чтобы обеспечить вам лучший опыт, анализировать трафик сайта и сохранять ваши юридические согласия (загрузка файлов QR и т. д.).

Подробная информация