Палитра «Ретро 70-х»

Горчичный, терракота и бирюза, как на старых плакатах. Один из самых популярных наборов для инфографики.

#264653rgb(38, 70, 83)

#2A9D8Frgb(42, 157, 143)

#E9C46Argb(233, 196, 106)

#F4A261rgb(244, 162, 97)

#E76F51rgb(231, 111, 81)

Коды цветов

HEX	RGB	HSL
`#264653`	`rgb(38, 70, 83)`	`hsl(197, 37%, 24%)`
`#2A9D8F`	`rgb(42, 157, 143)`	`hsl(173, 58%, 39%)`
`#E9C46A`	`rgb(233, 196, 106)`	`hsl(43, 74%, 66%)`
`#F4A261`	`rgb(244, 162, 97)`	`hsl(27, 87%, 67%)`
`#E76F51`	`rgb(231, 111, 81)`	`hsl(12, 76%, 61%)`

Так выглядит обычный текст цветом #264653 на фоне #E9C46A. Контраст 6,03:1, читается хорошо.

Кнопка

Контраст каждой пары цветов по WCAG: для обычного текста нужно не меньше 4,5:1, для крупных заголовков и кнопок не меньше 3:1.

Текст	Фон	Контраст	Подходит для
Аа `#264653`	`#E9C46A`	6,03:1	обычный текст (AA)
Аа `#264653`	`#F4A261`	4,88:1	обычный текст (AA)
Аа `#264653`	`#E76F51`	3,25:1	заголовки и кнопки
Аа `#264653`	`#2A9D8F`	3,03:1	заголовки и кнопки
Аа `#2A9D8F`	`#E9C46A`	1,98:1	только декор
Аа `#E9C46A`	`#E76F51`	1,85:1	только декор

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
}