Палитра «Сирень»

Сиреневые и васильковые оттенки. Онлайн-школы, приложения, мягкие технологичные бренды.

#F8F7FFrgb(248, 247, 255)

#E2D9F3rgb(226, 217, 243)

#B8B8FFrgb(184, 184, 255)

#9381FFrgb(147, 129, 255)

#3F37C9rgb(63, 55, 201)

Коды цветов

HEX	RGB	HSL
`#F8F7FF`	`rgb(248, 247, 255)`	`hsl(248, 100%, 98%)`
`#E2D9F3`	`rgb(226, 217, 243)`	`hsl(261, 52%, 90%)`
`#B8B8FF`	`rgb(184, 184, 255)`	`hsl(240, 100%, 86%)`
`#9381FF`	`rgb(147, 129, 255)`	`hsl(249, 100%, 75%)`
`#3F37C9`	`rgb(63, 55, 201)`	`hsl(243, 57%, 50%)`

Так выглядит обычный текст цветом #3F37C9 на фоне #F8F7FF. Контраст 7,58:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#F8F7FF`	`#3F37C9`	7,58:1	любой текст (AAA)
Аа `#E2D9F3`	`#3F37C9`	5,94:1	обычный текст (AA)
Аа `#B8B8FF`	`#3F37C9`	4,35:1	заголовки и кнопки
Аа `#F8F7FF`	`#9381FF`	2,89:1	только декор
Аа `#9381FF`	`#3F37C9`	2,62:1	только декор
Аа `#E2D9F3`	`#9381FF`	2,26:1	только декор

:root {
  --color-1: #f8f7ff;
  --color-2: #e2d9f3;
  --color-3: #b8b8ff;
  --color-4: #9381ff;
  --color-5: #3f37c9;
}