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