Mobile-First Dark Pattern Kit

Navbar Black
#151515
Tap Feedback Teal
#00bfa6
Section Divider Grey
#cfcfcf
FAB Yellow
#f7e733
Input Label White
#fbfbfb
Overlay Coral
#ff7b72

A paleta consiste em cores Escuro, Luz. Cores de destaque Tap Feedback Teal #00bfa6 e Overlay Coral #ff7b72. A paleta tem Neutro, Legal, Esquentar temperatura de cores.

Em luminosidade, a paleta vai de #151515 (mais escuro) a #FBFBFB (mais claro). A faixa de luminosidade é ampla.

Saturação mista — tons suaves e acentos mais vivos.

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 quente.

Códigos HEX (ordenados): #00BFA6, #151515, #CFCFCF, #F7E733, #FBFBFB, #FF7B72

A paleta Mobile-First Dark Pattern Kit tem uma combinação de cores de códigos de 6:

HEX: #151515, RGB: (21, 21, 21); HEX: #00bfa6, RGB: (0, 191, 166); HEX: #cfcfcf, RGB: (207, 207, 207)

HEX: #f7e733, RGB: (247, 231, 51); HEX: #fbfbfb, RGB: (251, 251, 251); HEX: #ff7b72, RGB: (255, 123, 114)

Versão simplificada das cores da paleta

Sombra de Preto, Matiz de lightseagreen, Matiz de lightgrey, Sombra de gold, Matiz de Branco, Matiz de salmon

O esquema de cores foi criado por colorhunt

Mais paletas com:

Códigos de cores na paleta

Mobile-First Dark Pattern Kit códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#151515	#151515	RGB(21, 21, 21)	Navbar Black	Matt Black
#00bfa6	#00bfa6	RGB(0, 191, 166)	Tap Feedback Teal	—
#cfcfcf	#cfcfcf	RGB(207, 207, 207)	Section Divider Grey	American Silver
#f7e733	#f7e733	RGB(247, 231, 51)	FAB Yellow	—
#fbfbfb	#fbfbfb	RGB(251, 251, 251)	Input Label White	Whiteout
#ff7b72	#ff7b72	RGB(255, 123, 114)	Overlay Coral	—

Contraste da Paleta de Cores

8 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
#00bfa6	#cfcfcf	1.49
#00bfa6	#f7e733	1.82
#00bfa6	#ff7b72	1.08
#cfcfcf	#f7e733	1.21
#cfcfcf	#fbfbfb	1.5
#cfcfcf	#ff7b72	1.61

Paleta de imagens Mobile-First Dark Pattern Kit png

--color-navbar-black:	#151515;
--color-tap-feedback-teal:	#00bfa6;
--color-section-divider-grey:	#cfcfcf;
--color-fab-yellow:	#f7e733;
--color-input-label-white:	#fbfbfb;
--color-overlay-coral:	#ff7b72;

$color-navbar-black:	#151515;
$color-tap-feedback-teal:	#00bfa6;
$color-section-divider-grey:	#cfcfcf;
$color-fab-yellow:	#f7e733;
$color-input-label-white:	#fbfbfb;
$color-overlay-coral:	#ff7b72;

@color-navbar-black:	#151515;
@color-tap-feedback-teal:	#00bfa6;
@color-section-divider-grey:	#cfcfcf;
@color-fab-yellow:	#f7e733;
@color-input-label-white:	#fbfbfb;
@color-overlay-coral:	#ff7b72;