Палитра Пастель
CSS-переменные
:root {
--color-1: #F9C5D1;
--color-2: #A2E1DB;
--color-3: #FFE5A0;
--color-4: #C5A3FF;
--color-5: #B5EAD7;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"pastel-1": "#F9C5D1",
"pastel-2": "#A2E1DB",
"pastel-3": "#FFE5A0",
"pastel-4": "#C5A3FF",
"pastel-5": "#B5EAD7",
}Об этой палитре
Палитра Пастель (Pastel) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#F9C5D1Почти чёрный12.54:1AAAa
#A2E1DBПочти чёрный12.89:1AAAa
#FFE5A0Почти чёрный15.27:1AAAa
#C5A3FFПочти чёрный9.05:1AAAa
#B5EAD7Почти чёрный14.14:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #F9C5D1 | #A2E1DB | #FFE5A0 | #C5A3FF | #B5EAD7 |
|---|---|---|---|---|---|
| #F9C5D1 | 1.03Не проходит | 1.22Не проходит | 1.39Не проходит | 1.13Не проходит | |
| #A2E1DB | 1.03Не проходит | 1.18Не проходит | 1.42Не проходит | 1.10Не проходит | |
| #FFE5A0 | 1.22Не проходит | 1.18Не проходит | 1.69Не проходит | 1.08Не проходит | |
| #C5A3FF | 1.39Не проходит | 1.42Не проходит | 1.69Не проходит | 1.56Не проходит | |
| #B5EAD7 | 1.13Не проходит | 1.10Не проходит | 1.08Не проходит | 1.56Не проходит |
Ещё палитры