Colors overview

Semantic

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

colorPrimary

#0059C8

--color-primary

colorPositive

#006D23

--color-positive

colorNegative

#BD002A

--color-negative

colorWarning

#CC4500

--color-warning

colorTextDark

#111B2B

--color-text-dark

colorTextBase

#1B273A

--color-text-base

colorTextMid

#414D63

--color-text-mid

colorTextLight

#5A657C

--color-text-light

colorTextLightest

#67728A

--color-text-lightest

Gray

Gray is our main color used for typography, borders and element backgrounds.

gray100

#F7F9FA

--gray-100

gray200

#E7EBEE

--gray-200

gray300

#CFD9E0

--gray-300

gray400

#AEC1CC

--gray-400

gray500

#67728A

--gray-500

gray600

#5A657C

--gray-600

gray700

#414D63

--gray-700

gray800

#1B273A

--gray-800

gray900

#111B2B

--gray-900

colorElementDarkest

#67728A

--color-element-darkest

colorElementDark

#AEC1CC

--color-element-dark

colorElementMid

#CFD9E0

--color-element-mid

colorElementLight

#E7EBEE

--color-element-light

colorElementLightest

#F7F9FA

--color-element-lightest

Blue

Blue is our primary color and should be used when you want to highlight a primary action.

blue100

#E8F5FF

--blue-100

blue200

#CEECFF

--blue-200

blue300

#98CBFF

--blue-300

blue400

#40A0FF

--blue-400

blue500

#036FE3

--blue-500

blue600

#0059C8

--blue-600

blue700

#0041AB

--blue-700

blue800

#003298

--blue-800

blue900

#002A8E

--blue-900

colorBlueLightest

#E8F5FF

--color-blue-lightest

colorBlueLight

#98CBFF

--color-blue-light

colorBlueMid

#036FE3

--color-blue-mid

colorBlueBase

#0059C8

--color-blue-base

colorBlueDark

#0041AB

--color-blue-dark

Green

Green is used to highlight positive actions or messages. E.g. when showing a success message, a save action, or a marking a step as complete.

green100

#EAF9E8

--green-100

green200

#CDF3C6

--green-200

green300

#9ED696

--green-300

green400

#5DB057

--green-400

green500

#008539

--green-500

green600

#006D23

--green-600

green700

#00550C

--green-700

green800

#004700

--green-800

green900

#003F00

--green-900

colorGreenDark

#00550C

--color-green-dark

colorGreenBase

#006D23

--color-green-base

colorGreenMid

#008539

--color-green-mid

colorGreenLight

#9ED696

--color-green-light

colorGreenLightest

#EAF9E8

--color-green-lightest

Red

Red is used to highlight negative actions or messages. E.g. when performing a destructive action such as deleting content, for highlighting validation or application error messages, or for showing statuses with a negative context.

red100

#FFF2F2

--red-100

red200

#FFE0E0

--red-200

red300

#FFB1B2

--red-300

red400

#FF707D

--red-400

red500

#DA294A

--red-500

red600

#BD002A

--red-600

red700

#990017

--red-700

red800

#7F0010

--red-800

red900

#72000E

--red-900

colorRedDark

#990017

--color-red-dark

colorRedBase

#BD002A

--color-red-base

colorRedMid

#DA294A

--color-red-mid

colorRedLight

#FFB1B2

--color-red-light

colorRedLightest

#FFF2F2

--color-red-lightest

Purple

Purple is used sparingly as a generic highlight color. E.g. when highlighting premium value or trials.

purple100

#F7F2FF

--purple-100

purple200

#EDE3FF

--purple-200

purple300

#D1BBFF

--purple-300

purple400

#AE89FF

--purple-400

purple500

#8553E7

--purple-500

purple600

#6C3ECF

--purple-600

purple700

#5127B5

--purple-700

purple800

#3E16A4

--purple-800

purple900

#340E9C

--purple-900

colorPurpleDark

#5127B5

--color-purple-dark

colorPurpleBase

#6C3ECF

--color-purple-base

colorPurpleMid

#8553E7

--color-purple-mid

colorPurpleLight

#D1BBFF

--color-purple-light

colorPurpleLightest

#F7F2FF

--color-purple-lightest

Orange

Orange is used to highlight actions or messages which require attention but don't necessarily have a negative context. E.g. showing a draft/unpublished state, or showing a gentle warning message rather than an error message.

orange100

#FFF2E4

--orange-100

orange200

#FDE5C0

--orange-200

orange300

#FDB882

--orange-300

orange400

#F07F23

--orange-400

orange500

#CC4500

--orange-500

orange600

#B12D00

--orange-600

orange700

#892300

--orange-700

orange800

#731A00

--orange-800

orange900

#631C00

--orange-900

colorOrangeDark

#B12D00

--color-orange-dark

colorOrangeBase

#CC4500

--color-orange-base

colorOrangeMid

#F07F23

--color-orange-mid

colorOrangeLight

#FDE5C0

--color-orange-light

colorOrangeLightest

#FFF2E4

--color-orange-lightest

Yellow

Yellow is used very sparingly. Use only when other colors aren't applicable or are already taken in a specific context.

yellow100

#FEF9DF

--yellow-100

yellow200

#FFF6CC

--yellow-200

yellow300

#FFE993

--yellow-300

yellow400

#FFD960

--yellow-400

yellow500

#FFC835

--yellow-500

yellow600

#EAAF09

--yellow-600

yellow700

#B78300

--yellow-700

yellow800

#956300

--yellow-800

yellow900

#7F5200

--yellow-900

colorYellowDark

#956300

--color-yellow-dark

colorYellowBase

#EAAF09

--color-yellow-base

colorYellowMid

#FFC835

--color-yellow-mid

colorYellowLight

#FFD960

--color-yellow-light

colorYellowLightest

#FFF6CC

--color-yellow-lightest

Black

colorBlack

#0C141C

--color-black

White

colorWhite

#ffffff

--color-white

Accessibility

Black text (anything darker than gray-800) is WCAG AA accessible on shades ranging from 100 to 400, white text is accessible on colors from 500 to 900.

blue
100

blue
200

blue
300

blue
400

blue
500

blue
600

blue
700

blue
800

blue
900

gray
100

gray
200

gray
300

gray
400

gray
500

gray
600

gray
700

gray
800

gray
900

green
100

green
200

green
300

green
400

green
500

green
600

green
700

green
800

green
900

orange
100

orange
200

orange
300

orange
400

orange
500

orange
600

orange
700

orange
800

orange
900

purple
100

purple
200

purple
300

purple
400

purple
500

purple
600

purple
700

purple
800

purple
900

red
100

red
200

red
300

red
400

red
500

red
600

red
700

red
800

red
900

yellow
100

yellow
200

yellow
300

yellow
400

yellow
500

yellow
600

yellow
700

yellow
800

yellow
900

Combining shades

When combining multiple shades of the same color, keep to the following accessible combinations. The same combinations are possible across colors (with yellow being the only exception).

600 on
100

600 on
200

700 on
300

300 on
900

500 on white

500 on gray
100

600 on
100

600 on
200

700 on
300

300 on
900

500 on white

500 on gray
100

600 on
100

600 on
200

700 on
300

300 on
900

500 on white

500 on gray
100

600 on
100

600 on
200

700 on
300

300 on
900

500 on white

500 on gray
100

600 on
100

600 on
200

700 on
300

300 on
900

500 on white

500 on gray
100

800 on
100

800 on
200

900 on
300

300 on
900

800 on white

800 on gray
100

Data visualization colors

Data visualization colors are reserved exclusively for data components and should not be used for general UI elements (buttons, backgrounds, or borders).

Categorical

Use these colors for distinguishing between different data series. Follow the numbered sequence for maximum accessibility and visual distinction. The first six colors cover most use cases — categories beyond 5 are typically grouped into an "Other" bucket. Four additional overflow colors support up to 10 unique data series.

datavizCategorical1Default

#4269D0

--dataviz-categorical-1-default

datavizCategorical2Default

#A463F2

--dataviz-categorical-2-default

datavizCategorical3Default

#EFB118

--dataviz-categorical-3-default

datavizCategorical4Default

#6CC5B0

--dataviz-categorical-4-default

datavizCategorical5Default

