Палитра «Глубокое море»

Синий от бездны до бликов на воде. Логистика, IT, морские перевозки, тёмные темы.

#011627rgb(1, 22, 39)

#023E7Drgb(2, 62, 125)

#0466C8rgb(4, 102, 200)

#33A1FDrgb(51, 161, 253)

#E9F5FFrgb(233, 245, 255)

Коды цветов

HEX	RGB	HSL
`#011627`	`rgb(1, 22, 39)`	`hsl(207, 95%, 8%)`
`#023E7D`	`rgb(2, 62, 125)`	`hsl(211, 97%, 25%)`
`#0466C8`	`rgb(4, 102, 200)`	`hsl(210, 96%, 40%)`
`#33A1FD`	`rgb(51, 161, 253)`	`hsl(207, 98%, 60%)`
`#E9F5FF`	`rgb(233, 245, 255)`	`hsl(207, 100%, 96%)`

Так выглядит обычный текст цветом #011627 на фоне #E9F5FF. Контраст 16,56:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#011627`	`#E9F5FF`	16,56:1	любой текст (AAA)
Аа `#023E7D`	`#E9F5FF`	9,54:1	любой текст (AAA)
Аа `#011627`	`#33A1FD`	6,68:1	обычный текст (AA)
Аа `#0466C8`	`#E9F5FF`	5,07:1	обычный текст (AA)
Аа `#023E7D`	`#33A1FD`	3,85:1	заголовки и кнопки
Аа `#011627`	`#0466C8`	3,26:1	заголовки и кнопки

:root {
  --color-1: #011627;
  --color-2: #023e7d;
  --color-3: #0466c8;
  --color-4: #33a1fd;
  --color-5: #e9f5ff;
}