Styles: Colours

Use the colour specifications and guidance in this section to create a clean, consistent, and accessible user interface in all Plant Parents products.

Quick Summary

Charcoal HEX #2F3E46 | RGB 47, 62, 70 | CMYK 33, 11, 0, 73

Deep Green: HEX #4E7E76 | RGB 78, 126, 118 | CMYK 38, 0, 6, 51

Leaf Green: HEX #90B6A1 | RGB 144, 182, 161 | CMYK 21, 0, 12, 29

Light Blue: HEX #A6D5DD | RGB 166, 213, 221 | CMYK 25, 4, 0, 13

Cream: HEX #F2F8F3 | RGB 242, 248, 243 | CMYK 2, 0, 2, 3

Ash Grey: HEX #ABB9B9 | RGB 171, 185, 185 | CMYK 8, 0, 0, 27

Font Colours: Use White or Cream on Charcoal, Deep Green, or other dark backgrounds. Use Charcoal on all other backgrounds and brand colours.

Colour Variables: Implement CSS variables to hold and use brand colours. View on Codepen.

Brand Colours

The following are Plant Parents' brand colours, and are to be used in all branded products. Each swatch listed contains the HEX, RGB, and CMYK codes to be used as needed.

Charcoal

HEX: #2F3E46
RGB: 47, 62, 70
CMYK: 33, 11, 0, 73

Deep Green

HEX: #4E7E76
RGB: 78, 126, 118
CMYK: 38, 0, 6, 51

Leaf Green

HEX: #90B6A1
RGB: 144, 182, 161
CMYK: 21, 0, 12, 29

Light Blue

HEX: #A6D5DD
RGB: 166, 213, 221
CMYK: 25, 4, 0, 13

Cream

HEX: #F2F8F3
RGB: 242, 248, 243
CMYK: 2, 0, 2, 3

Ash Grey

HEX: #ABB9B9
RGB: 171, 185, 185
CMYK: 8, 0, 0, 27

Contrast & Accessibility

When placing text on one of these colours, please prioritize contrast and accessibility by choosing the font colour displayed in each swatch: either charcoal, white, or cream. For more guidance on text specifications, visit the Typography section.

Using Colour Variables

When using the brand colours across your site, save development time and ensure consistency by using CSS variables. These are easily coded by selecting the root folder in css, then defining variables each containing the HEX code value for the colour. View on Codepen