Next-Gen SaaS Dashboard UI

Metric Blue
#00b4d8
Chart Rose
#f2bac9
Sidebar Charcoal
#2d2d2d
Data Ivory
#fbfbf9
User Action Yellow
#fcd34d
Form Sky
#bfefff

A paleta consiste em cores Luz, Escuro. Cores de destaque User Action Yellow #fcd34d e Form Sky #bfefff. A paleta tem Legal, Neutro, Esquentar temperatura de cores.

Em luminosidade, a paleta vai de #2D2D2D (mais escuro) a #FBFBF9 (mais claro). A faixa de luminosidade é ampla.

A saturação global parece vívida (croma alto).

Alguns pares de matizes estão perto de posições complementares — pode ler-se como contraste complementar (heurística).

No geral, a temperatura tende para o frio.

Códigos HEX (ordenados): #00B4D8, #2D2D2D, #BFEFFF, #F2BAC9, #FBFBF9, #FCD34D

A paleta Next-Gen SaaS Dashboard UI tem uma combinação de cores de códigos de 6:

HEX: #00b4d8, RGB: (0, 180, 216); HEX: #f2bac9, RGB: (242, 186, 201); HEX: #2d2d2d, RGB: (45, 45, 45)

HEX: #fbfbf9, RGB: (251, 251, 249); HEX: #fcd34d, RGB: (252, 211, 77); HEX: #bfefff, RGB: (191, 239, 255)

Versão simplificada das cores da paleta

Matiz de deepskyblue, Matiz de Rosa, Sombra de Preto, Matiz de Branco, Sombra de gold, Sombra de lightblue

O esquema de cores foi criado por colorstudio

Mais paletas com:

Códigos de cores na paleta

Next-Gen SaaS Dashboard UI códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#00b4d8	#00b4d8	RGB(0, 180, 216)	Metric Blue	—
#f2bac9	#f2bac9	RGB(242, 186, 201)	Chart Rose	—
#2d2d2d	#2d2d2d	RGB(45, 45, 45)	Sidebar Charcoal	—
#fbfbf9	#fbfbf9	RGB(251, 251, 249)	Data Ivory	—
#fcd34d	#fcd34d	RGB(252, 211, 77)	User Action Yellow	—
#bfefff	#bfefff	RGB(191, 239, 255)	Form Sky	Lightblue1

Contraste da Paleta de Cores

9 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.

Cor do texto	Cor de fundo	Taxa de contraste
#00b4d8	#f2bac9	1.48
#00b4d8	#fcd34d	1.7
#00b4d8	#bfefff	1.99
#f2bac9	#fbfbf9	1.6
#f2bac9	#fcd34d	1.15
#f2bac9	#bfefff	1.34

Paleta de imagens Next-Gen SaaS Dashboard UI png

--color-metric-blue:	#00b4d8;
--color-chart-rose:	#f2bac9;
--color-sidebar-charcoal:	#2d2d2d;
--color-data-ivory:	#fbfbf9;
--color-user-action-yellow:	#fcd34d;
--color-form-sky:	#bfefff;

$color-metric-blue:	#00b4d8;
$color-chart-rose:	#f2bac9;
$color-sidebar-charcoal:	#2d2d2d;
$color-data-ivory:	#fbfbf9;
$color-user-action-yellow:	#fcd34d;
$color-form-sky:	#bfefff;

@color-metric-blue:	#00b4d8;
@color-chart-rose:	#f2bac9;
@color-sidebar-charcoal:	#2d2d2d;
@color-data-ivory:	#fbfbf9;
@color-user-action-yellow:	#fcd34d;
@color-form-sky:	#bfefff;