Как устроен цветовой движок

Вы выбираете один цвет - сервис не растягивает его на весь интерфейс, а строит вокруг него 4 самостоятельные, готовые к использованию палитры. Ниже - по какому принципу они собираются и что можно донастроить руками.

Один цвет - четыре разные палитры, а не оттенки одной

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

Цветовые гармонии: под каким углом подбирается компаньон

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

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

Почему OKLCH, а не HEX или HSL

Обычный HSL врёт про яркость: жёлтый и синий цвет с одинаковым значением lightness визуально выглядят по-разному. Из-за этого правило «сделай на 15% темнее» на одних цветах выглядит красиво, а на других - грязно. OKLCH устроен так, что светлота воспринимается глазом одинаково для любого оттенка, поэтому одна и та же формула работает предсказуемо на любом выбранном цвете - и в архетипах, и в подсказках.

Гарантированный контраст текста

Там, где выбранный цвет становится фоном, текст не подбирается вслепую: сервис считает, какой цвет - светлый или тёмный - даёт достаточный контраст именно с этим конкретным фоном, и использует его. Это тот же принцип, что лежит в основе проверки контраста по WCAG.

Тёмная и светлая тема - отдельный переключатель

Тема не выводится из светлоты выбранного цвета: тёмный основной цвет не обязан утаскивать интерфейс в тёмную полярность. За это отвечает отдельный тогл - он меняет направление светлоты фона и текста, не трогая ни сам цвет, ни выбранный архетип.

Точечная правка и «залипание»

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

Подсказки вокруг цвета

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