React Dashboard Syntax Lab

JSX Flame
#ff6363
Import Charcoal
#23272a
Hook Cyan
#2dced8
Element Pink
#fda7df
Code Paper White
#fbfbfb
State Lime
#c6ff00

La tavolozza è composta da Leggero, Buio colori. Colori accentati Import Charcoal #23272a e State Lime #c6ff00. La tavolozza ha la temperatura del colore Caldo, Freddo, Neutro.

Per luminosità, la tavolozza va da #23272A (più scuro) a #FBFBFB (più chiaro). L’intervallo di luminosità è ampio.

La saturazione complessiva risulta vivida (croma alto).

Alcune coppie di tonalità sono vicine a posizioni complementari — si può leggere come contrasto complementare (euristica).

Note calde e fredde sono abbastanza bilanciate.

Codici HEX (ordinati): #23272A, #2DCED8, #C6FF00, #FBFBFB, #FDA7DF, #FF6363

La tavolozza React Dashboard Syntax Lab ha una combinazione di colori dei codici 6:

ESADECIMALE: #ff6363, RGB: (255, 99, 99); ESADECIMALE: #23272a, RGB: (35, 39, 42); ESADECIMALE: #2dced8, RGB: (45, 206, 216)

ESADECIMALE: #fda7df, RGB: (253, 167, 223); ESADECIMALE: #fbfbfb, RGB: (251, 251, 251); ESADECIMALE: #c6ff00, RGB: (198, 255, 0)

Versione semplificata della tavolozza dei colori

Tonalità di salmon, Ombra di Nero, Ombra di darkturquoise, Ombra di plum, Tonalità di Bianco, Ombra di greenyellow

La combinazione di colori è stata creata da colorday

Altre tavolozze con:

Codici colori nella tavolozza

React Dashboard Syntax Lab codici colore HEX, informazioni RGB in tabella

Colore	ESADECIMALE	RGB	Nome	Nome alternativo
#ff6363	#ff6363	RGB(255, 99, 99)	JSX Flame	—
#23272a	#23272a	RGB(35, 39, 42)	Import Charcoal	—
#2dced8	#2dced8	RGB(45, 206, 216)	Hook Cyan	—
#fda7df	#fda7df	RGB(253, 167, 223)	Element Pink	—
#fbfbfb	#fbfbfb	RGB(251, 251, 251)	Code Paper White	Whiteout
#c6ff00	#c6ff00	RGB(198, 255, 0)	State Lime	—

Contrasto della palette di colori

8 coppie di colori hanno un basso contrasto e necessitano di miglioramenti, il che può influire sulla leggibilità.

Colore del testo	Colore di sfondo	Rapporto di contrasto
#ff6363	#2dced8	1.51
#ff6363	#fda7df	1.63
#2dced8	#fda7df	1.07
#2dced8	#fbfbfb	1.85
#2dced8	#c6ff00	1.61
#fda7df	#fbfbfb	1.72

Tavolozza immagini React Dashboard Syntax Lab png

--color-jsx-flame:	#ff6363;
--color-import-charcoal:	#23272a;
--color-hook-cyan:	#2dced8;
--color-element-pink:	#fda7df;
--color-code-paper-white:	#fbfbfb;
--color-state-lime:	#c6ff00;

$color-jsx-flame:	#ff6363;
$color-import-charcoal:	#23272a;
$color-hook-cyan:	#2dced8;
$color-element-pink:	#fda7df;
$color-code-paper-white:	#fbfbfb;
$color-state-lime:	#c6ff00;

@color-jsx-flame:	#ff6363;
@color-import-charcoal:	#23272a;
@color-hook-cyan:	#2dced8;
@color-element-pink:	#fda7df;
@color-code-paper-white:	#fbfbfb;
@color-state-lime:	#c6ff00;