@ecl/generic-style-color

Background colour

White was chosen as the background colour of the website due to colour contrast and readability reasons.
Since one of the primary colours used throughout the website is the EC Yellow (#ffd617) depicted on the Primary colours section below, using a shade of grey or a tint of any other colour would greatly reduce the visual contrast between this colour and the background colour.

<tr><th>White</th></tr>

<tr><td>#FFFFFFF</td></tr>
<tr><td><div class="color" style="background-color:#fff"></div></td></tr>

Primary colours

The primary colours: blue, yellow and grey.
Only use colours to highlight important content or actions. Use sparingly.

<tr>
  <th>EC Blue</th>
  <th>EC Yellow</th>
  <th>EC Grey</th>
</tr>

<tr>
  <td>#004494</td>
  <td>#ffd617</td>
  <td>#404040</td>
</tr>
<tr>
  <td>Used for navigational elements like links and buttons, but also as a background colour on the page header.</td>
  <td>Yellow is used in elements to get attention, primary buttons, call-to-action and buttons. It is used only as a background colour in buttons and never as a text colour. Use sparingly.</td>
  <td>Grey is used for static text, soft backgrounds and dividers. We provide a grey colour palette.</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#004494"></div></td>
  <td><div class="color" style="background-color:#ffd617"></div></td>
  <td><div class="color" style="background-color:#404040"></div></td>
</tr>

Blue

Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Yellow

Yellow is commonly associated with joy, happiness, intellect, and energy.
Yellow is the most luminous of all the colours of the spectrum and is very effective for grabbing attention.
Yellow reinforces attention and allows us to guide our users through the interface.

Greys

Grey and black can appear neutral, objective or impartial.

Colour palettes

<tr>
  <th>EC Blue 120</th>
  <th>EC Yellow 120</th>
  <th>EC Grey 100</th>
</tr>

<tr>
  <td>#003776</td>
  <td>#F8AE21</td>
  <td>#404040</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#003776"></div></td>
  <td><div class="color" style="background-color:#F8AE21"></div></td>
  <td><div class="color" style="background-color:#404040"></div></td>
</tr>

<tr>
  <th>EC Blue 110</th>
  <th>EC Yellow 110</th>
  <th>EC Grey 75</th>
</tr>

<tr>
  <td>#003776</td>
  <td>#FBC11D</td>
  <td>#707070</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#003776"></div></td>
  <td><div class="color" style="background-color:#FBC11D"></div></td>
  <td><div class="color" style="background-color:#707070"></div></td>
</tr>

<tr>
  <th>EC Blue 100</th>
  <th>EC Yellow 100</th>
  <th>EC Grey 50</th>
</tr>

<tr>
  <td>#004494</td>
  <td>#ffd617</td>
  <td>#9F9F9F</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#004494"></div></td>
  <td><div class="color" style="background-color:#ffd617"></div></td>
  <td><div class="color" style="background-color:#9F9F9F"></div></td>
</tr>

<tr>
  <th>EC Blue 75</th>
  <th>EC Yellow 75</th>
  <th>EC Grey 25</th>
</tr>

<tr>
  <td>#4073AF</td>
  <td>#FFDE39</td>
  <td>#CFCFCF</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#4073AF"></div></td>
  <td><div class="color" style="background-color:#FFDE39"></div></td>
  <td><div class="color" style="background-color:#CFCFCF"></div></td>
</tr>

<tr>
  <th>EC Blue 50</th>
  <th>EC Yellow 50</th>
  <th>EC Grey 15</th>
</tr>

<tr>
  <td>#7FA1C9</td>
  <td>#FFE879</td>
  <td>#E3E3E3</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#7FA1C9"></div></td>
  <td><div class="color" style="background-color:#FFE879"></div></td>
  <td><div class="color" style="background-color:#E3E3E3"></div></td>
</tr>

<tr>
  <th>EC Blue 25</th>
  <th>EC Yellow 25</th>
  <th>EC Grey 10</th>
</tr>

<tr>
  <td>#BFD0E4</td>
  <td>#FFF4BB</td>
  <td>#EBEBEB</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#BFD0E4"></div></td>
  <td><div class="color" style="background-color:#FFF4BB"></div></td>
  <td><div class="color" style="background-color:#EBEBEB"></div></td>
</tr>

<tr>
  <th>Black</th>
  <th>White</th>
  <th>EC Grey 5</th>
</tr>

<tr>
  <td>#000000</td>
  <td>#FFFFFF</td>
  <td>#F5F5F5</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#000000"></div></td>
  <td><div class="color" style="background-color:#FFFFFF"></div></td>
  <td><div class="color" style="background-color:#F5F5F5"></div></td>
</tr>

Notification colours

<tr>
  <th>EC Blue N</th>
  <th>EC Orange N</th>
  <th>EC Green N</th>
  <th>EC Red N</th>
</tr>

<tr>
  <td>#006FB4</td>
  <td>#F29527</td>
  <td>#467A39</td>
  <td>#DA2131</td>
</tr>
<tr>
  <td><div class="color" style="background-color:#006FB4"></div></td>
  <td><div class="color" style="background-color:#F29527"></div></td>
  <td><div class="color" style="background-color:#467A39"></div></td>
  <td><div class="color" style="background-color:#DA2131"></div></td>
</tr>
<tr>
  <td>Blue for informative messages</td>
  <td>Orange for warnings</td>
  <td>Green for success messages</td>
  <td>Red for errors</td>
</tr>

Colour contrast

Text should always be presented in black or "EC blue" over a white background.
The only exception to this rule are is the Page header, some Buttons styles and some Listings components.
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet WCAG standards, text and interactive elements should have a colour contrast ratio of at least WCAG 2 AA Compliant (18pt+). This ensures that viewers who cannot see the full colour spectrum are able to read the text. The options below offer colour palette combinations that fall within the range of Section 508 compliant foreground/background colour contrast ratios. To ensure that text remains accessible, use only these permitted colour combinations.
There are a number of online colour contrast checkers that should be used to validate designs before they are published.