Оттенки
цвета
Из одного цвета — готовая шкала со ступенями от 50 до 950, как принято в интерфейсных системах. Для каждой ступени сразу видно контраст, а внизу три классических способа осветлить и затемнить цвет.
Точкой отмечена ступень, ближайшая к вашему цвету по светлоте. Для текста на белом фоне подходят ступени от 600 и темнее — там контраст переваливает за 4,5 : 1.
| Ступень | HEX | Контраст с белым | Текст |
|---|---|---|---|
| 50 | #F0F6FE | 1.09 : 1 | ✗ мало |
| 100 | #E2ECFE | 1.19 : 1 | ✗ мало |
| 200 | #BBD3FC | 1.52 : 1 | ✗ мало |
| 300 | #8FB7FA | 2.03 : 1 | ✗ мало |
| 400 | #5995F7 | 2.97 : 1 | ✗ мало |
| 500 | #2372F5 | 4.38 : 1 | только крупный |
| 600 | #0A5BE0 | 5.86 : 1 | ✓ подходит |
| 700 | #084BB9 | 7.73 : 1 | ✓ подходит |
| 800 | #073B92 | 10.25 : 1 | ✓ подходит |
| 900 | #052D70 | 13 : 1 | ✓ подходит |
| 950 | #031E49 | 16.33 : 1 | ✓ подходит |
:root {
--brand-50: #F0F6FE;
--brand-100: #E2ECFE;
--brand-200: #BBD3FC;
--brand-300: #8FB7FA;
--brand-400: #5995F7;
--brand-500: #2372F5;
--brand-600: #0A5BE0;
--brand-700: #084BB9;
--brand-800: #073B92;
--brand-900: #052D70;
--brand-950: #031E49;
}Классический tint: вместе со светлотой падает и насыщенность, оттенок становится пастельным.
Классический shade: цвет темнеет, сохраняя тон. Так получают состояния нажатия и тени.
Tone: тон и светлота почти не меняются, уходит только яркость. Полезно для второстепенных элементов.
Два способа осветлить, и они дают разное
Первый — смешать цвет с белым. Каждый канал подтягивается к 255, и вместе со светлотой падает насыщенность: цвет становится пастельным. Пурпурный #800080 при половинном смешивании даёт приглушённый #C080C0.
Второй — поднять светлоту в HSL, оставив тон и насыщенность. Тот же пурпурный превращается в кислотный #FF40FF. Разница огромная, и выбор зависит от задачи: для шкалы интерфейса нужен второй способ, чтобы цвет оставался узнаваемым на всех ступенях, а для мягких фонов и подложек — первый.
- Tint — примесь белого, оттенок бледнеет
- Shade — примесь чёрного, оттенок темнеет
- Tone — примесь серого, уходит только яркость
- Шкала 50–950 — светлота меняется, тон сохраняется
- Ступень 500 — обычно основной цвет системы