Палитра Карамель
CSS-переменные
:root {
--color-1: #FF85A2;
--color-2: #FFC2D1;
--color-3: #FCD5CE;
--color-4: #A9DEF9;
--color-5: #E4C1F9;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"candy-1": "#FF85A2",
"candy-2": "#FFC2D1",
"candy-3": "#FCD5CE",
"candy-4": "#A9DEF9",
"candy-5": "#E4C1F9",
}Об этой палитре
Палитра Карамель (Candy) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FF85A2Почти чёрный8.21:1AAAa
#FFC2D1Почти чёрный12.50:1AAAa
#FCD5CEПочти чёрный13.99:1AAAa
#A9DEF9Почти чёрный13.05:1AAAa
#E4C1F9Почти чёрный11.96:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #FF85A2 | #FFC2D1 | #FCD5CE | #A9DEF9 | #E4C1F9 |
|---|---|---|---|---|---|
| #FF85A2 | 1.52Не проходит | 1.70Не проходит | 1.59Не проходит | 1.46Не проходит | |
| #FFC2D1 | 1.52Не проходит | 1.12Не проходит | 1.04Не проходит | 1.04Не проходит | |
| #FCD5CE | 1.70Не проходит | 1.12Не проходит | 1.07Не проходит | 1.17Не проходит | |
| #A9DEF9 | 1.59Не проходит | 1.04Не проходит | 1.07Не проходит | 1.09Не проходит | |
| #E4C1F9 | 1.46Не проходит | 1.04Не проходит | 1.17Не проходит | 1.09Не проходит |
Ещё палитры