Визуализатор палитр

Как работает визуализатор палитр — добавляйте, считывайте, переключайте.

Пять цветов, добавленных в три реальных интерфейса, с автоматически назначенными ролями.

1. 01

   Добавить

   Нажмите «Визуализировать» на любой общественной палитре или на доске палитр, чтобы загрузить её, или отредактируйте пять значений HEX вручную.

2. 02

   Чтение

   Движок назначает основные, второстепенные, акцентные цвета, цвета поверхности и текста по светлоте и хроме — посмотрите, где каждый из них отображается в каждом макете.

3. 03

   Переключение

   Переключайтесь между панелью управления, целевой страницей и мобильным приложением в реальном времени; нажмите на любой образец, чтобы заменить цвет на месте.

Часто задаваемые вопросы по визуализации палитр

Четыре вопроса, которые действительно задают люди о предпросмотре палитр.

Как назначаются роли?

По HSL: самый светлый становится поверхностью, самый тёмный — текстом; среди остальных самый насыщенный выступает как основной, а самый удалённый по оттенку — как акцент. Автоматическое назначение — это отправная точка, каждый образец остаётся редактируемым.

Являются ли макеты реальными компонентами?

Это шаблоны, отрисованные с помощью CSS, в реальных пропорциях — навигация, карточки статистики, диаграммы, кнопки и потоки карточек, а не иллюстрации.

Могу ли я загрузить свою общественную палитру?

Да. На страницах общественных палитр и на доске палитр есть пункт «Визуализировать», который загружает палитру по ссылке.

Будет ли отмечен низкий контраст текста?

Да. Когда контраст текста на поверхности ниже WCAG 4,5:1, в строке роли появляется значок, чтобы вы могли исправить это перед публикацией.

После получения результата

Продолжите отсюда и используйте цвета в работе.