UI Kit Quantum Horizon Glow

Component Cyan
#00e5ff
Atomic Purple
#b388ff
Surface White
#ffffff
Interaction Yellow
#ffeb3b
Logic Black
#202124
Flow Orange
#ff6d00

Palet terdiri dari Lampu, Gelap warna. Warna aksen Component Cyan #00e5ff Dan Interaction Yellow #ffeb3b. Palet memiliki suhu warna Dingin, Netral, Hangat.

Menurut kecerahan, palet ini dari #202124 (paling gelap) ke #FFFFFF (paling terang). Rentang kecerahan lebar.

Saturasi keseluruhan terasa hidup (chroma tinggi).

Beberapa pasangan rona dekat posisi komplementer — dapat terbaca sebagai kontras komplementer (heuristik).

Nada hangat dan dingin cukup seimbang.

Kode HEX (diurutkan): #00E5FF, #202124, #B388FF, #FF6D00, #FFEB3B, #FFFFFF

Palette UI Kit Quantum Horizon Glow memiliki kombinasi warna kode 6:

HEX: #00e5ff, RGB: (0, 229, 255); HEX: #b388ff, RGB: (179, 136, 255); HEX: #ffffff, RGB: (255, 255, 255)

HEX: #ffeb3b, RGB: (255, 235, 59); HEX: #202124, RGB: (32, 33, 36); HEX: #ff6d00, RGB: (255, 109, 0)

Versi warna palet yang disederhanakan

Bayangan dari darkturquoise, Bayangan dari mediumpurple, Putih, Warna dari Kuning, Bayangan dari Hitam, Warna dari coral

Skema warna diciptakan oleh colorslib

Lebih banyak palet dengan:

Kode warna dalam palet

UI Kit Quantum Horizon Glow kode warna HEX, informasi RGB dalam tabel

Warna	HEX	RGB	Nama	nama alternatif
#00e5ff	#00e5ff	RGB(0, 229, 255)	Component Cyan	—
#b388ff	#b388ff	RGB(179, 136, 255)	Atomic Purple	—
#ffffff	#ffffff	RGB(255, 255, 255)	Surface White	White
#ffeb3b	#ffeb3b	RGB(255, 235, 59)	Interaction Yellow	—
#202124	#202124	RGB(32, 33, 36)	Logic Black	Noble Black
#ff6d00	#ff6d00	RGB(255, 109, 0)	Flow Orange	—

Kontras Palet Warna

6 pasangan warna memiliki kontras rendah dan perlu perbaikan, yang dapat memengaruhi keterbacaan.

Warna teks	Warna latar belakang	Rasio Kontras
#00e5ff	#b388ff	1.73
#00e5ff	#ffffff	1.53
#00e5ff	#ffeb3b	1.25
#00e5ff	#ff6d00	1.83
#b388ff	#ff6d00	1.05
#ffffff	#ffeb3b	1.22

Palet gambar UI Kit Quantum Horizon Glow png

--color-component-cyan:	#00e5ff;
--color-atomic-purple:	#b388ff;
--color-surface-white:	#ffffff;
--color-interaction-yellow:	#ffeb3b;
--color-logic-black:	#202124;
--color-flow-orange:	#ff6d00;

$color-component-cyan:	#00e5ff;
$color-atomic-purple:	#b388ff;
$color-surface-white:	#ffffff;
$color-interaction-yellow:	#ffeb3b;
$color-logic-black:	#202124;
$color-flow-orange:	#ff6d00;

@color-component-cyan:	#00e5ff;
@color-atomic-purple:	#b388ff;
@color-surface-white:	#ffffff;
@color-interaction-yellow:	#ffeb3b;
@color-logic-black:	#202124;
@color-flow-orange:	#ff6d00;