Палитра «Небо»

Синий от утреннего неба до сумерек. Понятная гамма для сервисов, школ и медицины.

#E3F2FDrgb(227, 242, 253)

#90CAF9rgb(144, 202, 249)

#42A5F5rgb(66, 165, 245)

#1E88E5rgb(30, 136, 229)

#0D47A1rgb(13, 71, 161)

Коды цветов

HEX	RGB	HSL
`#E3F2FD`	`rgb(227, 242, 253)`	`hsl(205, 87%, 94%)`
`#90CAF9`	`rgb(144, 202, 249)`	`hsl(207, 90%, 77%)`
`#42A5F5`	`rgb(66, 165, 245)`	`hsl(207, 90%, 61%)`
`#1E88E5`	`rgb(30, 136, 229)`	`hsl(208, 79%, 51%)`
`#0D47A1`	`rgb(13, 71, 161)`	`hsl(216, 85%, 34%)`

Так выглядит обычный текст цветом #0D47A1 на фоне #E3F2FD. Контраст 7,55:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#E3F2FD`	`#0D47A1`	7,55:1	любой текст (AAA)
Аа `#90CAF9`	`#0D47A1`	4,93:1	обычный текст (AA)
Аа `#42A5F5`	`#0D47A1`	3,26:1	заголовки и кнопки
Аа `#E3F2FD`	`#1E88E5`	3,22:1	заголовки и кнопки
Аа `#1E88E5`	`#0D47A1`	2,34:1	только декор
Аа `#E3F2FD`	`#42A5F5`	2,31:1	только декор

:root {
  --color-1: #e3f2fd;
  --color-2: #90caf9;
  --color-3: #42a5f5;
  --color-4: #1e88e5;
  --color-5: #0d47a1;
}