Color system

This is the color system we use at Contentful. There are 6 base colors, along with gray and black/white. Each color consists of 9 shades, ranging from 100 to 900.

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
#036FE3
--color-primary
colorPositive
#008539
--color-positive
colorNegative
#DA294A
--color-negative
colorWarning
#F07F23
--color-warning

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

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

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

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

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

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

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

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.

blue100
blue200
blue300
blue400
blue500
blue600
blue700
blue800
blue900
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray900
green100
green200
green300
green400
green500
green600
green700
green800
green900
orange100
orange200
orange300
orange400
orange500
orange600
orange700
orange800
orange900
purple100
purple200
purple300
purple400
purple500
purple600
purple700
purple800
purple900
red100
red200
red300
red400
red500
red600
red700
red800
red900
yellow100
yellow200
yellow300
yellow400
yellow500
yellow600
yellow700
yellow800
yellow900

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 gray100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray100
600 on 100
600 on 200
700 on 300
300 on 900
500 on white
500 on gray100
800 on 100
800 on 200
900 on 300
300 on 900
800 on white
800 on gray100

Help improve this page