Color System

This color system is designed for a modern, professional UI, balancing boldness and elegance with a focus on accessibility.

Base

White

#FFFFFF

Black

#000000

Light Gray

#F2F2F2

Cool Gray

#E8EAF6

Sky Mist

#E8F1F8

Teal

#EFF8F8

Coral

#FFF9EF

Lilac

#F9F2FA

Mint

#F3FAF4

Charcoal Gray

#3A3A3A

Midnight Blue

#2A2C39

Deep Graphite

#1F1F25

True Black

#141414

Gray

100

#FAFAFA

200

#EDEDED

300

#D1D1D1

400

#B6B6B6

500

#9A9A9A

600

#7F7F7F

700

#646464

800

#494949

900

#2E2E2E

Purple (Primary Color)

100

#F0E9FC

200

#D9CFFA

300

#C1B5F7

400

#A99AF5

500

#5925DC

600

#481EB2

700

#371788

800

#270F5E

900

#190835

Amber (Secondary Color)

100

#FFF6E5

200

#FFE7BF

300

#FFD89A

400

#FFC975

500

#FFBA50

600

#CC9440

700

#997030

800

#664C20

900

#332610

Sky Blue (Secondary Color)

100

#E8F4FD

200

#CFE6FB

300

#B5D8F8

400

#9BC9F6

500

#80BAF3

600

#6692C2

700

#4D6B91

800

#344460

900

#1B2230

Teal (Secondary Color)

100

#E0F2F1

200

#B2DFDB

300

#4DB6AC

400

#26A69A

500

#009688

600

#00897B

700

#00796B

800

#00695C

900

#004D40

Coral (Secondary Color)

100

#FFF3E0

200

#FFE0B2

300

#FFAB91

400

#FF8A65

500

#FF7043

600

#FF5722

700

#E64A19

800

#D84315

900

#BF360C

Liilac (Secondary Color)

100

#F3E5F5

200

#E1BEE7

300

#CE93D8

400

#BA68C8

500

#AB47BC

600

#9C27B0

700

#7B1FA2

800

#6A1B9A

900

#4A148C

Mint (Secondary Color)

100

#E8F5E9

200

#C8E6C9

300

#81C784

400

#66BB6A

500

#4CAF50

600

#43A047

700

#388E3C

800

#2E7D32

900

#1B5E20

Error (Red Tone)

100

#FDEEEF

200

#F9C6C7

300

#F59D9E

400

#F17576

500

#ED4C4E

600

#BB3D3E

700

#892E2F

800

#581E1F

900

#290F0F

Warning (Orange Tone)

100

#FFF3E5

200

#FFE0B8

300

#FFCE8B

400

#FFBB5D

500

#FFA830

600

#CC8626

700

#99631C

800

#664113

900

#332209

Success (Green Tone)

100

#E9F9E8

200

#C7EFCA

300

#A5E5AC

400

#83DB8E

500

#61D170

600

#4DA55A

700

#397944

800

#254C2E

900

#122617