Палитра «Финтех»

Тёмно-синий интерфейс с синим и зелёным акцентами. Дашборды, финансы, SaaS.

#0F172Argb(15, 23, 42)

#1E293Brgb(30, 41, 59)

#3B82F6rgb(59, 130, 246)

#22C55Ergb(34, 197, 94)

#F8FAFCrgb(248, 250, 252)

Коды цветов

HEX	RGB	HSL
`#0F172A`	`rgb(15, 23, 42)`	`hsl(222, 47%, 11%)`
`#1E293B`	`rgb(30, 41, 59)`	`hsl(217, 33%, 17%)`
`#3B82F6`	`rgb(59, 130, 246)`	`hsl(217, 91%, 60%)`
`#22C55E`	`rgb(34, 197, 94)`	`hsl(142, 71%, 45%)`
`#F8FAFC`	`rgb(248, 250, 252)`	`hsl(210, 40%, 98%)`

Так выглядит обычный текст цветом #0F172A на фоне #F8FAFC. Контраст 17,06:1, читается хорошо.

Кнопка

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

Текст	Фон	Контраст	Подходит для
Аа `#0F172A`	`#F8FAFC`	17,06:1	любой текст (AAA)
Аа `#1E293B`	`#F8FAFC`	13,98:1	любой текст (AAA)
Аа `#0F172A`	`#22C55E`	7,83:1	любой текст (AAA)
Аа `#1E293B`	`#22C55E`	6,42:1	обычный текст (AA)
Аа `#0F172A`	`#3B82F6`	4,85:1	обычный текст (AA)
Аа `#1E293B`	`#3B82F6`	3,97:1	заголовки и кнопки

:root {
  --color-1: #0f172a;
  --color-2: #1e293b;
  --color-3: #3b82f6;
  --color-4: #22c55e;
  --color-5: #f8fafc;
}