Wondering what’s next for npm?Check out our public roadmap! »

    @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.

    Install

    npm i @ecl/generic-style-color

    DownloadsWeekly Downloads

    95

    Version

    1.3.0

    License

    EUPL-1.1

    Unpacked Size

    11.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar