Colors

Use color to signal structure, highlight or emphasize important information or elements, and display different states.

Every color from Orbit is available directly as a token, such as paletteInkLight and paletteProductNormal.

If you need more detailed color guidelines, checkout the general Color page. See especially the guidelines for the additional shades.

Product

Product Light
#ECF8F7
rgba(236, 248, 247, 1)
paletteProductLight
Product Normal
#00A58E
rgba(0, 165, 142, 1)
paletteProductNormal
Product Dark
#007F6D
rgba(0, 127, 109, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

White

White
#FFFFFF
rgba(255, 255, 255, 1)
paletteWhite

Cloud

Cloud Light
#F5F7F9
rgba(245, 247, 249, 1)
paletteCloudLight
Cloud Normal
#E8EDF1
rgba(232, 237, 241, 1)
paletteCloudNormal
Cloud Dark
#BAC7D5
rgba(186, 199, 213, 1)
paletteCloudDark

Ink

Ink Light
#697D95
rgba(105, 125, 149, 1)
paletteInkLight
Ink Normal
#4F5E71
rgba(79, 94, 113, 1)
paletteInkNormal
Ink Dark
#252A31
rgba(37, 42, 49, 1)
paletteInkDark

Green

Green Light
#F2F8F2
rgba(242, 248, 242, 1)
paletteGreenLight
Green Normal
#28A138
rgba(40, 161, 56, 1)
paletteGreenNormal
Green Dark
#2D7738
rgba(45, 119, 56, 1)
paletteGreenDark

Orange

Orange Light
#FEF7F1
rgba(254, 247, 241, 1)
paletteOrangeLight
Orange Normal
#DF7B00
rgba(223, 123, 0, 1)
paletteOrangeNormal
Orange Dark
#BA5D00
rgba(186, 93, 0, 1)
paletteOrangeDark

Red

Red Light
#FCF3F3
rgba(252, 243, 243, 1)
paletteRedLight
Red Normal
#D21C1C
rgba(210, 28, 28, 1)
paletteRedNormal
Red Dark
#970C0C
rgba(151, 12, 12, 1)
paletteRedDark

Blue

Blue Light
#F1F8FE
rgba(241, 248, 254, 1)
paletteBlueLight
Blue Normal
#0172CB
rgba(1, 114, 203, 1)
paletteBlueNormal
Blue Dark
#005AA3
rgba(0, 90, 163, 1)
paletteBlueDark