#FF8AB7

--dataviz-categorical-5-default

datavizCategorical6Default

#9C6B4E

--dataviz-categorical-6-default

datavizCategorical7Default

#FF725C

--dataviz-categorical-7-default

datavizCategorical8Default

#004080

--dataviz-categorical-8-default

datavizCategorical9Default

#ADDC30

--dataviz-categorical-9-default

datavizCategorical10Default

#D6B4FC

--dataviz-categorical-10-default

Muted categorical (spotlighting)

When a user hovers over a data element, inactive series drop to 40% opacity. Use the muted variants to represent this interaction state.

datavizCategorical1Muted

#4269D0AA

--dataviz-categorical-1-muted

datavizCategorical2Muted

#A463F2AA

--dataviz-categorical-2-muted

datavizCategorical3Muted

#EFB118AA

--dataviz-categorical-3-muted

datavizCategorical4Muted

#6CC5B0AA

--dataviz-categorical-4-muted

datavizCategorical5Muted

#FF8AB7AA

--dataviz-categorical-5-muted

datavizCategorical6Muted

#9C6B4EAA

--dataviz-categorical-6-muted

datavizCategorical7Muted

#FF725CAA

--dataviz-categorical-7-muted

datavizCategorical8Muted

#004080AA

--dataviz-categorical-8-muted

datavizCategorical9Muted

#ADDC30AA

--dataviz-categorical-9-muted

datavizCategorical10Muted

#D6B4FCAA

--dataviz-categorical-10-muted

Sequential

Sequential scales visualize the magnitude or intensity of a single metric (e.g. heatmaps, density maps). Values run from light (low) to dark (high) in 5 steps. Map your minimum value to the 100 token and your maximum to the 900 token.

Blue

datavizSeqBlue100

#b5cbff

--dataviz-seq-blue-100

datavizSeqBlue300

#7c98fe

--dataviz-seq-blue-300

datavizSeqBlue500

#456cd3

--dataviz-seq-blue-500

datavizSeqBlue700

#0742a2

--dataviz-seq-blue-700

datavizSeqBlue900

#00186b

--dataviz-seq-blue-900

Purple

datavizSeqPurple100

#ffc9ff

--dataviz-seq-purple-100

datavizSeqPurple300

#d48ffd

--dataviz-seq-purple-300

datavizSeqPurple500

#9d5ceb

--dataviz-seq-purple-500

datavizSeqPurple700

#6c30ba

--dataviz-seq-purple-700

datavizSeqPurple900

#370089

--dataviz-seq-purple-900

Teal

datavizSeqTeal100

#a0fae4

--dataviz-seq-teal-100

datavizSeqTeal300

#6dc6b1

--dataviz-seq-teal-300

datavizSeqTeal500

#389480

--dataviz-seq-teal-500

datavizSeqTeal700

#026352

--dataviz-seq-teal-700

datavizSeqTeal900

#003527

--dataviz-seq-teal-900

Pink

datavizSeqPink100

#ffbeeb

--dataviz-seq-pink-100

datavizSeqPink300

#f37fad

--dataviz-seq-pink-300

datavizSeqPink500

#c35381

--dataviz-seq-pink-500

datavizSeqPink700

#932558

--dataviz-seq-pink-700

datavizSeqPink900

#5d002c

--dataviz-seq-pink-900

Semantic and structural

Semantic colors are reserved for delta badges indicating positive or negative trends. Never use them as categorical bars or lines within a chart. Gridline and axis colors provide structural context without competing for attention.

datavizChartGridline

#E7EBEE

--dataviz-chart-gridline

datavizAxisLabels

#67728A

--dataviz-axis-labels

datavizSemanticPositive

#006D23

--dataviz-semantic-positive

datavizSemanticNegative

#BD002A

--dataviz-semantic-negative

datavizSemanticWarning

#CC4500

--dataviz-semantic-warning

Color system

Colors overview

Semantic

Gray

Blue

Green

Red

Purple

Orange

Yellow

Black

White

Accessibility

Combining shades

Data visualization colors

Categorical

Muted categorical (spotlighting)

Sequential

Blue

Purple

Teal

Pink

Semantic and structural

Help improve this page