Colors

Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.1 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.

Primary colors

These are the main colors that make up the majority of the colors used in the design system.

Gray

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

AA 4.84

25

#FCFCFD

AA 4.63

50

#F9FAFB

AA 4.49

100

#F2F4F7

3.99

200

#E4E7EC

1.48

300

#D0D5DD

2.58

400

#98A2B3

AA 4.95

500

#667085

AAA

600

#475467

AAA

700

#344054

AAA

800

#1D2939

AAA

900

#101828

AAA

950

#0C111D

Brand

The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.

AA 6.39

25

#FCFAFF

AA 6.16

50

#F9F5FF

AA 5.74

100

#F4EBFF

AA 4.93

200

#E9D7FE

1.70

300

#D6BBFB

2.49

400

#B692F6

3.33

500

#9E77ED

AA 4.96

600

#7F56D9

AA 6.63

700

#6941C6

AAA

800

#53389E

AAA

900

#42307D

AAA

950

#2C1C5F

Error

Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.

AA 6.4

25

#FFFBFA

AA 6.06

50

#FEF3F2

AA 5.4

100

#FEE4E2

AA 4.56

200

#FECDCA

1.95

300

#FDA29B

2.78

400

#F97066

3.76

500

#F04438

AA 4.82

600

#D92D20

AA 6.60

700

#B42318

AAA

800

#912018

AAA

900

#7A271A

AAA

950

#55160C

Warning

Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.

AA 5.28

25

#FFFCF5

AA 5.17

50

#FFFAEB

AA 4.75

100

#FEF0C7

4.15

200

#FEDF89

1.54

300

#FEC84B

1.84

400

#FDB022

2.34

500

#F79009

3.49

600

#DC6803

AA 5.4

700

#B54708

AAA

800

#93370D

AAA

900

#7A2E0E

AAA

950

#4E1D09

Success

Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.

AA 5.31

25

#F6FEF9

AA 5.17

50

#ECFDF3

AA 4.79

100

#D1FADF

4.24

200

#A6F4C5

1.52

300

#6CE9A6

1.91

400

#32D583

2.63

500

#12B76A

3.74

600

#039855

AA 5.44

700

#027A48

AAA

800

#05603A

AAA

900

#054F31

AAA

950

#053321

Secondary colors

Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.

Blue gray

AA 6.07

25

#FCFCFD

AA 5.91

50

#F8F9FC

AA 5.29

100

#EAECF5

3.91

200

#C8CCE5

2.39

300

#9EA5D1

4.01

400

#717BBC

AA 6.24

500

#4E5BA6

AAA

600

#3E4784

AAA

700

#363F72

AAA

800

#293056

AAA

900

#101323

AAA

950

#0D0F1C

Blue light

AA 5.60

25

#F5FBFF

AA 5.48

50

#F0F9FF

AA 5.09

100

#E0F2FE

4.39

200

#B9E6FE

1.65

300

#7CD4FD

2.10

400

#36BFFA

2.77

500

#0BA5EC

4.00

600

#0086C9

AA 5.85

700

#026AA2

AAA

800

#065986

AAA

900

#0B4A6F

AAA

950

#062C41

Blue

AA 5.68

25

#F5FAFF

AA 5.55

50

#EFF8FF

AA 4.78

100

#D1E9FF

4.17

200

#B2DDFF

1.77

300

#84CAFF

2.32

400

#53B1FD

3.24

500

#2E90FA

AA 4.57

600

#1570EF

AA 5.97

700

#175CD3

AAA

800

#1849A9

AAA

900

#194185

AAA

950

#102A56

Indigo

AAA

25

#F5F8FF

AAA

50

#EEF4FF

AA 6.71

100

#E0EAFF

AA 5.63

200

#C7D7FE

1.88

300

#A4BCFD

2.70

400

#8098F9

4.03

500

#6172F3

AA 6.10

600

#444CE7

AAA

700

#3538CD

AAA

800

#2D31A6

AAA

900

#2D3282

AAA

950

#1F235B

Purple

AAA

25

#FAFAFF

AAA

50

#F4F3FF

AA 6.46

100

#EBE9FE

AA 5.49

200

#D9D6FE

1.89

300

#BDB4FE

2.84

400

#9B8AFB

AA 4.53

500

#7A5AF8

AA 6.15

600

#6938EF

AAA

700

#5925DC

AAA

800

#4A1FB8

AAA

900

#3E1C96

AAA

950

#27115F

Pink

AA 5.47

25

#FEF6FB

AA 5.32

50

#FDF2FA

AA 4.94

100

#FCE7F6

4.21

200

#FCCEEE

1.80

300

#FAA7E0

2.60

400

#F670C7

3.37

500

#EE46BC

4.43

600

#DD2590

AA 5.81

700

#C11574

AAA

800

#9E165F

AAA

900

#851651

AAA

950

#4E0D30

Rosé

AA 5.42

25

#FFF5F6

AA 5.29

50

#FFF1F3

AA 4.84

100

#FFE4E8

4.12

200

#FECDD6

1.89

300

#FEA3B4

2.68

400

#FD6F8E

3.63

500

#F63D68

AA 4.61

600

#E31B54

AA 6.15

700

#C01048

AAA

800

#A11043

AAA

900

#89123E

AAA

950

#510B24

Orange

AA 5.31

25

#FFFAF5

AA 5.15

50

#FFF6ED

AA 4.72

100

#FFEAD5

4.21

200

#FDDCAB

1.78

300

#FEB273

2.45

400

#FD853A

3.01

500

#FB6514

3.78

600

#EC4A0A

AA 5.51

700

#C4320A

AAA

800

#9C2A10

AAA

900

#7E2410

AAA

950

#511C10

The ultimate Figma UI kit and design system

www.untitledui.com

© 2024 Untitled UI