Палитра «Туман»

Холодные серые для интерфейсов. Фон, рамки, второстепенный и основной текст в одном наборе.

#F8F9FArgb(248, 249, 250)

#DEE2E6rgb(222, 226, 230)

#ADB5BDrgb(173, 181, 189)

#6C757Drgb(108, 117, 125)

#343A40rgb(52, 58, 64)

Коды цветов

HEX	RGB	HSL
`#F8F9FA`	`rgb(248, 249, 250)`	`hsl(210, 17%, 98%)`
`#DEE2E6`	`rgb(222, 226, 230)`	`hsl(210, 14%, 89%)`
`#ADB5BD`	`rgb(173, 181, 189)`	`hsl(210, 11%, 71%)`
`#6C757D`	`rgb(108, 117, 125)`	`hsl(208, 7%, 46%)`
`#343A40`	`rgb(52, 58, 64)`	`hsl(210, 10%, 23%)`

Так выглядит обычный текст цветом #343A40 на фоне #F8F9FA. Контраст 10,91:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#F8F9FA`	`#343A40`	10,91:1	любой текст (AAA)
Аа `#DEE2E6`	`#343A40`	8,83:1	любой текст (AAA)
Аа `#ADB5BD`	`#343A40`	5,54:1	обычный текст (AA)
Аа `#F8F9FA`	`#6C757D`	4,44:1	заголовки и кнопки
Аа `#DEE2E6`	`#6C757D`	3,60:1	заголовки и кнопки
Аа `#6C757D`	`#343A40`	2,45:1	только декор

:root {
  --color-1: #f8f9fa;
  --color-2: #dee2e6;
  --color-3: #adb5bd;
  --color-4: #6c757d;
  --color-5: #343a40;
}