Палитра Терракота

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

:root {
  --color-1: #C96F4A;
  --color-2: #E09F7D;
  --color-3: #F2D5C4;
  --color-4: #8C4A32;
  --color-5: #5C3222;
}

Конфиг Tailwind

// tailwind.config.js
colors: {
  "terracotta-1": "#C96F4A",
  "terracotta-2": "#E09F7D",
  "terracotta-3": "#F2D5C4",
  "terracotta-4": "#8C4A32",
  "terracotta-5": "#5C3222",
}

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

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

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

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

#C96F4AПочти чёрный5.27:1AA

#E09F7DПочти чёрный8.48:1AA

#F2D5C4Почти чёрный13.58:1AA

#8C4A32Белый6.69:1AA

#5C3222Белый10.86:1AA

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

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

текст \\ фон	#C96F4A	#E09F7D	#F2D5C4	#8C4A32	#5C3222
#C96F4A	·	1.61Не проходит	2.58Не проходит	1.86Не проходит	3.03Только крупный
#E09F7D	1.61Не проходит	·	1.60Не проходит	3.00Только крупный	4.87AA
#F2D5C4	2.58Не проходит	1.60Не проходит	·	4.80AA	7.80AA
#8C4A32	1.86Не проходит	3.00Только крупный	4.80AA	·	1.62Не проходит
#5C3222	3.03Только крупный	4.87AA	7.80AA	1.62Не проходит	·

Ещё палитры

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

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

Румянец Персик Сияние