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

Обожжённая глина и топлёное молоко. Керамика, мебель из дерева, загородные дома.

#582F0Ergb(88, 47, 14)

#7F4F24rgb(127, 79, 36)

#A47148rgb(164, 113, 72)

#D4A373rgb(212, 163, 115)

#FAEDCDrgb(250, 237, 205)

Коды цветов

HEX	RGB	HSL
`#582F0E`	`rgb(88, 47, 14)`	`hsl(27, 73%, 20%)`
`#7F4F24`	`rgb(127, 79, 36)`	`hsl(28, 56%, 32%)`
`#A47148`	`rgb(164, 113, 72)`	`hsl(27, 39%, 46%)`
`#D4A373`	`rgb(212, 163, 115)`	`hsl(30, 53%, 64%)`
`#FAEDCD`	`rgb(250, 237, 205)`	`hsl(43, 82%, 89%)`

Так выглядит обычный текст цветом #582F0E на фоне #FAEDCD. Контраст 9,88:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#582F0E`	`#FAEDCD`	9,88:1	любой текст (AAA)
Аа `#7F4F24`	`#FAEDCD`	5,92:1	обычный текст (AA)
Аа `#582F0E`	`#D4A373`	5,08:1	обычный текст (AA)
Аа `#A47148`	`#FAEDCD`	3,58:1	заголовки и кнопки
Аа `#7F4F24`	`#D4A373`	3,04:1	заголовки и кнопки
Аа `#582F0E`	`#A47148`	2,75:1	только декор

:root {
  --color-1: #582f0e;
  --color-2: #7f4f24;
  --color-3: #a47148;
  --color-4: #d4a373;
  --color-5: #faedcd;
}