Выбор цвета и генератор палитр

Любой цвет на экране можно описать тремя способами, и этот инструмент держит их все синхронизированными: HEX — краткая запись, принятая в CSS и дизайнерских программах; RGB показывает, сколько красного, зелёного и синего света смешивается для получения цвета; HSL — тон, насыщенность, светлота — описывает цвет так, как о нём думает человек: какой это оттенок, насколько он яркий и насколько светлый или тёмный. Перетащите встроенный образец цвета, введите HEX-код или измените любое поле R/G/B или H/S/L — остальные поля обновятся мгновенно, и вы сможете переходить между привычными вам способами описания цвета, ничего не считая вручную.

Цветовой круг лежит в основе шести классических правил гармонии, и все они строятся автоматически от выбранного базового цвета. Комплементарная схема сочетает цвет с противоположным для максимального контраста; аналогичная берёт соседние цвета круга для спокойного, цельного вида; триадная и тетрадная равномерно размещают три или четыре цвета по кругу для живой, но сбалансированной палитры; раздельно-комплементарная смягчает комплементарную пару, используя два цвета рядом с противоположным вместо него самого; монохромная держится одного тона и меняет только светлоту — часто это самый надёжный выбор для интерфейса, которому нужен один фирменный цвет в нескольких оттенках.

Не каждая удачная палитра начинается с теории цвета — иногда хочется просто посмотреть, что получится. Генератор случайных палитр (нажмите пробел или «Создать») сразу выдаёт пять цветов, тон и светлота которых подобраны так, чтобы избежать «грязных» или слишком пастельных сочетаний. Нажмите на значок замка на понравившемся образце и создайте палитру снова: изменятся только незафиксированные цвета, поэтому палитру можно собирать постепенно, как в Coolors. Нажмите на образец, чтобы скопировать его HEX-код, или воспользуйтесь кнопками под палитрой, чтобы скопировать весь набор как пользовательские свойства CSS, переменные SCSS, фрагмент конфига Tailwind или массив JSON, либо экспортировать файл образцов Adobe .ase для Illustrator и Photoshop. Ещё можно извлечь палитру из любого изображения (обработка локальная, без загрузки) и сохранить понравившиеся палитры в браузере.

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