Палитра Цитрусовый
CSS-переменные
:root {
--color-1: #FF6B35;
--color-2: #F7B801;
--color-3: #A1C349;
--color-4: #2E86AB;
--color-5: #FDF6EC;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"citrus-pop-1": "#FF6B35",
"citrus-pop-2": "#F7B801",
"citrus-pop-3": "#A1C349",
"citrus-pop-4": "#2E86AB",
"citrus-pop-5": "#FDF6EC",
}Об этой палитре
Палитра Цитрусовый (Citrus Pop) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FF6B35Почти чёрный6.66:1AAAa
#F7B801Почти чёрный10.63:1AAAa
#A1C349Почти чёрный9.37:1AAAa
#2E86ABПочти чёрный4.60:1AAAa
#FDF6ECПочти чёрный17.61:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #FF6B35 | #F7B801 | #A1C349 | #2E86AB | #FDF6EC |
|---|---|---|---|---|---|
| #FF6B35 | 1.59Не проходит | 1.41Не проходит | 1.45Не проходит | 2.64Не проходит | |
| #F7B801 | 1.59Не проходит | 1.13Не проходит | 2.31Не проходит | 1.66Не проходит | |
| #A1C349 | 1.41Не проходит | 1.13Не проходит | 2.04Не проходит | 1.88Не проходит | |
| #2E86AB | 1.45Не проходит | 2.31Не проходит | 2.04Не проходит | 3.83Только крупный | |
| #FDF6EC | 2.64Не проходит | 1.66Не проходит | 1.88Не проходит | 3.83Только крупный |
Ещё палитры