Палитра Горчица

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

:root {
  --color-1: #E1AD01;
  --color-2: #F2C94C;
  --color-3: #F7E7B4;
  --color-4: #8C6A00;
  --color-5: #4A3800;
}

Конфиг Tailwind

// tailwind.config.js
colors: {
  "mustard-1": "#E1AD01",
  "mustard-2": "#F2C94C",
  "mustard-3": "#F7E7B4",
  "mustard-4": "#8C6A00",
  "mustard-5": "#4A3800",
}

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

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

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

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

#E1AD01Почти чёрный9.16:1AA

#F2C94CПочти чёрный11.91:1AA

#F7E7B4Почти чёрный15.33:1AA

#8C6A00Белый5.03:1AA

#4A3800Белый11.31:1AA

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

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

текст \\ фон	#E1AD01	#F2C94C	#F7E7B4	#8C6A00	#4A3800
#E1AD01	·	1.30Не проходит	1.67Не проходит	2.44Не проходит	5.48AA
#F2C94C	1.30Не проходит	·	1.29Не проходит	3.17Только крупный	7.13AA
#F7E7B4	1.67Не проходит	1.29Не проходит	·	4.08Только крупный	9.18AA
#8C6A00	2.44Не проходит	3.17Только крупный	4.08Только крупный	·	2.25Не проходит
#4A3800	5.48AA	7.13AA	9.18AA	2.25Не проходит	·

Ещё палитры

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

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

Цветовой круг Закат Персик