спектр Найти сочетание ↗

НЕБОЛЬШАЯ ЛАБОРАТОРИЯ ЦВЕТА

Цвет меняет
всё вокруг.

Найдите сочетание для следующей идеи.
Сохраните понравившееся, проверьте контраст
и заберите палитру с собой.

ПАЛИТРА 01 / С ЧЕГО-ТО НАЧАТЬПЯТЬ ЦВЕТОВ. БЕСКОНЕЧНОСТЬ СОЧЕТАНИЙ.
01
02
03
04
05

01 / НЕ ТОЛЬКО КРАСИВО

Текст должен
хорошо читаться.

Сравните два цвета палитры. Коэффициент считается по относительной яркости sRGB; он помогает оценить читаемость текста.

1.00: 1
контрастность
Обычный текст AAКрупный текст AAОбычный текст AAA
ПРЕДПРОСМОТР СОЧЕТАНИЯ

Слова
имеют цвет.

Хорошее сочетание не заставляет всматриваться. Проверьте, насколько легко читать этот небольшой абзац.

СПЕКТР / Аа

02 / ПАРА ОТПРАВНЫХ ТОЧЕК

Пусть цвета
работают вместе.

Палитра — это набор возможностей.
Иерархию создаёт то, как вы её используете.

Выберите главный

Один цвет задаёт основу. Дайте ему достаточно пространства, а остальным — понятную роль.

Оставьте акцент

Самый заметный цвет пригодится там, где нужно внимание: в кнопке, детали или короткой подписи.

Проверьте в контексте

Большая заливка, маленький текст и тонкая линия воспринимаются по-разному. Смотрите на реальные размеры.

Полезно знать

Немного
точности.

Что значит закрепить цвет?

Кружок в углу фиксирует цвет. При генерации остальные меняются, а закреплённый остаётся. Чтобы изменить его вручную, нажмите на маленький цветовой образец.

Какие пороги использует проверка контраста?

WCAG 2.2: минимум 4,5:1 для обычного текста уровня AA и 3:1 для крупного. Для обычного текста уровня AAA — 7:1. Крупный текст: от 24 CSS-пикселей либо примерно от 18,7 при полужирном начертании. Общая доступность страницы одной этой проверкой не определяется.

Как поделиться сочетанием?

Кнопка «Ссылка на палитру» записывает цвета в адрес страницы и копирует его. На другом устройстве откройте ссылку на том же доступном сайте. Фрагмент с цветами обрабатывается браузером.

Куда сохраняются мои цвета?

В локальное хранилище браузера. CSS-файл можно скачать отдельно. Генерация не обращается к внешним сервисам.

Пусть идея обретёт цвет.

Найти сочетание