Палитра Корпоративный синий
CSS-переменные
:root {
--color-1: #03045E;
--color-2: #0077B6;
--color-3: #00B4D8;
--color-4: #90E0EF;
--color-5: #CAF0F8;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"corporate-blue-1": "#03045E",
"corporate-blue-2": "#0077B6",
"corporate-blue-3": "#00B4D8",
"corporate-blue-4": "#90E0EF",
"corporate-blue-5": "#CAF0F8",
}Об этой палитре
Палитра Корпоративный синий (Corporate Blue) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#03045EБелый17.75:1AAAa
#0077B6Белый4.87:1AAAa
#00B4D8Почти чёрный7.67:1AAAa
#90E0EFПочти чёрный12.68:1AAAa
#CAF0F8Почти чёрный15.59:1AAЭти цвета друг на друге
6 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #03045E | #0077B6 | #00B4D8 | #90E0EF | #CAF0F8 |
|---|---|---|---|---|---|
| #03045E | 3.65Только крупный | 7.20AA | 11.92AA | 14.65AA | |
| #0077B6 | 3.65Только крупный | 1.97Не проходит | 3.27Только крупный | 4.02Только крупный | |
| #00B4D8 | 7.20AA | 1.97Не проходит | 1.65Не проходит | 2.03Не проходит | |
| #90E0EF | 11.92AA | 3.27Только крупный | 1.65Не проходит | 1.23Не проходит | |
| #CAF0F8 | 14.65AA | 4.02Только крупный | 2.03Не проходит | 1.23Не проходит |
Ещё палитры