Палитра Шалфей

CSS-переменные

:root {
  --color-1: #A3B18A;
  --color-2: #DAD7CD;
  --color-3: #588157;
  --color-4: #3A5A40;
  --color-5: #344E41;
}

Конфиг Tailwind

// tailwind.config.js
colors: {
  "sage-1": "#A3B18A",
  "sage-2": "#DAD7CD",
  "sage-3": "#588157",
  "sage-4": "#3A5A40",
  "sage-5": "#344E41",
}

Об этой палитре

Палитра Шалфей (Sage) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.

Читаемый текст на каждом цвете

Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.

#A3B18AПочти чёрный8.29:1AA

#DAD7CDПочти чёрный13.12:1AA

#588157Белый4.48:1Только крупный

#3A5A40Белый7.73:1AA

#344E41Белый9.08:1AA

Эти цвета друг на друге

4 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.

текст \\ фон	#A3B18A	#DAD7CD	#588157	#3A5A40	#344E41
#A3B18A	·	1.58Не проходит	1.96Не проходит	3.39Только крупный	3.98Только крупный
#DAD7CD	1.58Не проходит	·	3.11Только крупный	5.37AA	6.31AA
#588157	1.96Не проходит	3.11Только крупный	·	1.73Не проходит	2.03Не проходит
#3A5A40	3.39Только крупный	5.37AA	1.73Не проходит	·	1.17Не проходит
#344E41	3.98Только крупный	6.31AA	2.03Не проходит	1.17Не проходит	·

Ещё палитры

Смотрите также

Градиенты в той же гамме

Глубина Сталь Софит