Colours

Communication is key

Although we value an aesthetically pleasing use of colour, clear communication is our focus. We use colours to support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.

Accessibility

Accessibility is crucial and AA colour contrast must be achieved. It is up to the designer to ensure these standards are met but please refer to the accessibility guide for support. The colour system is designed to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for visitors who are colour blind or who have low vision. However, you should never convey information using colour alone.

Legend:

AA: Compatible with WCAG AA requirements
AAA: Compatible with WCAG AAA requirements
AA L: Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)

You can find more on WCAG requirements here

Brand Colours

This colour should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary colour is the colour displayed most frequently across your screens and components. Brand colours are extracted from the EEA logo in order to help users to easily identify the brand.

#007B6C EEA GREEN

#004B7F EEA BLUE

Shades

#C8FFF8

#A0E5DC

#78CAC0

#50B0A4

#289588

#007B6C

#005248

#A0D7FF

#47B3FF

#008FF5

#0079CF

#006BB8

#004B7F

#003052

Supplementary colours

These colours highlight or complement the primary colours. These are to be used sparingly to make the UI elements stand out. These colours can be used together together or separately.

#3D5265 AAA

#F9F9F9 AAA

ΕΕΑ main background colour is white but the secondary colours can also be used as background to compliment text elements or components.

You can use #F9F9F9 as background with #3D5265 text (10.44:1 AAA) or, you can use #3D5265 background with #F9F9F9 text (10.44:1 AAA)

Shades

#DAE8F4

#ACCAE5

#87A7C3

#6989A5

#4C677F

#3D5265

#2E3E4C

#FFFFFF

#F9F9F9

#E6E7E8

#BCBEC0

#747678

#323232

#000000

Core colours

#3D5265 Text colour

#FFFFFF Background colour

#007B6C Highlight (EEA Green)

Link colours

#006BB8 Default

#004B7F Hover

#753AAD Visited

#003052 Active

Discrete colours

#3D5265 Usually used with a small text style

#323232 Used with a background

State colours

These are the colours that communicate purpose. They help users convey messages. For example, Green has a positive connotation. We use Green to convey success, confirmation messages, etc.

#B83230 ERROR

#FF9933 WARNING

#007B6C SUCCESS

#004B7F INFO

Thematic Platforms

info

All thematic platforms use EEA Supplementary colours, state colours, link colours and discrete colours.

Biodiversity

Brand Colours

This colour should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary colour is the colour displayed most frequently across your screens and components. Brand colours are extracted from the Biodiversity logo in order to help users to easily identify the brand.

#289588

#FAC50D

Shades

#C8FFF8

#A0E5DC

#78CAC0

#50B0A4

#289588

#007B6C

#005248

#FEF6CD

#FBEC9B

#FAD936

#FAC50D

#FDAF20

#FF9933

#C35527

Core colours

#3D5265 Text colour

#FFFFFF Background colour

#005248 Elements

#289588 Highlight

Forest Information System

Brand Colours

This colour should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary colour is the colour displayed most frequently across your screens and components. Brand colours are extracted from the Forest information system logo in order to help users to easily identify the brand.

#007B6C

#005248

Shades

#C8FFF8

#A0E5DC

#78CAC0

#50B0A4

#289588

#007B6C

#005248

Core colours

#3D5265 Text colour

#FFFFFF Background colour

#005248 Elements

#007B6C Highlight

Wise Freshwater

Brand Colours

This colour should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary colour is the colour displayed most frequently across your screens and components. Brand colours are extracted from the Wise Freshwater logo in order to help users to easily identify the brand.

#0079CF

#004B7F

Shades

#A0D7FF

#47B3FF

#008FF5

#0079CF

#006BB8

#004B7F

#003052

Core colours

#3D5265 Text colour

#FFFFFF Background colour

#0079CF Elements

#004B7F Highlight

Wise Marine

Brand Colours

This colour should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary colour is the colour displayed most frequently across your screens and components. Brand colours are extracted from the Wise Marine logo in order to help users to easily identify the brand.

#004B7F

#0079CF

Shades

#A0D7FF

#47B3FF

#008FF5

#0079CF

#006BB8

#004B7F

#003052

Core colours

#3D5265 Text colour

#FFFFFF Background colour

#0079CF Elements

#004B7F Highlight

EEA complete colour palette

Not all colours have to be used - sometimes a simple colour scheme works best. Accessible text and background colour combinations are included and marked with their accesibility level.

#FFF6EC brown-0

#FFEDD8 brown-1

#E7BC91 brown-2

#BC8A5F brown-3

#8B5E34 brown-4

#603808 brown-5

#3D2201 brown-6

#EFEBF2 purple-0

#DFD6E7 purple-1

#BEADCE purple-2

#9E84B6 purple-3

#753AAD purple-4

#5C3285 purple-5

#3C096C purple-6

#FBEEF8 red-0

#F6DDF0 red-1

#E7B2C0 red-2

#D78890 red-3

#C65B59 red-4

#B83230 red-5

#5C1918 red-6

#FEF6CD yellow-0

#FBEC9B yellow-1

#FAD936 yellow-2

#FAC50D yellow-3

#FDAF20 yellow-4

#FF9933 yellow-5

#C35527 yellow-6

#C8FFF8 green-0

#A0E5DC green-1

#78CAC0 green-2

#50B0A4 green-3

#289588 green-4

#007B6C green-5

#005248 green-6

#A0D7FF blue-0

#47B3FF blue-1

#008FF5 blue-2

#0079CF blue-3

#006BB8 blue-4

#004B7F blue-5

#003052 blue-6

#DAE8F4 blue-grey-0

#ACCAE5 blue-grey-1

#87A7C3 blue-grey-2

#6989A5 blue-grey-3

#4C677F blue-grey-4

#3D5265 blue-grey-5

#2E3E4C blue-grey-6

#FFFFFF grey-0

#F9F9F9 grey-1

#E6E7E8 grey-2

#BCBEC0 grey-3

#747678 grey-4

#323232 grey-5

#000000 grey-6

Tools for creating colour palettes

You can use the following tools for creating colour wheels and additional shades for every main colour at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/

Colours for maps

For optional creation of additional colour shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/