Палитра Персиковый крем
CSS-переменные
:root {
--color-1: #FFCFB3;
--color-2: #FFE8D6;
--color-3: #FFB088;
--color-4: #E08A5F;
--color-5: #FFF8F2;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"peachy-cream-1": "#FFCFB3",
"peachy-cream-2": "#FFE8D6",
"peachy-cream-3": "#FFB088",
"peachy-cream-4": "#E08A5F",
"peachy-cream-5": "#FFF8F2",
}Об этой палитре
Палитра Персиковый крем (Peachy Cream) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FFCFB3Почти чёрный13.34:1AAAa
#FFE8D6Почти чёрный15.98:1AAAa
#FFB088Почти чёрный10.63:1AAAa
#E08A5FПочти чёрный7.17:1AAAa
#FFF8F2Почти чёрный17.96:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #FFCFB3 | #FFE8D6 | #FFB088 | #E08A5F | #FFF8F2 |
|---|---|---|---|---|---|
| #FFCFB3 | 1.20Не проходит | 1.25Не проходит | 1.86Не проходит | 1.35Не проходит | |
| #FFE8D6 | 1.20Не проходит | 1.50Не проходит | 2.23Не проходит | 1.12Не проходит | |
| #FFB088 | 1.25Не проходит | 1.50Не проходит | 1.48Не проходит | 1.69Не проходит | |
| #E08A5F | 1.86Не проходит | 2.23Не проходит | 1.48Не проходит | 2.50Не проходит | |
| #FFF8F2 | 1.35Не проходит | 1.12Не проходит | 1.69Не проходит | 2.50Не проходит |
Ещё палитры