Палитра Тёплый серый
CSS-переменные
:root {
--color-1: #4A4441;
--color-2: #6E6660;
--color-3: #9C948C;
--color-4: #CFC8C1;
--color-5: #F3EFEB;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"warm-grey-1": "#4A4441",
"warm-grey-2": "#6E6660",
"warm-grey-3": "#9C948C",
"warm-grey-4": "#CFC8C1",
"warm-grey-5": "#F3EFEB",
}Об этой палитре
Палитра Тёплый серый (Warm Grey) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#4A4441Белый9.57:1AAAa
#6E6660Белый5.63:1AAAa
#9C948CПочти чёрный6.32:1AAAa
#CFC8C1Почти чёрный11.41:1AAAa
#F3EFEBПочти чёрный16.52:1AAЭти цвета друг на друге
6 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #4A4441 | #6E6660 | #9C948C | #CFC8C1 | #F3EFEB |
|---|---|---|---|---|---|
| #4A4441 | 1.70Не проходит | 3.20Только крупный | 5.78AA | 8.37AA | |
| #6E6660 | 1.70Не проходит | 1.88Не проходит | 3.40Только крупный | 4.92AA | |
| #9C948C | 3.20Только крупный | 1.88Не проходит | 1.80Не проходит | 2.61Не проходит | |
| #CFC8C1 | 5.78AA | 3.40Только крупный | 1.80Не проходит | 1.45Не проходит | |
| #F3EFEB | 8.37AA | 4.92AA | 2.61Не проходит | 1.45Не проходит |
Ещё палитры