k8o

ArteOdyssey

Neutral Color

グレースケールを元にした色、理由がない限りこの色を利用する

Foreground Color

Background Color

Border Color

Primitive Color

情緒的な役割を持つ色、強調やアクセントに利用する

Primary

Secondary

Semantic Color

機能的な役割を持つ色(情報、成功、警告、エラー)、利用者に色を用いて情報を届けたいときに利用する

Foreground Color

Background Color

Border Color

Base Color

デザインシステム全体で利用する基本色

white

white

gray

#fafafa

50

#f4f4f5

100

#e4e4e7

200

#d4d4d8

300

#a1a1aa

400

#71717a

500

#52525b

600

#3f3f46

700

#27272a

800

#18181b

900

red

#fef2f2

50

#fee2e2

100

#fecaca

200

#fca5a5

300

#f87171

400

#ef4444

500

#dc2626

600

#991919

700

#511111

800

#300c0c

900

pink

#fdf2f8

50

#fce7f3

100

#fbcfe8

200

#f9a8d4

300

#f472b6

400

#ec4899

500

#db2777

600

#a41752

700

#6d0e34

800

#45061f

900

purple

#faf5ff

50

#f3e8ff

100

#e9d5ff

200

#d8b4fe

300

#c084fc

400

#a855f7

500

#9333ea

600

#641ba3

700

#4a1772

800

#2f0553

900

cyan

#ecfeff

50

#cffafe

100

#a5f3fc

200

#67e8f9

300

#22d3ee

400

#06b6d4

500

#0891b2

600

#0c5c72

700

#134152

800

#072a38

900

blue

#eff6ff

50

#dbeafe

100

#bfdbfe

200

#a3cfff

300

#60a5fa

400

#3b82f6

500

#2563eb

600

#173da6

700

#1a3478

800

#14204a

900

teal

#f0fdfa

50

#ccfbf1

100

#99f6e4

200

#5eead4

300

#2dd4bf

400

#14b8a6

500

#0d9488

600

#0c5d56

700

#114240

800

#032726

900

green

#f0fdf4

50

#dcfce7

100

#bbf7d0

200

#86efac

300

#4ade80

400

#22c55e

500

#16a34a

600

#116932

700

#124a28

800

#042713

900

yellow

#fefce8

50

#fef9c3

100

#fef08a

200

#fde047

300

#facc15

400

#eab308

500

#ca8a04

600

#845209

700

#713f12

800

#422006

900

orange

#fff7ed

50

#ffedd5

100

#fed7aa

200

#fdba74

300

#fb923c

400

#f97316

500

#ea580c

600

#92310a

700

#6c2710

800

#3b1106

900