Mobile Application UI Kit

Cloud White
#ffffff
Ribbon Pink
#ff69b4
Beam Peach
#ffe4a9
Soft Fog Light Grey
#f5f5f5
Surface Dark Panel
#2c2e3d
Black Nightfall
#343a40

A paleta consiste em cores Luz, Escuro. Cores de destaque Beam Peach #ffe4a9 e Surface Dark Panel #2c2e3d. A paleta tem Neutro, Esquentar, Legal temperatura de cores.

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

A saturação global parece maioritariamente suave (croma baixo).

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

Notas quentes e frias estão bastante equilibradas.

Códigos HEX (ordenados): #2C2E3D, #343A40, #F5F5F5, #FF69B4, #FFE4A9, #FFFFFF

A paleta Mobile Application UI Kit tem uma combinação de cores de códigos de 6:

HEX: #ffffff, RGB: (255, 255, 255); HEX: #ff69b4, RGB: (255, 105, 180); HEX: #ffe4a9, RGB: (255, 228, 169)

HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #2c2e3d, RGB: (44, 46, 61); HEX: #343a40, RGB: (52, 58, 64)

Versão simplificada das cores da paleta

Branco, Matiz de moccasin, Sombra de Preto, Matiz de darkslategrey

O esquema de cores foi criado por coolor

Mais paletas com:

Códigos de cores na paleta

Mobile Application UI Kit códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#ffffff	#ffffff	RGB(255, 255, 255)	Cloud White	White
#ff69b4	#ff69b4	RGB(255, 105, 180)	Ribbon Pink	Girls Night Out
#ffe4a9	#ffe4a9	RGB(255, 228, 169)	Beam Peach	—
#f5f5f5	#f5f5f5	RGB(245, 245, 245)	Soft Fog Light Grey	White Smoke
#2c2e3d	#2c2e3d	RGB(44, 46, 61)	Surface Dark Panel	—
#343a40	#343a40	RGB(52, 58, 64)	Black Nightfall	—

Contraste da Paleta de Cores

4 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
#ffffff	#ffe4a9	1.24
#ffffff	#f5f5f5	1.09
#ffe4a9	#f5f5f5	1.13
#2c2e3d	#343a40	1.16

Paleta de imagens Mobile Application UI Kit png

--color-cloud-white:	#ffffff;
--color-ribbon-pink:	#ff69b4;
--color-beam-peach:	#ffe4a9;
--color-soft-fog-light-grey:	#f5f5f5;
--color-surface-dark-panel:	#2c2e3d;
--color-black-nightfall:	#343a40;

$color-cloud-white:	#ffffff;
$color-ribbon-pink:	#ff69b4;
$color-beam-peach:	#ffe4a9;
$color-soft-fog-light-grey:	#f5f5f5;
$color-surface-dark-panel:	#2c2e3d;
$color-black-nightfall:	#343a40;

@color-cloud-white:	#ffffff;
@color-ribbon-pink:	#ff69b4;
@color-beam-peach:	#ffe4a9;
@color-soft-fog-light-grey:	#f5f5f5;
@color-surface-dark-panel:	#2c2e3d;
@color-black-nightfall:	#343a40;