Палитра Королевский пурпур
CSS-переменные
:root {
--color-1: #2E1065;
--color-2: #5B21B6;
--color-3: #8B5CF6;
--color-4: #C4B5FD;
--color-5: #F5F3FF;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"royal-purple-1": "#2E1065",
"royal-purple-2": "#5B21B6",
"royal-purple-3": "#8B5CF6",
"royal-purple-4": "#C4B5FD",
"royal-purple-5": "#F5F3FF",
}Об этой палитре
Палитра Королевский пурпур (Royal Purple) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#2E1065Белый15.24:1AAAa
#5B21B6Белый8.98:1AAAa
#8B5CF6Почти чёрный4.46:1Только крупныйAa
#C4B5FDПочти чёрный10.23:1AAAa
#F5F3FFПочти чёрный17.23:1AAЭти цвета друг на друге
8 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #2E1065 | #5B21B6 | #8B5CF6 | #C4B5FD | #F5F3FF |
|---|---|---|---|---|---|
| #2E1065 | 1.70Не проходит | 3.60Только крупный | 8.25AA | 13.89AA | |
| #5B21B6 | 1.70Не проходит | 2.12Не проходит | 4.87AA | 8.19AA | |
| #8B5CF6 | 3.60Только крупный | 2.12Не проходит | 2.29Не проходит | 3.86Только крупный | |
| #C4B5FD | 8.25AA | 4.87AA | 2.29Не проходит | 1.68Не проходит | |
| #F5F3FF | 13.89AA | 8.19AA | 3.86Только крупный | 1.68Не проходит |
Ещё палитры