@ecl/generic-style-color

1.3.0 • Public • Published

Colour

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.

White
#FFFFFFF

Primary colours

The primary colours: blue, yellow and grey.

Only use colours to highlight important content or actions. Use sparingly.

EC Blue EC Yellow EC Grey
#004494 #ffd617 #404040
Used for navigational elements like links and buttons, but also as a background colour on the page header. 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. Grey is used for static text, soft backgrounds and dividers. We provide a grey colour palette.

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

EC Blue 120 EC Yellow 120 EC Grey 100
#003776 #F8AE21 #404040
EC Blue 110 EC Yellow 110 EC Grey 75
#003776 #FBC11D #707070
EC Blue 100 EC Yellow 100 EC Grey 50
#004494 #ffd617 #9F9F9F
EC Blue 75 EC Yellow 75 EC Grey 25
#4073AF #FFDE39 #CFCFCF
EC Blue 50 EC Yellow 50 EC Grey 15
#7FA1C9 #FFE879 #E3E3E3
EC Blue 25 EC Yellow 25 EC Grey 10
#BFD0E4 #FFF4BB #EBEBEB
Black White EC Grey 5
#000000 #FFFFFF #F5F5F5

Notification colours

EC Blue N EC Orange N EC Green N EC Red N
#006FB4 #F29527 #467A39 #DA2131
Blue for informative messages Orange for warnings Green for success messages Red for errors

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.

<style> .color { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid #eee; margin: auto; } </style>

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @ecl/generic-style-color

    Weekly Downloads

    99

    Version

    1.3.0

    License

    EUPL-1.1

    Unpacked Size

    11.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • papegaill
    • yhuard
    • kalin.chernev
    • weslito
    • emeryro
    • planctus