Палитра Коралловый риф

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

:root {
  --color-1: #FF6F61;
  --color-2: #FF9F1C;
  --color-3: #FFBF69;
  --color-4: #2EC4B6;
  --color-5: #CBF3F0;
}

Конфиг Tailwind

// tailwind.config.js
colors: {
  "coral-reef-1": "#FF6F61",
  "coral-reef-2": "#FF9F1C",
  "coral-reef-3": "#FFBF69",
  "coral-reef-4": "#2EC4B6",
  "coral-reef-5": "#CBF3F0",
}

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

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

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

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

#FF6F61Почти чёрный6.93:1AA

#FF9F1CПочти чёрный9.20:1AA

#FFBF69Почти чёрный11.61:1AA

#2EC4B6Почти чёрный8.72:1AA

#CBF3F0Почти чёрный15.85:1AA

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

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

текст \\ фон	#FF6F61	#FF9F1C	#FFBF69	#2EC4B6	#CBF3F0
#FF6F61	·	1.33Не проходит	1.68Не проходит	1.26Не проходит	2.29Не проходит
#FF9F1C	1.33Не проходит	·	1.26Не проходит	1.06Не проходит	1.72Не проходит
#FFBF69	1.68Не проходит	1.26Не проходит	·	1.33Не проходит	1.36Не проходит
#2EC4B6	1.26Не проходит	1.06Не проходит	1.33Не проходит	·	1.82Не проходит
#CBF3F0	2.29Не проходит	1.72Не проходит	1.36Не проходит	1.82Не проходит	·

Ещё палитры

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

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

Цитрус Закат Персик