Генератор цветовых палитр
Начните с одного цвета и получите подходящие палитры: для каждого образца показаны значения HEX и RGB и контраст с белым и чёрным.
Работает полностью в браузере
Случайная палитра
Пять цветов от генератора случайных чисел вашего браузера. Заблокируйте те, что хотите оставить, и выберите заново. Нажмите пробел, чтобы выбрать заново, когда фокус не в текстовом поле.
Экспорт
Палитры строятся в цветовом пространстве OKLCH и показываются как HEX в sRGB, поэтому цвета, слишком яркие для экрана, ослабляются по насыщенности. Значения контраста считаются по формуле WCAG 2, которая учитывает только контраст по яркости.
Как составить цветовую палитру
- Выберите базовый цвет палитрой или введите значение, например
#1636a3илиf60, в поле HEX. - Посмотрите гармонические палитры под ним. Для каждого образца показаны HEX, RGB и то, проходит ли чёрный или белый текст на нём уровни WCAG AA или AAA.
- Выберите палитру в разделе Экспорт и скопируйте или скачайте её как пользовательские свойства CSS, массив JSON или простой список. Для поиска идей используйте Случайную палитру и кнопки блокировки.
Как строятся гармонии
Цветовая гармония — это набор цветов, тона которых лежат под фиксированными углами на цветовом круге. Аналоговые цвета — соседние, с разницей в 30 градусов. Комплементарный цвет находится на расстоянии 180 градусов, пара раздельно-комплементарных — на 150 и 210 градусов, триада разнесена на 120 градусов, а тетрада использует четыре тона через 90 градусов. Монохромная палитра сохраняет тон и меняет светлоту от бледных оттенков к тёмным.
Здесь используется круг OKLCH, цилиндрическая форма пространства OKLab Бьорна Оттоссона. Перевод идёт из sRGB в линейный свет, затем через матрицы OKLab и обратно с проверкой попадания в гамму. Если повёрнутый цвет выходит за пределы того, что может показать sRGB, его насыщенность уменьшается небольшими шагами, пока он не поместится, так что выбранные вами светлота и тон сохраняются.
Контраст указывается для каждого образца и с белым, и с чёрным, потому что первый вопрос о цвете палитры обычно в том, какой текст на нём можно разместить. Коэффициент и обозначение AA или AAA всегда записаны словами, так что информация не зависит от способности различать цвета.
Советы
- Нужен тот же цвет в HSL, CMYK или с названием CSS? Используйте «Конвертер цветов и проверка контрастности».
- Превратите два цвета палитры в фон с помощью «Генератора CSS-градиентов».
- Хотите взять цвет с фотографии, а не с круга? Попробуйте «Определить цвет на изображении».
Вопросы и ответы
Почему OKLCH, а не HSL?
В HSL жёлтый и синий с одинаковым значением светлоты выглядят очень по-разному по яркости. OKLCH устроен так, что равные шаги светлоты выглядят равными, и образцы палитры получаются одинаковыми по весу. Для гармоний используется угол тона, поэтому комплементарный цвет лежит в 180 градусах от базового в OKLCH, а не в HSL.
Что происходит, если цвет нельзя показать на экране?
При повороте тона с сохранением светлоты и насыщенности цвет иногда выходит за диапазон sRGB, который способен показать обычный дисплей. Тогда инструмент снижает насыщенность, сохраняя светлоту и тон, пока цвет не поместится. Поэтому повёрнутый образец может выглядеть чуть менее ярким, чем базовый.
Что означают метки AA и AAA?
Они показывают коэффициент контрастности WCAG 2 белого или чёрного текста на этом образце. Коэффициент 4,5 и выше — это AA для обычного текста, 7 и выше — AAA, а от 3 до 4,5 — AA только для крупного текста. Образец, не проходящий ни с чёрным, ни с белым, плохо подходит как фон для текста.
Как работает случайная палитра?
Пять цветов выбираются с помощью криптостойкого генератора случайных чисел браузера: тона распределяются по кругу, а светлота и насыщенность случайны в диапазоне, исключающем почти чёрный и почти белый. Заблокируйте образец, чтобы сохранить его, затем нажмите «Случайная палитра» или пробел, чтобы заменить остальные.
Какой формат экспорта выбрать?
Пользовательские свойства CSS вставляются прямо в блок :root таблицы стилей. Массив JSON подходит для дизайн-токенов или скриптов, а простой список — по одному HEX на строку — для инструментов, принимающих вставленные цвета. Во всех трёх используются показанные значения HEX.
Принимает ли он сокращённый HEX и заглавные буквы?
Да. Читаются и #abc, и abc, и #AABBCC, и aabbcc. Значения с альфа-парой, например из восьми цифр, здесь не принимаются: сначала уберите альфа-канал в «Конвертере цветов и проверке контрастности».