Палитра «Графит»

Чистые серые без оттенка. Основа для тёмной темы, к ней легко добавить один яркий акцент.

#121212rgb(18, 18, 18)

#2A2A2Argb(42, 42, 42)

#4A4A4Argb(74, 74, 74)

#8C8C8Crgb(140, 140, 140)

#E6E6E6rgb(230, 230, 230)

Коды цветов

HEX	RGB	HSL
`#121212`	`rgb(18, 18, 18)`	`hsl(0, 0%, 7%)`
`#2A2A2A`	`rgb(42, 42, 42)`	`hsl(0, 0%, 16%)`
`#4A4A4A`	`rgb(74, 74, 74)`	`hsl(0, 0%, 29%)`
`#8C8C8C`	`rgb(140, 140, 140)`	`hsl(0, 0%, 55%)`
`#E6E6E6`	`rgb(230, 230, 230)`	`hsl(0, 0%, 90%)`

Так выглядит обычный текст цветом #121212 на фоне #E6E6E6. Контраст 15,01:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#121212`	`#E6E6E6`	15,01:1	любой текст (AAA)
Аа `#2A2A2A`	`#E6E6E6`	11,50:1	любой текст (AAA)
Аа `#4A4A4A`	`#E6E6E6`	7,10:1	любой текст (AAA)
Аа `#121212`	`#8C8C8C`	5,57:1	обычный текст (AA)
Аа `#2A2A2A`	`#8C8C8C`	4,26:1	заголовки и кнопки
Аа `#8C8C8C`	`#E6E6E6`	2,69:1	только декор

:root {
  --color-1: #121212;
  --color-2: #2a2a2a;
  --color-3: #4a4a4a;
  --color-4: #8c8c8c;
  --color-5: #e6e6e6;
}