Cloud-Based IDE UI Kit

Editor Night
#212121
Syntax Aqua
#00ffff
Folder Grey
#9e9e9e
Panel White
#fafafa
Terminal Mint
#00c896
Highlight Yellow
#fff89a

A paleta consiste em cores Escuro, Luz. Cores de destaque Syntax Aqua #00ffff e Highlight Yellow #fff89a. A paleta tem Neutro, Legal, Esquentar temperatura de cores.

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

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

Os matizes espalham-se amplamente na roda — paleta variada (heurística).

No geral, a temperatura tende para o frio.

Códigos HEX (ordenados): #00C896, #00FFFF, #212121, #9E9E9E, #FAFAFA, #FFF89A

A paleta Cloud-Based IDE UI Kit tem uma combinação de cores de códigos de 6:

HEX: #212121, RGB: (33, 33, 33); HEX: #00ffff, RGB: (0, 255, 255); HEX: #9e9e9e, RGB: (158, 158, 158)

HEX: #fafafa, RGB: (250, 250, 250); HEX: #00c896, RGB: (0, 200, 150); HEX: #fff89a, RGB: (255, 248, 154)

Versão simplificada das cores da paleta

Sombra de Preto, Matiz de darkgrey, Sombra de whitesmoke, Matiz de mediumaquamarine, Sombra de Cáqui

O esquema de cores foi criado por colorscheme

Mais paletas com:

Códigos de cores na paleta

Cloud-Based IDE UI Kit códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#212121	#212121	RGB(33, 33, 33)	Editor Night	Lead
#00ffff	#00ffff	RGB(0, 255, 255)	Syntax Aqua	Aqua
#9e9e9e	#9e9e9e	RGB(158, 158, 158)	Folder Grey	Gray62
#fafafa	#fafafa	RGB(250, 250, 250)	Panel White	Dr. White
#00c896	#00c896	RGB(0, 200, 150)	Terminal Mint	—
#fff89a	#fff89a	RGB(255, 248, 154)	Highlight Yellow	—

Contraste da Paleta de Cores

6 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
#00ffff	#fafafa	1.2
#00ffff	#00c896	1.72
#00ffff	#fff89a	1.14
#9e9e9e	#00c896	1.23
#fafafa	#fff89a	1.05
#00c896	#fff89a	1.97

Paleta de imagens Cloud-Based IDE UI Kit png

--color-editor-night:	#212121;
--color-syntax-aqua:	#00ffff;
--color-folder-grey:	#9e9e9e;
--color-panel-white:	#fafafa;
--color-terminal-mint:	#00c896;
--color-highlight-yellow:	#fff89a;

$color-editor-night:	#212121;
$color-syntax-aqua:	#00ffff;
$color-folder-grey:	#9e9e9e;
$color-panel-white:	#fafafa;
$color-terminal-mint:	#00c896;
$color-highlight-yellow:	#fff89a;

@color-editor-night:	#212121;
@color-syntax-aqua:	#00ffff;
@color-folder-grey:	#9e9e9e;
@color-panel-white:	#fafafa;
@color-terminal-mint:	#00c896;
@color-highlight-yellow:	#fff89a;