Your bookmarks

Colors / Palette

Colos is used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.

Every color from Orbit is available directly as token, e.g. paletteInkLight, paletteProductNormal, etc.

If you need more detailed color guidelines, check Color general page.

Product

Product Light
paletteProductLight
#ECF8F7
Product Light :hover
paletteProductLightHover
#D6F0EE
Product Light :active
paletteProductLightActive
#C0E8E4
Product Normal
paletteProductNormal
#00A991
Product Normal :hover
paletteProductNormalHover
#009882
Product Normal :active
paletteProductNormalActive
#008F7B
Product Dark
paletteProductDark
#007F6D
Product Darker
paletteProductDarker
#005C4E

White

White
paletteWhite
#FFFFFF
White :hover
paletteWhiteHover
#F5F7F9
White :active
paletteWhiteActive
#E5EAEF

Ink

Ink Lighter
paletteInkLighter
#BAC7D5
Ink Lighter :hover
paletteInkLighterHover
#A6B6C8
Ink Lighter :active
paletteInkLighterActive
#94A8BE
Ink Light
paletteInkLight
#5F738C
Ink Light :hover
paletteInkLightHover
#52647A
Ink Light :active
paletteInkLightActive
#465567
Ink Normal
paletteInkNormal
#252A31
Ink Normal :hover
paletteInkNormalHover
#181B20
Ink Normal :active
paletteInkNormalActive
#0B0C0F

Cloud

Cloud Light
paletteCloudLight
#F5F7F9
Cloud Light :hover
paletteCloudLightHover
#E5EAEF
Cloud Light :active
paletteCloudLightActive
#D6DEE6
Cloud Normal
paletteCloudNormal
#EFF2F5
Cloud Normal :hover
paletteCloudNormalHover
#DCE3E9
Cloud Normal :active
paletteCloudNormalActive
#CAD4DE
Cloud Dark
paletteCloudDark
#E8EDF1

Green

Green Light
paletteGreenLight
#EBF4EC
Green Light :hover
paletteGreenLightHover
#D7EAD9
Green Light :active
paletteGreenLightActive
#C3DFC7
Green Normal
paletteGreenNormal
#28A138
Green Normal :hover
paletteGreenNormalHover
#238B31
Green Normal :active
paletteGreenNormalActive
#1D7228
Green Dark
paletteGreenDark
#2D7738
Green Dark :hover
paletteGreenDarkHover
#276831
Green Dark :active
paletteGreenDarkActive
#1F5126
Green Darker
paletteGreenDarker
#235C2B

Orange

Orange Light
paletteOrangeLight
#FDF0E3
Orange Light :hover
paletteOrangeLightHover
#FAE2C7
Orange Light :active
paletteOrangeLightActive
#F8D3AB
Orange Normal
paletteOrangeNormal
#F9971E
Orange Normal :hover
paletteOrangeNormalHover
#F38906
Orange Normal :active
paletteOrangeNormalActive
#D67906
Orange Dark
paletteOrangeDark
#AB3307
Orange Dark :hover
paletteOrangeDarkHover
#972C07
Orange Dark :active
paletteOrangeDarkActive
#7A2405
Orange Darker
paletteOrangeDarker
#842706

Blue

Blue Light
paletteBlueLight
#E5F7FF
Blue Light :hover
paletteBlueLightHover
#C7EEFF
Blue Light :active
paletteBlueLightActive
#A8E5FF
Blue Normal
paletteBlueNormal
#0172CB
Blue Normal :hover
paletteBlueNormalHover
#0161AC
Blue Normal :active
paletteBlueNormalActive
#01508E
Blue Dark
paletteBlueDark
#005AA3
Blue Dark :hover
paletteBlueDarkHover
#004F8F
Blue Dark :active
paletteBlueDarkActive
#003E70
Blue Darker
paletteBlueDarker
#004680

Red

Red Light
paletteRedLight
#FAEAEA
Red Light :hover
paletteRedLightHover
#F4D2D2
Red Light :active
paletteRedLightActive
#EEB9B9
Red Normal
paletteRedNormal
#D21C1C
Red Normal :hover
paletteRedNormalHover
#B91919
Red Normal :active
paletteRedNormalActive
#9D1515
Red Dark
paletteRedDark
#970C0C
Red Dark :hover
paletteRedDarkHover
#890B0B
Red Dark :active
paletteRedDarkActive
#6D0909
Red Darker
paletteRedDarker
#760909