CSS Components / Utilities / Color

Utilities: Color

Color utility classes allow you to determine the background, border, or foreground colors for your elements. Simply format a utility class using the color names shown below. For example:

Color utilities also include special suffixes for .u-{??}-current-color, .u-{??}-transparent, and .u-{??}-inherit.

Product Colors

Support Green
support-green 78a300
Explore Blue
explore-blue 30aabc
Gather Pink
gather-pink e7afa2
Guide Pink
guide-pink eb4962
Connect Red
connect-red eb6651
Chat Orange
chat-orange f79a3e
Talk Yellow
talk-yellow efc93d
Sell Gold
sell-gold d4ae5e

Primary Colors

grey-800 2f3941
grey-700 49545c
grey-600 68737d
grey-500 87929d
grey-400 c2c8cc
grey-300 d8dcde
grey-200 e9ebed
grey-100 f8f9f9
blue-800 0f3554
blue-700 144a75
blue-600 1f73b7
blue-500 337fbd
blue-400 5293c7
blue-300 adcce4
blue-200 cee2f2
blue-100 edf7ff
kale-800 012b30
kale-700 03363d
kale-600 04444d
kale-500 335d63
kale-400 56777a
kale-300 819a9e
kale-200 c1d6d9
kale-100 f5fbfc
red-800 681219
red-700 8c232c
red-600 cc3340
red-500 d93f4c
red-400 e35b66
red-300 f5b5ba
red-200 f5d5d8
red-100 fff0f1
green-800 0b3b29
green-700 186146
green-600 038153
green-500 228f67
green-400 5eae91
green-300 aecfc2
green-200 d1e8df
green-100 edf8f4
yellow-800 703b15
yellow-700 ad5e18
yellow-600 ed961c
yellow-500 f5a133
yellow-400 ffb648
yellow-300 fcdba9
yellow-200 fff0db
yellow-100 fff8ed

Secondary Colors

Secondary colors are meant to be used in icons, tags, status badges, and illustrations. Each color has a light and a dark weight, and each weight has a default (bright) and muted version. Muted colors are denoted by an "M" prefix on the weight (i.e. M400).

fuschia-600 a81897
fuschia-M600 a8458c
fuschia-400 d653c2
fuschia-M400 cf62a8
pink-600 d42054
pink-M600 b23a5d
pink-400 ec4d63
pink-M400 d57287
crimson-600 c72a1c
crimson-M600 b24a3c
crimson-400 e34f32
crimson-M400 cc6c5b
orange-600 bf5000
orange-M600 b35827
orange-400 de701d
orange-M400 d4772c
lemon-600 ffbb10
lemon-M600 c38f00
lemon-400 ffd424
lemon-M400 e7a500
lime-600 2e8200
lime-M600 47782c
lime-400 43b324
lime-M400 519e2d
mint-600 058541
mint-M600 2e8057
mint-400 00a656
mint-M400 299c66
teal-600 028079
teal-M600 3c7873
teal-400 02a191
teal-M400 2d9e8f
azure-600 1371d6
azure-M600 3a70b2
azure-400 3091ec
azure-M400 5f8dcf
royal-600 3353e2
royal-M600 4b61c3
royal-400 5d7df5
royal-M400 7986d8
purple-600 6a27b8
purple-M600 9358b0
purple-400 b552e2
purple-M400 b072cc

Playground