Палитра «Крафт-бумага»

Картон, бечёвка и тёмные чернила. Хендмейд, упаковка, книжные и чайные лавки.

#F5EBDDrgb(245, 235, 221)

#E6D3B3rgb(230, 211, 179)

#C8A97Ergb(200, 169, 126)

#8C6A43rgb(140, 106, 67)

#3B2F2Frgb(59, 47, 47)

Коды цветов

HEX	RGB	HSL
`#F5EBDD`	`rgb(245, 235, 221)`	`hsl(35, 55%, 91%)`
`#E6D3B3`	`rgb(230, 211, 179)`	`hsl(38, 50%, 80%)`
`#C8A97E`	`rgb(200, 169, 126)`	`hsl(35, 40%, 64%)`
`#8C6A43`	`rgb(140, 106, 67)`	`hsl(32, 35%, 41%)`
`#3B2F2F`	`rgb(59, 47, 47)`	`hsl(0, 11%, 21%)`

Так выглядит обычный текст цветом #3B2F2F на фоне #F5EBDD. Контраст 10,90:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#F5EBDD`	`#3B2F2F`	10,90:1	любой текст (AAA)
Аа `#E6D3B3`	`#3B2F2F`	8,77:1	любой текст (AAA)
Аа `#C8A97E`	`#3B2F2F`	5,77:1	обычный текст (AA)
Аа `#F5EBDD`	`#8C6A43`	4,18:1	заголовки и кнопки
Аа `#E6D3B3`	`#8C6A43`	3,36:1	заголовки и кнопки
Аа `#8C6A43`	`#3B2F2F`	2,60:1	только декор

:root {
  --color-1: #f5ebdd;
  --color-2: #e6d3b3;
  --color-3: #c8a97e;
  --color-4: #8c6a43;
  --color-5: #3b2f2f;
}