Палитра Монохром
CSS-переменные
:root {
--color-1: #212529;
--color-2: #495057;
--color-3: #ADB5BD;
--color-4: #DEE2E6;
--color-5: #F8F9FA;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"monochrome-1": "#212529",
"monochrome-2": "#495057",
"monochrome-3": "#ADB5BD",
"monochrome-4": "#DEE2E6",
"monochrome-5": "#F8F9FA",
}Об этой палитре
Палитра Монохром (Monochrome) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#212529Белый15.43:1AAAa
#495057Белый8.18:1AAAa
#ADB5BDПочти чёрный9.11:1AAAa
#DEE2E6Почти чёрный14.51:1AAAa
#F8F9FAПочти чёрный17.92:1AAЭти цвета друг на друге
10 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #212529 | #495057 | #ADB5BD | #DEE2E6 | #F8F9FA |
|---|---|---|---|---|---|
| #212529 | 1.89Не проходит | 7.43AA | 11.85AA | 14.63AA | |
| #495057 | 1.89Не проходит | 3.94Только крупный | 6.28AA | 7.76AA | |
| #ADB5BD | 7.43AA | 3.94Только крупный | 1.59Не проходит | 1.97Не проходит | |
| #DEE2E6 | 11.85AA | 6.28AA | 1.59Не проходит | 1.24Не проходит | |
| #F8F9FA | 14.63AA | 7.76AA | 1.97Не проходит | 1.24Не проходит |
Ещё палитры