User-Centric AI Design System

Behavior Mint
#c1fba4
Pattern Cream
#fff7ec
Journey Indigo
#6457a6
Signal Coral
#ff847c
Intent Grey
#a5a5a5
Output White
#fafafa

Palet terdiri dari Lampu, Setengah gelap warna. Warna aksen Pattern Cream #fff7ec Dan Journey Indigo #6457a6. Palet memiliki suhu warna Netral, Dingin, Hangat.

Menurut kecerahan, palet ini dari #6457A6 (paling gelap) ke #FAFAFA (paling terang). Rentang kecerahan sedang.

Saturasi campuran — ada swatch redup dan aksen lebih cerah.

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

Sebagian besar sampel terbaca netral dalam suhu warna.

Kode HEX (diurutkan): #6457A6, #A5A5A5, #C1FBA4, #FAFAFA, #FF847C, #FFF7EC

Palette User-Centric AI Design System memiliki kombinasi warna kode 6:

HEX: #c1fba4, RGB: (193, 251, 164); HEX: #fff7ec, RGB: (255, 247, 236); HEX: #6457a6, RGB: (100, 87, 166)

HEX: #ff847c, RGB: (255, 132, 124); HEX: #a5a5a5, RGB: (165, 165, 165); HEX: #fafafa, RGB: (250, 250, 250)

Versi warna palet yang disederhanakan

Bayangan dari palegreen, Warna dari floralwhite, Warna dari slateblue, Bayangan dari salmon, Warna dari darkgrey, Bayangan dari whitesmoke

Skema warna diciptakan oleh colorslib

Lebih banyak palet dengan:

Kode warna dalam palet

User-Centric AI Design System kode warna HEX, informasi RGB dalam tabel

Warna	HEX	RGB	Nama	nama alternatif
#c1fba4	#c1fba4	RGB(193, 251, 164)	Behavior Mint	—
#fff7ec	#fff7ec	RGB(255, 247, 236)	Pattern Cream	—
#6457a6	#6457a6	RGB(100, 87, 166)	Journey Indigo	—
#ff847c	#ff847c	RGB(255, 132, 124)	Signal Coral	—
#a5a5a5	#a5a5a5	RGB(165, 165, 165)	Intent Grey	Rainy Grey
#fafafa	#fafafa	RGB(250, 250, 250)	Output White	Dr. White

Kontras Palet Warna

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

Warna teks	Warna latar belakang	Rasio Kontras
#c1fba4	#fff7ec	1.12
#c1fba4	#ff847c	1.99
#c1fba4	#fafafa	1.14
#fff7ec	#fafafa	1.01
#ff847c	#a5a5a5	1.03

Palet gambar User-Centric AI Design System png

--color-behavior-mint:	#c1fba4;
--color-pattern-cream:	#fff7ec;
--color-journey-indigo:	#6457a6;
--color-signal-coral:	#ff847c;
--color-intent-grey:	#a5a5a5;
--color-output-white:	#fafafa;

$color-behavior-mint:	#c1fba4;
$color-pattern-cream:	#fff7ec;
$color-journey-indigo:	#6457a6;
$color-signal-coral:	#ff847c;
$color-intent-grey:	#a5a5a5;
$color-output-white:	#fafafa;

@color-behavior-mint:	#c1fba4;
@color-pattern-cream:	#fff7ec;
@color-journey-indigo:	#6457a6;
@color-signal-coral:	#ff847c;
@color-intent-grey:	#a5a5a5;
@color-output-white:	#fafafa;