Skip to content

Habitat colours

Learn about the selection of colours available to use in Habitat experiences.

On this page

Colour palettes

Habitat’s selection of colours are divided into distinct palettes. The available palettes are Brand, Semantic and Monochrome.

Primary brand palette

Habitat’s core colours are white and black, with a general leaning towards white. The white and black colours are associated with Habitat by users, so it’s important to use these distinctive colours first and foremost.

Base#000000 rgb(0, 0, 0)
Dark#404040 rgb(64, 64, 64)
Light#F2F2F2 rgb(242, 242, 242)

Interaction palettes

The following colour palettes represent how the brand colours are used in interaction states.

Primary interaction palette

Default#000000 rgb(0, 0, 0)
Hover#383838 rgb(56, 56, 56)
Pressed#4C4C4C rgb(76, 76, 76)
Disabled#D8D8D8 rgb(216, 216, 216)

Secondary interaction palette

Default#FFFFFF rgb(255, 255, 255)
Hover#000000 10%rgba(0, 0, 0, 0.1)
Pressed#000000 20%rgba(0, 0, 0, 0.2)
Disabled#D8D8D8 rgb(216, 216, 216)

Monochrome palette

The monochome palette is a group of colours that can provide text contrast and neutrality to designs.

Black#000000 rgb(0, 0, 0)
Darker#262626 rgb(38, 38, 38)
Dark#404040 rgb(64, 64, 64)
Base#737373 rgb(115, 115, 115)
Light#D8D8D8 rgb(216, 216, 216)
Lighter#F2F2F2 rgb(242, 242, 242)
White#FFFFFF rgb(255, 255, 255)

Semantic palette

The semantic palette is a group of colours to communicate key messages throughout an experience. Use red for error messages, green for success messages, blue for important information, and yellow for warnings.

Error

Lighter#FBE6E6 rgb(251, 230, 230)
Light#DD2E2E rgb(221, 46, 46)
Base#D50000 rgb(213, 0, 0)
Dark#BD0000 rgb(189, 0, 0)
Darker#A50000 rgb(165, 0, 0)

Info

Lighter#E8F1FB rgb(232, 241, 251)
Light#428FDA rgb(66, 143, 218)
Base#1976D2 rgb(25, 118, 210)
Dark#1669BA rgb(22, 105, 186)
Darker#135CA3 rgb(19, 92, 163)

Success

Lighter#E6F4ED rgb(230, 244, 237)
Light#40A673 rgb(64, 166, 115)
Base#2E7D32 rgb(46, 125, 50)
Dark#296F2C rgb(41, 111, 44)
Darker#246127 rgb(36, 97, 39)

Warning

Lighter#FFFBE6 rgb(255, 251, 230)
Light#FFDD2E rgb(255, 221, 46)
Base#FFD600 rgb(255, 214, 0)
Dark#E2BE00 rgb(226, 190, 0)
Darker#C6A600 rgb(198, 166, 0)

Colour accessibility

To comply with the Web Content Accessibility Guidelines AA standard contrast ratios, choose colours from the Habitat palette that have sufficient colour contrast between them so that people with low vision can see and use our products.

Primary palette accessibility

When using base or darker as a background colour, only use Monochrome White (#FFFFFF) for text.

Do

Minimal contrast ratio: 4.5

Monochrome White
Don't

Fail

Monochrome Base

When using light or lighter as a background colour, only use Monochrome Darker for text.

Do

Minimal contrast ratio: 4.5

Monochrome Darker
Don't

Fail

Monochrome Lighter

Further reading

Was this page helpful?

Get in touch

We’re on hand to answer any questions you have or help you with your next project.
Email
Microsoft Teams
Slack