Colours

The colour palette is designed to support a flexible, modular visual style that feels connected across EC and EU websites and platforms. The intent of the palette is to convey a united and open European spirit, and leave users feeling welcome and in good hands.

Main colours

Status colours

Color modes

Color modes offer an extra layer of flexibility. Several components react to these color modes, and apply them to different elements.

To use a color color mode, simply add the corresponding CSS class to any element on the page. CSS variables will be automatically updated.

Note: if a color in not defined in a color mode, it means that the default color mode value is used.

Default

Additional colors

1. Surface-brand--ecl-color-surface-brandCOPY
2. Surface-inverted--ecl-color-surface-invertedCOPY
3. Surface-transparent-70--ecl-color-surface-transparent-70COPY
4. Surface-primary-lowest--ecl-color-surface-primary-lowestCOPY
5. Surface-primary-low-0--ecl-color-surface-primary-low-0COPY
6. Surface-primary-low-1--ecl-color-surface-primary-low-1COPY
7. Surface-primary-medium--ecl-color-surface-primary-mediumCOPY
8. Surface-primary--ecl-color-surface-primaryCOPY
9. Surface-primary-high--ecl-color-surface-primary-highCOPY
10. Surface-primary-highest--ecl-color-surface-primary-highestCOPY
11. Surface-secondary-low--ecl-color-surface-secondary-lowCOPY
12. Surface-secondary-medium-0--ecl-color-surface-secondary-medium-0COPY
13. Surface-secondary-medium-1--ecl-color-surface-secondary-medium-1COPY
14. Surface-secondary--ecl-color-surface-secondaryCOPY
15. Surface-secondary-high--ecl-color-surface-secondary-highCOPY
16. Surface-secondary-highest--ecl-color-surface-secondary-highestCOPY
17. Surface-neutral-lowest--ecl-color-surface-neutral-lowestCOPY
18. Surface-neutral-low--ecl-color-surface-neutral-lowCOPY
19. Surface-neutral-medium--ecl-color-surface-neutral-mediumCOPY
20. Surface-neutral--ecl-color-surface-neutralCOPY
21. Surface-grey-low-0-transparent--ecl-color-surface-grey-low-0-transparentCOPY
22. Surface-grey-low-0--ecl-color-surface-grey-low-0COPY
23. Surface-grey-low-1--ecl-color-surface-grey-low-1COPY
24. Surface-grey-medium--ecl-color-surface-grey-mediumCOPY
25. Surface-grey-highest-0--ecl-color-surface-grey-highest-0COPY
26. Surface-grey-highest-1-transparent--ecl-color-surface-grey-highest-1-transparentCOPY
27. Surface-grey-highest-2-transparent--ecl-color-surface-grey-highest-2-transparentCOPY
28. Surface-status-error-lowest--ecl-color-surface-status-error-lowestCOPY
29. Surface-status-error--ecl-color-surface-status-errorCOPY
30. Surface-status-warning-lowest--ecl-color-surface-status-warning-lowestCOPY
31. Surface-status-warning--ecl-color-surface-status-warningCOPY
32. Surface-status-success-lowest--ecl-color-surface-status-success-lowestCOPY
33. Surface-status-success--ecl-color-surface-status-successCOPY
34. Surface-status-info-lowest--ecl-color-surface-status-info-lowestCOPY
35. Surface-status-info--ecl-color-surface-status-infoCOPY

1. On-surface-brand--ecl-color-on-surface-brandCOPY
2. On-surface-inverted--ecl-color-on-surface-invertedCOPY
3. On-surface-primary--ecl-color-on-surface-primaryCOPY
4. On-surface-primary-highest--ecl-color-on-surface-primary-highestCOPY
5. On-surface-secondary-medium--ecl-color-on-surface-secondary-mediumCOPY
6. On-surface-secondary-highest--ecl-color-on-surface-secondary-highestCOPY
7. On-surface-neutral-low--ecl-color-on-surface-neutral-lowCOPY
8. On-surface-neutral-medium--ecl-color-on-surface-neutral-mediumCOPY
9. On-surface-neutral-highest--ecl-color-on-surface-neutral-highestCOPY
10. On-surface-grey-low-transparent--ecl-color-on-surface-grey-low-transparentCOPY
11. On-surface-grey-low--ecl-color-on-surface-grey-lowCOPY
12. On-surface-grey-medium--ecl-color-on-surface-grey-mediumCOPY
13. On-surface-grey--ecl-color-on-surface-greyCOPY
14. On-surface-status-error--ecl-color-on-surface-status-errorCOPY
15. On-surface-status-warning--ecl-color-on-surface-status-warningCOPY
16. On-surface-status-success--ecl-color-on-surface-status-successCOPY
17. On-surface-status-info--ecl-color-on-surface-status-infoCOPY

1. Border-brand--ecl-color-border-brandCOPY
2. Border-on-brand--ecl-color-border-on-brandCOPY
3. Border-inverted-low-transparent--ecl-color-border-inverted-low-transparentCOPY
4. Border-inverted--ecl-color-border-invertedCOPY
5. Border-primary-medium--ecl-color-border-primary-mediumCOPY
6. Border-primary--ecl-color-border-primaryCOPY
7. Border-primary-highest--ecl-color-border-primary-highestCOPY
8. Border-neutral-low--ecl-color-border-neutral-lowCOPY
9. Border-neutral--ecl-color-border-neutralCOPY
10. Border-neutral-high--ecl-color-border-neutral-highCOPY
11. Border-neutral-highest--ecl-color-border-neutral-highestCOPY
12. Border-grey-lowest--ecl-color-border-grey-lowestCOPY
13. Border-grey-low--ecl-color-border-grey-lowCOPY
14. Border-grey-low-300--ecl-color-border-grey-low-300COPY
15. Border-grey-medium--ecl-color-border-grey-mediumCOPY
16. Border-grey--ecl-color-border-greyCOPY
17. Border-status-error--ecl-color-border-status-errorCOPY
18. Border-status-warning--ecl-color-border-status-warningCOPY
19. Border-status-success--ecl-color-border-status-successCOPY
20. Border-status-info--ecl-color-border-status-infoCOPY

Blue

CSS class: ecl-color-mode--blue

Green dark

CSS class: ecl-color-mode--green-dark

Orange

CSS class: ecl-color-mode--orange

Green

CSS class: ecl-color-mode--green

Purple

CSS class: ecl-color-mode--purple

Blue navy

CSS class: ecl-color-mode--blue-navy

Blue electric

CSS class: ecl-color-mode--blue-electric

Blue ocean

CSS class: ecl-color-mode--blue-ocean

Green lemon

CSS class: ecl-color-mode--green-lemon

Green pine

CSS class: ecl-color-mode--green-pine

Warm grey

CSS class: ecl-color-mode--warm-grey

Red crayola

CSS class: ecl-color-mode--red-crayola

Yellow gold

CSS class: ecl-color-mode--yellow-gold

Purple violet

CSS class: ecl-color-mode--purple-violet

Red tomato

CSS class: ecl-color-mode--red-tomato