Палитра Material
CSS-переменные
:root {
--color-1: #F44336;
--color-2: #2196F3;
--color-3: #4CAF50;
--color-4: #FFEB3B;
--color-5: #9C27B0;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"material-1": "#F44336",
"material-2": "#2196F3",
"material-3": "#4CAF50",
"material-4": "#FFEB3B",
"material-5": "#9C27B0",
}Об этой палитре
Палитра Material (Material) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#F44336Почти чёрный5.13:1AAAa
#2196F3Почти чёрный6.05:1AAAa
#4CAF50Почти чёрный6.80:1AAAa
#FFEB3BПочти чёрный15.47:1AAAa
#9C27B0Белый6.30:1AAЭти цвета друг на друге
2 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #F44336 | #2196F3 | #4CAF50 | #FFEB3B | #9C27B0 |
|---|---|---|---|---|---|
| #F44336 | 1.18Не проходит | 1.32Не проходит | 3.02Только крупный | 1.71Не проходит | |
| #2196F3 | 1.18Не проходит | 1.12Не проходит | 2.56Не проходит | 2.02Не проходит | |
| #4CAF50 | 1.32Не проходит | 1.12Не проходит | 2.28Не проходит | 2.27Не проходит | |
| #FFEB3B | 3.02Только крупный | 2.56Не проходит | 2.28Не проходит | 5.16AA | |
| #9C27B0 | 1.71Не проходит | 2.02Не проходит | 2.27Не проходит | 5.16AA |
Ещё палитры