Палитра «Сакура»

От лепестка до тёмной вишни. Японские кафе, цветы, косметика и весенние распродажи.

#FFF0F3rgb(255, 240, 243)

#FFCCD5rgb(255, 204, 213)

#FF8FA3rgb(255, 143, 163)

#C9184Argb(201, 24, 74)

#590D22rgb(89, 13, 34)

Коды цветов

HEX	RGB	HSL
`#FFF0F3`	`rgb(255, 240, 243)`	`hsl(348, 100%, 97%)`
`#FFCCD5`	`rgb(255, 204, 213)`	`hsl(349, 100%, 90%)`
`#FF8FA3`	`rgb(255, 143, 163)`	`hsl(349, 100%, 78%)`
`#C9184A`	`rgb(201, 24, 74)`	`hsl(343, 79%, 44%)`
`#590D22`	`rgb(89, 13, 34)`	`hsl(343, 75%, 20%)`

Так выглядит обычный текст цветом #590D22 на фоне #FFF0F3. Контраст 12,62:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#FFF0F3`	`#590D22`	12,62:1	любой текст (AAA)
Аа `#FFCCD5`	`#590D22`	9,86:1	любой текст (AAA)
Аа `#FF8FA3`	`#590D22`	6,44:1	обычный текст (AA)
Аа `#FFF0F3`	`#C9184A`	5,11:1	обычный текст (AA)
Аа `#FFCCD5`	`#C9184A`	3,99:1	заголовки и кнопки
Аа `#FF8FA3`	`#C9184A`	2,61:1	только декор

:root {
  --color-1: #fff0f3;
  --color-2: #ffccd5;
  --color-3: #ff8fa3;
  --color-4: #c9184a;
  --color-5: #590d22;
}