Progressive Web UX Foundation

Install Indigo
#4f46e5
Cache Mint
#34d399
Offline Cream
#fef9c3
Sync Coral
#fb7185
Manifest Slate
#475569
Reload Fog
#f3f4f6
Launch Jet
#0a0a0a

A paleta consiste em cores Semi escuro, Luz, Escuro. Cores de destaque Install Indigo #4f46e5 e Offline Cream #fef9c3. A paleta tem Legal, Esquentar, Neutro temperatura de cores.

Em luminosidade, a paleta vai de #0A0A0A (mais escuro) a #F3F4F6 (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): #0A0A0A, #34D399, #475569, #4F46E5, #F3F4F6, #FB7185, #FEF9C3

A paleta Progressive Web UX Foundation tem uma combinação de cores de códigos de 7:

HEX: #4f46e5, RGB: (79, 70, 229); HEX: #34d399, RGB: (52, 211, 153); HEX: #fef9c3, RGB: (254, 249, 195)

HEX: #fb7185, RGB: (251, 113, 133); HEX: #475569, RGB: (71, 85, 105); HEX: #f3f4f6, RGB: (243, 244, 246)

HEX: #0a0a0a, RGB: (10, 10, 10)

Versão simplificada das cores da paleta

Matiz de slateblue, Matiz de mediumaquamarine, Matiz de lemonchiffon, Matiz de lightcoral, Sombra de darkslateblue, Matiz de whitesmoke, Sombra de Preto

O esquema de cores foi criado por palettespicker

Mais paletas com:

Códigos de cores na paleta

Progressive Web UX Foundation códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#4f46e5	#4f46e5	RGB(79, 70, 229)	Install Indigo	—
#34d399	#34d399	RGB(52, 211, 153)	Cache Mint	—
#fef9c3	#fef9c3	RGB(254, 249, 195)	Offline Cream	—
#fb7185	#fb7185	RGB(251, 113, 133)	Sync Coral	—
#475569	#475569	RGB(71, 85, 105)	Manifest Slate	—
#f3f4f6	#f3f4f6	RGB(243, 244, 246)	Reload Fog	—
#0a0a0a	#0a0a0a	RGB(10, 10, 10)	Launch Jet	Existential Angst

Contraste da Paleta de Cores

5 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
#4f46e5	#475569	1.2
#34d399	#fef9c3	1.78
#34d399	#fb7185	1.4
#34d399	#f3f4f6	1.74
#fef9c3	#f3f4f6	1.02

Paleta de imagens Progressive Web UX Foundation png

--color-install-indigo:	#4f46e5;
--color-cache-mint:	#34d399;
--color-offline-cream:	#fef9c3;
--color-sync-coral:	#fb7185;
--color-manifest-slate:	#475569;
--color-reload-fog:	#f3f4f6;
--color-launch-jet:	#0a0a0a;

$color-install-indigo:	#4f46e5;
$color-cache-mint:	#34d399;
$color-offline-cream:	#fef9c3;
$color-sync-coral:	#fb7185;
$color-manifest-slate:	#475569;
$color-reload-fog:	#f3f4f6;
$color-launch-jet:	#0a0a0a;

@color-install-indigo:	#4f46e5;
@color-cache-mint:	#34d399;
@color-offline-cream:	#fef9c3;
@color-sync-coral:	#fb7185;
@color-manifest-slate:	#475569;
@color-reload-fog:	#f3f4f6;
@color-launch-jet:	#0a0a0a;