#инструменты

Часть 2

Теперь посмотрим на инструменты от разработчиков известных дизайн-систем. Они сделали утилиты для себя и своих пользователей, но решили поделиться со всем сообществом. Поблагодарим их и пойдём подбирать идеальные цвета для своего проекта! Часть 1 тут

④ leonardocolor.io
набор опен-сорс инструментов от Adobe (Spectrum) для работы с цветовыми системами. Один из них, Adaptive color theme, помогает создать набор доступных цветовых палитр для пользовательского интерфейса. Настройка светлоты, контраста и насыщенности всей темы. Проверка по WCAG или APCA. Поддерживает 9 цветовых пространств. Для оценки результата и точной визуализации строит диаграммы цветов, яркости и даже 3D модель. Экспорт для Javascript, CSS и в формате JSON-токенов. Больше о возможностях приложения в вводной статье от автора (для просмотра нужен впн).

⑤ primer.style/prism
генератор от GitHub (Primer) для создания и поддержки целостных, согласованных и доступных цветовых палитр. С его помощью команда дизайн-системы Primer усовершенствовала свой воркфлоу генерации новых тем. Использует пространство HSLuv, что позволяет подбирать однородные палитры для разных цветов. Умеет настраивать кривые HSL сразу для нескольких цветовых шкал одновременно. Проверяет контраст полученных цветовых пар по WCAG. Результат можно экспортировать/импортировать в формате JSON. Статья о генераторе и воркфлоу в github.blog.

⑥ m3.material.io/theme-builder
генератор темы для нового Material 3. Из четырёх базовых цветов создаёт полный набор для темы со светлой и тёмной схемой. В дополнение к основной палитре может сгенерить палитры из дополнительных цветов. Больше настроек нет, всё жестко ограничено и подчинено алгоритму, работающему в собственном цветовом пространстве HCT. Экспорт для Android и Flutter, СSS-переменными и токенами в формате DSP. Дизайнеры могут вспользоваться плагином-генератором для Figma.