Semantic React Design Tokens

JSX Purple
#937dc2
Hook Green
#4ade80
Component Beige
#fff3e2
State Black
#212121
Render Sky
#b2e0ff
Theme Silver
#ececec

Palet terdiri dari Lampu, Gelap warna. Warna aksen Component Beige #fff3e2 Dan Render Sky #b2e0ff. Palet memiliki suhu warna Dingin, Netral.

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

Saturasi campuran — ada swatch redup dan aksen lebih cerah.

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

Secara keseluruhan suhu warna condong ke dingin.

Kode HEX (diurutkan): #212121, #4ADE80, #937DC2, #B2E0FF, #ECECEC, #FFF3E2

Palette Semantic React Design Tokens memiliki kombinasi warna kode 6:

HEX: #937dc2, RGB: (147, 125, 194); HEX: #4ade80, RGB: (74, 222, 128); HEX: #fff3e2, RGB: (255, 243, 226)

HEX: #212121, RGB: (33, 33, 33); HEX: #b2e0ff, RGB: (178, 224, 255); HEX: #ececec, RGB: (236, 236, 236)

Versi warna palet yang disederhanakan

Bayangan dari mediumpurple, Bayangan dari mediumspringgreen, Warna dari oldlace, Bayangan dari Hitam, Bayangan dari lightskyblue, Warna dari whitesmoke

Skema warna diciptakan oleh colorday

Lebih banyak palet dengan:

Kode warna dalam palet

Semantic React Design Tokens kode warna HEX, informasi RGB dalam tabel

Warna	HEX	RGB	Nama	nama alternatif
#937dc2	#937dc2	RGB(147, 125, 194)	JSX Purple	—
#4ade80	#4ade80	RGB(74, 222, 128)	Hook Green	—
#fff3e2	#fff3e2	RGB(255, 243, 226)	Component Beige	—
#212121	#212121	RGB(33, 33, 33)	State Black	Lead
#b2e0ff	#b2e0ff	RGB(178, 224, 255)	Render Sky	—
#ececec	#ececec	RGB(236, 236, 236)	Theme Silver	—

Kontras Palet Warna

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

Warna teks	Warna latar belakang	Rasio Kontras
#4ade80	#fff3e2	1.59
#4ade80	#b2e0ff	1.24
#4ade80	#ececec	1.47
#fff3e2	#b2e0ff	1.27
#fff3e2	#ececec	1.07
#b2e0ff	#ececec	1.18

Palet gambar Semantic React Design Tokens png

--color-jsx-purple:	#937dc2;
--color-hook-green:	#4ade80;
--color-component-beige:	#fff3e2;
--color-state-black:	#212121;
--color-render-sky:	#b2e0ff;
--color-theme-silver:	#ececec;

$color-jsx-purple:	#937dc2;
$color-hook-green:	#4ade80;
$color-component-beige:	#fff3e2;
$color-state-black:	#212121;
$color-render-sky:	#b2e0ff;
$color-theme-silver:	#ececec;

@color-jsx-purple:	#937dc2;
@color-hook-green:	#4ade80;
@color-component-beige:	#fff3e2;
@color-state-black:	#212121;
@color-render-sky:	#b2e0ff;
@color-theme-silver:	#ececec;