PaletteDesk
Элементы

Ваша цветовая палитра на настоящих UI-компонентах

Кнопки, поля, бейджи и алерты во всех ключевых состояниях в цветах вашей палитры - с живой проверкой контраста WCAG для каждой пары цветов.

Чистая лаборатория компонентов - без контекста страницы, только настоящие контролы в ключевых состояниях, чтобы оценить палитру на том, с чем ей реально предстоит работать.

Контраст-саммари цветовой палитры

Всё проходит
  • 19.3:1AAAКонтраст 19.28:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 20.1:1AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.3:1AAAКонтраст 7.30:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.6:1AAAКонтраст 7.63:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 17.0:1AAAКонтраст 16.99:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 17.7:1AAAКонтраст 17.74:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 5.2:1AAКонтраст 5.17:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 4.8:1AAКонтраст 4.83:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 6.4:1AAКонтраст 6.36:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 16.9:1AAAКонтраст 16.90:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 13.8:1AAAКонтраст 13.83:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 16.3:1AAAКонтраст 16.25:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 5.6:1AAКонтраст 5.56:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 17.7:1AAAКонтраст 17.74:1Проходит AA и AAAWCAG AA требует минимум 3:1 для крупного текста и графических UI-элементов (бордеры, иконки); AAA - 4.5:1.
  • 17.0:1AAAКонтраст 16.99:1Проходит AA и AAAWCAG AA требует минимум 3:1 для крупного текста и графических UI-элементов (бордеры, иконки); AAA - 4.5:1.
  • 17.7:1AAAКонтраст 17.68:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.8:1AAAКонтраст 7.79:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.8:1AAAКонтраст 7.82:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 8.1:1AAAКонтраст 8.07:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 8.5:1AAAКонтраст 8.50:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.8:1AAAКонтраст 7.82:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 7.8:1AAAКонтраст 7.84:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 8.2:1AAAКонтраст 8.25:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
  • 8.7:1AAAКонтраст 8.67:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

Типографика

On background
headingBuild a clear color system
19.3:1 · AAAКонтраст 19.28:1Проходит AA и AAAКрупный текст (от 24px, или от 19px bold) по WCAG требует только 3:1 для AA; AAA - 4.5:1.
bodyPick one color and get four ready-to-use palettes for real interfaces.
19.3:1 · AAAКонтраст 19.28:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
secondarySecondary text supports the main content without competing for attention.
7.3:1 · AAAКонтраст 7.30:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
linkLearn how the color engine works
17.0:1 · AAAКонтраст 16.99:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
On surface
headingBuild a clear color system
20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAКрупный текст (от 24px, или от 19px bold) по WCAG требует только 3:1 для AA; AAA - 4.5:1.
bodyPick one color and get four ready-to-use palettes for real interfaces.
20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
secondarySecondary text supports the main content without competing for attention.
7.6:1 · AAAКонтраст 7.63:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
linkLearn how the color engine works
17.7:1 · AAAКонтраст 17.74:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
On surface · #FFFFFFBorder · #CECECF

Кнопки

PrimaryНа Accent · #FFFFFF5.2:1 · AAКонтраст 5.17:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
Наведение#2157CC6.4:1 · AAКонтраст 6.36:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Фокус
Отключено#9AB6F3
Secondary20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
Наведение#EBEBEC16.9:1 · AAAКонтраст 16.90:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Фокус
Отключено#FCFCFCБордер · #CECECF
Outline17.0:1 · AAAКонтраст 16.99:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
Наведение#E3E3E413.8:1 · AAAКонтраст 13.83:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Фокус
Отключено
Ghost7.3:1 · AAAКонтраст 7.30:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
Наведение#E6E7E716.3:1 · AAAКонтраст 16.25:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Фокус
Отключено
DestructiveНа Error · #FFFFFF4.8:1 · AAКонтраст 4.83:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
Наведение#CA23235.6:1 · AAКонтраст 5.56:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Фокус
Отключено#ED9B9A

Элементы форм

Email20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Обычное
В фокусе
Интерактивно
Отключено
Введите корректный email-адрес.Ошибка
Сообщение20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Роль20.1:1 · AAAКонтраст 20.13:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Чекбокс17.7:1 · AAAКонтраст 17.74:1Проходит AA и AAAWCAG AA требует минимум 3:1 для крупного текста и графических UI-элементов (бордеры, иконки); AAA - 4.5:1.
Радиокнопка17.7:1 · AAAКонтраст 17.74:1Проходит AA и AAAWCAG AA требует минимум 3:1 для крупного текста и графических UI-элементов (бордеры, иконки); AAA - 4.5:1.
Свитч17.0:1 · AAAКонтраст 16.99:1Проходит AA и AAAWCAG AA требует минимум 3:1 для крупного текста и графических UI-элементов (бордеры, иконки); AAA - 4.5:1.

