bringer.ru
ruen

Цвет · палитрыГенератор палитр

Введите один цвет — получите гармоничную палитру из пяти цветов, шкалу оттенков 50–900 и проверку читаемости текста. Экспорт в CSS, SCSS, Tailwind и JSON.

Всё считается в браузере — цвета не уходят на сервер
01Цвет и схема02Палитра03Шкала04Предпросмотр05Экспорт06О гармонии07Вопросы08Похожие
01

Базовый цвет и схема

палитра пересобирается на каждый ввод
Ввод · базовый цвет
Готовые базы
Схема гармонии
Результат · палитра
Базовый цвет#e4002b
hsl(349 100% 45%)
rgb(228 0 43)
Доступность палитры5 из 5 под текст
цветов, на которых обычный текст проходит порог 4,5:1
02

Палитра

пять цветов, первый — базовый
hsl(349 100% 45%)
белый текст
4,85 : 1
hsl(319 90% 57%)
тёмный текст
5,20 : 1
hsl(334 100% 45%)
белый текст
4,68 : 1
hsl(4 100% 45%)
белый текст
4,81 : 1
hsl(19 90% 33%)
белый текст
6,99 : 1
03

Шкала оттенков

десять ступеней одного тона

Насыщенность базового цвета на всех ступенях — шкала для основного цвета интерфейса.

04

Живой предпросмотр

палитра на интерфейсном блоке
Панель проектаОбзор · Задачи · Отчёты

Сводка за неделю

СоздатьНастроить

Текст набран цветом ступени 700 на фоне ступени 50 — той же парой, что уходит в экспорт.

Конверсия
4,8 %
Задачи
128
Ошибки
3
Роли цветов
Основной
кнопка главного действия
#e4002b
Светлая пара
фоны и подложки
#ffd1da
Тёмный
шапка и заголовки
#9e3708
Акцент
числа и выделения
#e40e00
Границы
рамки и разделители
#ffa8b9
05

Экспорт

значения те же, что показаны выше
:root {
  --color-base: #e4002b;
  --color-a: #f42db6;
  --color-b: #e40064;
  --color-c: #e40e00;
  --color-d: #9e3708;

  --color-base-50: #ffebee;
  --color-base-100: #ffd1da;
  --color-base-200: #ffa8b9;
  --color-base-300: #ff708b;
  --color-base-400: #ff385e;
  --color-base-500: #ff0534;
  --color-base-600: #d60028;
  --color-base-700: #ad0021;
  --color-base-800: #800018;
  --color-base-900: #52000f;
}
Код собран в браузере: ни цвет, ни палитра на сервер не отправляются.
06

О гармонии цвета

Гармония — это правило, по которому выбраны цвета: соседние тона, противоположные, равные доли круга. Правило не гарантирует, что палитра будет работать: цвета ещё должны различаться по светлоте и выдерживать текст. Поэтому рядом с каждым цветом здесь стоит его контраст.

Цветовой круг

Основа
0° … 360°
Тон (H) — положение на круге: 0° красный, 120° зелёный, 240° синий. Все схемы гармонии — это правила выбора точек на этом круге; насыщенность и светлота при этом меняются отдельно.

Аналоговая схема

Схема
±15° · ±30°
Соседние тона. Набор выходит спокойным и однородным — годится, когда цвет не должен спорить с контентом: сайты, документация, длинные тексты.

Комплементарная

Схема
+180°
Противоположный тон на круге. Максимальный цветовой контраст: основной цвет плюс акцент, который невозможно не заметить. Двумя такими цветами набирать текст не стоит — только выделять.

Триада и тетрада

Схема
+120° · +90°
Круг делится на три или четыре равные части. Набор яркий и сбалансированный, но управлять им сложнее: чем больше равноправных цветов, тем труднее выстроить иерархию.

Шкала оттенков

Ступени
50 … 900
Один тон с фиксированной светлотой по ступеням: 50 — почти белый фон, 900 — почти чёрный текст. Такая шкала принята в дизайн-системах, поэтому её удобно переносить в код без правок.

Контраст важнее тона

Доступность
4,5:1
Гармония ничего не говорит о читаемости. Текст на цвете проверяется по яркости: порог WCAG для обычного текста — 4,5:1. Красивая палитра, в которой ни на одном цвете нельзя писать, — это неготовая палитра.
07

Частые вопросы

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

Проверка контрастности

Те же формулы: проверить пару цветов на уровни AA и AAA
HEX

Конвертер цветов

HEX, RGB, HSL и 140 именованных цветов
QR

Генератор QR-кодов

Свои цвета кода с оценкой сканируемости
16

Системы счисления

HEX ↔ DEC — разобрать цвет по каналам
«» добавлен в избранное