Палитра Ретро
CSS-переменные
:root {
--color-1: #264653;
--color-2: #2A9D8F;
--color-3: #E9C46A;
--color-4: #F4A261;
--color-5: #E76F51;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"retro-1": "#264653",
"retro-2": "#2A9D8F",
"retro-3": "#E9C46A",
"retro-4": "#F4A261",
"retro-5": "#E76F51",
}Об этой палитре
Палитра Ретро (Retro) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#264653Белый10.08:1AAAa
#2A9D8FПочти чёрный5.68:1AAAa
#E9C46AПочти чёрный11.31:1AAAa
#F4A261Почти чёрный9.17:1AAAa
#E76F51Почти чёрный6.11:1AAЭти цвета друг на друге
4 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #264653 | #2A9D8F | #E9C46A | #F4A261 | #E76F51 |
|---|---|---|---|---|---|
| #264653 | 3.03Только крупный | 6.03AA | 4.89AA | 3.26Только крупный | |
| #2A9D8F | 3.03Только крупный | 1.99Не проходит | 1.61Не проходит | 1.07Не проходит | |
| #E9C46A | 6.03AA | 1.99Не проходит | 1.23Не проходит | 1.85Не проходит | |
| #F4A261 | 4.89AA | 1.61Не проходит | 1.23Не проходит | 1.50Не проходит | |
| #E76F51 | 3.26Только крупный | 1.07Не проходит | 1.85Не проходит | 1.50Не проходит |
Ещё палитры