Theme colors
The main colors have been carefully curated to balance the updated visual identity system. The overall defined palette here is meant to allow a consistent relationship between different elements and communicate the sensation of a natural and vivid world worth protecting.
-
Brand
The highlights
HEX: #669900
-
Forest
The actions
HEX: #03755F
-
White
The canvas
HEX: #FFFFFF
-
Night
The words
HEX: #222222
Accessibility
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. The following color combinations demonstrate how our colors should be used together.
When pairing white on brand green, please follow proper guidelines according to Level AA of the WCAG standard.
For photography, be sure to darken the photo as needed to ensure legibility.
-
White on Brand green
-
White on Forest
-
Light grey on Night
-
Night on Mustard
-
Night on Light grey
-
White on grey
-
White on picture
-
Night on White
-
Grey on White
-
Sea blue on White
-
Red on White
Secondary colors
The secondary colours meant to cover a need to differentiate types of actions. The following colours will be used to create links, error messages and other highlighted messages.
The grey will be used in secondary texts to differentiate them from the main content. Lines, dividers, backgrounds etc can be designed with the light grey.
-
Sea blue
Links
HEX: #006FDA
-
Red
Error
HEX: #E01F21
-
Mustard
Secondary actions
HEX: #FFAF00
-
Grey
Secondary texts
HEX: #737373
-
Light grey
Layout elements
HEX: #DEDEDE
Visualizations
The following colors will be used in the different visualizations. Please, follow the recommended order of data categories when presenting diferent type of datasets in a graphic. If you are mapping numeric data, use a sequential or diverging color scheme. If you are mapping categorical data, use the qualitative scheme.
Qualitative scheme
-
#41AB5D
-
#004529
-
#FFCC3E
-
#9ED400
-
#F5E7A4
-
#FF6C2F
-
#A01200
-
#96E4EF
-
#006FDA
-
#B69FF4
-
#6A51A3
-
#F4A3A8
Sequential ramps
-
#FFC6C4
-
#F4A3A8
-
#E38191
-
#CC607D
-
#AD466C
-
#8B3058
-
#672044
-
#F2F0F7
-
#DADAEB
-
#BCBDDC
-
#9E9AC8
-
#807DBA
-
#6A51A3
-
#4A1486
-
#FFFFCC
-
#C7E9B4
-
#7FCDBB
-
#41B6C4
-
#1D91C0
-
#225EA8
-
#0C2C84
-
#FFFFCC
-
#D9F0A3
-
#ADDD8E
-
#78C679
-
#41AB5D
-
#238443
-
#005A32
-
#FFFFD4
-
#FEE391
-
#FEC44F
-
#FE9929
-
#EC7014
-
#CC4C02
-
#8C2D04
Divergent ramp
-
#41AB5D
-
#8BCC60
-
#D9EF8B
-
#FFFFAE
-
#FFC078
-
#FF6C2F
-
#A01200