Бейджи

Нейтральный17.7:1 · AAAКонтраст 17.68:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
PrimaryНа Accent · #FFFFFF5.2:1 · AAКонтраст 5.17:1Проходит AA, не проходит AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

Статусные бейджи и алерты

Success/warning/error/info - фиксированные цвета, не зависящие от вашей палитры - та же конвенция, что у shadcn/ui, Linear и Stripe: смысл статуса не должен смещаться вместе с цветом бренда. От палитры здесь зависит тонированный фон и окружающий текст - используйте это, чтобы проверить, как фиксированные статусные цвета читаются на вашем фоне, а не в ожидании, что они перекрасятся.

Успех7.8:1 · AAAКонтраст 7.79:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Внимание7.8:1 · AAAКонтраст 7.82:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Ошибка8.1:1 · AAAКонтраст 8.07:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Инфо8.5:1 · AAAКонтраст 8.50:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.
Оплата прошла успешно7.8:1 · AAAКонтраст 7.82:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

Счёт оплачен, чек отправлен на вашу почту.

Хранилище почти заполнено7.8:1 · AAAКонтраст 7.84:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

Использовано 92% доступного места.

Не удалось сохранить8.2:1 · AAAКонтраст 8.25:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

Не получилось сохранить изменения. Попробуйте ещё раз.

Доступна новая функция8.7:1 · AAAКонтраст 8.67:1Проходит AA и AAAWCAG AA требует минимум 4.5:1 для обычного текста; AAA - 7:1.

В настройках рабочего пространства теперь можно настроить темы.

Зачем проверять палитру на компонентах, а не только на плашках цвета

Палитра может выглядеть сбалансированной в виде ряда плашек и всё равно разваливаться на элементах, с которыми люди реально взаимодействуют: подпись кнопки тонет в заливке, плейсхолдер слишком бледный, а выключенное состояние не отличается от обычного. Компоненты ломаются именно в состояниях - обычное, hover, focus, disabled - и в каждом ваши цвета работают немного по-разному.

Elements показывает типографику, кнопки, поля форм, бейджи и статусные алерты в этих состояниях на вашей текущей палитре в двух видах: Lab - изолированная таблица состояний, и Mockup - те же компоненты в небольшом макете страницы. Каждая пара цветов текста и границ сразу проверяется по WCAG, а для провальных цветов предлагается исправление.

Хотите увидеть палитру на макетах целых страниц? Откройте Explore Нужно проверить одну конкретную пару цветов? Воспользуйтесь проверкой контраста Нужно подробное руководство по сводке контраста и исправлениям? Прочитайте статью про Elements

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

Что показывает режим Elements?

Лабораторию компонентов для вашей палитры: типографику, кнопки, поля форм, бейджи и статусные алерты как настоящие UI-контролы в ваших текущих цветах, без макета страницы вокруг - так вы оцениваете палитру на том, что ей действительно предстоит красить.

Какие состояния компонентов здесь показаны?

Интерактивные компоненты показаны в ключевых состояниях - обычное, hover, focus и disabled. В каждом состоянии ваши цвета смешиваются немного по-разному, поэтому слабый контраст обычно проявляется здесь раньше, чем на целой странице.

Как работает проверка контраста?

Каждая пара цветов текста, границ и иконок измеряется по правилам WCAG: для уровня AA нужно не меньше 4.5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса вроде границ, а для AAA - 7:1 для обычного текста. Провальные пары отмечаются прямо на компоненте, а сводка перечисляет их все.

Можно ли исправить цвет, не проходящий проверку, прямо здесь?

Да. Если пара цветов не проходит проверку, можно применить предложенное исправление. Цвет, который используется по всей палитре, меняется везде, где он встречается, а исправление для одного элемента затрагивает только этот элемент - так контраст можно починить, не пересобирая палитру.

Чем отличаются Lab и Mockup?

Lab - изолированная таблица компонентов и их состояний, удобная для проверки деталей по одной. Mockup помещает те же компоненты в небольшой макет страницы, чтобы видеть, как они сочетаются друг с другом в контексте.

Подстраиваются ли цвета success, warning и error под мою палитру?

Нет. Статусные цвета намеренно зафиксированы, чтобы зелёный, жёлтый и красный сохраняли смысл; под палитру подстраивается только тонировка и фон вокруг них. Поэтому алерт может не пройти проверку контраста на необычной палитре, хотя сам статусный цвет остаётся прежним.

Экспорт