Палитра Лаванда
CSS-переменные
:root {
--color-1: #E0AAFF;
--color-2: #C77DFF;
--color-3: #9D4EDD;
--color-4: #7B2CBF;
--color-5: #5A189A;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"lavender-1": "#E0AAFF",
"lavender-2": "#C77DFF",
"lavender-3": "#9D4EDD",
"lavender-4": "#7B2CBF",
"lavender-5": "#5A189A",
}Об этой палитре
Палитра Лаванда (Lavender) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#E0AAFFПочти чёрный10.22:1AAAa
#C77DFFПочти чёрный7.02:1AAAa
#9D4EDDБелый4.60:1AAAa
#7B2CBFБелый7.11:1AAAa
#5A189AБелый10.33:1AAЭти цвета друг на друге
2 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #E0AAFF | #C77DFF | #9D4EDD | #7B2CBF | #5A189A |
|---|---|---|---|---|---|
| #E0AAFF | 1.46Не проходит | 2.49Не проходит | 3.85Только крупный | 5.59AA | |
| #C77DFF | 1.46Не проходит | 1.71Не проходит | 2.64Не проходит | 3.84Только крупный | |
| #9D4EDD | 2.49Не проходит | 1.71Не проходит | 1.55Не проходит | 2.25Не проходит | |
| #7B2CBF | 3.85Только крупный | 2.64Не проходит | 1.55Не проходит | 1.45Не проходит | |
| #5A189A | 5.59AA | 3.84Только крупный | 2.25Не проходит | 1.45Не проходит |
Ещё палитры