Dark Mode Modular UI Schema

Surface Obsidian
#111111
Component Frost
#f1f5f9
Token Cyan
#00cfc1
Variable Violet
#b39ddb
Input Slate
#2c2c2c
Response Light
#ededed

A paleta consiste em cores Escuro, Luz. Cores de destaque Token Cyan #00cfc1 e Response Light #ededed. A paleta tem Neutro, Legal temperatura de cores.

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

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

Os matizes ficam numa faixa vizinha na roda (heurística).

A maioria das amostras lê-se como neutra em temperatura.

Códigos HEX (ordenados): #00CFC1, #111111, #2C2C2C, #B39DDB, #EDEDED, #F1F5F9

A paleta Dark Mode Modular UI Schema tem uma combinação de cores de códigos de 6:

HEX: #111111, RGB: (17, 17, 17); HEX: #f1f5f9, RGB: (241, 245, 249); HEX: #00cfc1, RGB: (0, 207, 193)

HEX: #b39ddb, RGB: (179, 157, 219); HEX: #2c2c2c, RGB: (44, 44, 44); HEX: #ededed, RGB: (237, 237, 237)

Versão simplificada das cores da paleta

Sombra de Preto, Matiz de aliceblue, Matiz de mediumturquoise, Matiz de plum, Sombra de Preto, Matiz de whitesmoke

O esquema de cores foi criado por bad_colors

Mais paletas com:

Códigos de cores na paleta

Dark Mode Modular UI Schema códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#111111	#111111	RGB(17, 17, 17)	Surface Obsidian	Dreamless Sleep
#f1f5f9	#f1f5f9	RGB(241, 245, 249)	Component Frost	—
#00cfc1	#00cfc1	RGB(0, 207, 193)	Token Cyan	—
#b39ddb	#b39ddb	RGB(179, 157, 219)	Variable Violet	—
#2c2c2c	#2c2c2c	RGB(44, 44, 44)	Input Slate	—
#ededed	#ededed	RGB(237, 237, 237)	Response Light	White Edgar

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
#111111	#2c2c2c	1.35
#f1f5f9	#00cfc1	1.79
#f1f5f9	#ededed	1.06
#00cfc1	#b39ddb	1.22
#00cfc1	#ededed	1.67

Paleta de imagens Dark Mode Modular UI Schema png

--color-surface-obsidian:	#111111;
--color-component-frost:	#f1f5f9;
--color-token-cyan:	#00cfc1;
--color-variable-violet:	#b39ddb;
--color-input-slate:	#2c2c2c;
--color-response-light:	#ededed;

$color-surface-obsidian:	#111111;
$color-component-frost:	#f1f5f9;
$color-token-cyan:	#00cfc1;
$color-variable-violet:	#b39ddb;
$color-input-slate:	#2c2c2c;
$color-response-light:	#ededed;

@color-surface-obsidian:	#111111;
@color-component-frost:	#f1f5f9;
@color-token-cyan:	#00cfc1;
@color-variable-violet:	#b39ddb;
@color-input-slate:	#2c2c2c;
@color-response-light:	#ededed;