Палитра Сакура
CSS-переменные
:root {
--color-1: #FFB7C5;
--color-2: #FFD9E1;
--color-3: #F78DA7;
--color-4: #C9184A;
--color-5: #FFF0F3;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"cherry-blossom-1": "#FFB7C5",
"cherry-blossom-2": "#FFD9E1",
"cherry-blossom-3": "#F78DA7",
"cherry-blossom-4": "#C9184A",
"cherry-blossom-5": "#FFF0F3",
}Об этой палитре
Палитра Сакура (Cherry Blossom) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FFB7C5Почти чёрный11.54:1AAAa
#FFD9E1Почти чёрный14.63:1AAAa
#F78DA7Почти чёрный8.39:1AAAa
#C9184AБелый5.66:1AAAa
#FFF0F3Почти чёрный17.10:1AAЭти цвета друг на друге
2 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #FFB7C5 | #FFD9E1 | #F78DA7 | #C9184A | #FFF0F3 |
|---|---|---|---|---|---|
| #FFB7C5 | 1.27Не проходит | 1.38Не проходит | 3.46Только крупный | 1.48Не проходит | |
| #FFD9E1 | 1.27Не проходит | 1.74Не проходит | 4.38Только крупный | 1.17Не проходит | |
| #F78DA7 | 1.38Не проходит | 1.74Не проходит | 2.51Не проходит | 2.04Не проходит | |
| #C9184A | 3.46Только крупный | 4.38Только крупный | 2.51Не проходит | 5.12AA | |
| #FFF0F3 | 1.48Не проходит | 1.17Не проходит | 2.04Не проходит | 5.12AA |
Ещё палитры