Палитра Пляж

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

:root {
  --color-1: #F6E4C8;
  --color-2: #EAC8A0;
  --color-3: #63C7D6;
  --color-4: #1D7A8A;
  --color-5: #FFFDF7;
}

Конфиг Tailwind

// tailwind.config.js
colors: {
  "beach-1": "#F6E4C8",
  "beach-2": "#EAC8A0",
  "beach-3": "#63C7D6",
  "beach-4": "#1D7A8A",
  "beach-5": "#FFFDF7",
}

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

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

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

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

#F6E4C8Почти чёрный15.16:1AA

#EAC8A0Почти чёрный11.94:1AA

#63C7D6Почти чёрный9.60:1AA

#1D7A8AБелый5.00:1AA

#FFFDF7Почти чёрный18.57:1AA

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

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

текст \\ фон	#F6E4C8	#EAC8A0	#63C7D6	#1D7A8A	#FFFDF7
#F6E4C8	·	1.27Не проходит	1.58Не проходит	4.01Только крупный	1.23Не проходит
#EAC8A0	1.27Не проходит	·	1.24Не проходит	3.16Только крупный	1.56Не проходит
#63C7D6	1.58Не проходит	1.24Не проходит	·	2.54Не проходит	1.93Не проходит
#1D7A8A	4.01Только крупный	3.16Только крупный	2.54Не проходит	·	4.91AA
#FFFDF7	1.23Не проходит	1.56Не проходит	1.93Не проходит	4.91AA	·

Ещё палитры

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

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

Небо Ореол Софит