Colour

Notice: This documentation has been deprecated

For new web site development and existing site improvement, please refer to the EBI Visual Framework (v1.1) documentation. All services are expected to use the new framework by February 2017.

A consistent approach to using colour way is another way in which we can achieve a consistent EBI "look". You can use a standard reday-made colour palette that we provide or some projects may want to use a custom palette.

In either case, the way that that palette is constructed and the way in which each colour from that palette is used will be the same for everyone.

Using a standard colour palette

If you are working on a service or a tool that exists in the "Services" area of the EBI website, your project web pages will automatically inherit the relevant colour stylesheet, and this will decide your palette.

Similarly, content for the other sections of the website will always inherit colours from the main stylesheet.

How to create and use a custom colour palette for your project

Select a single colour to start with. This might be the primary colour used in a logo, if you have one;
Go to the Color Scheme Designer website;
Enter the hex code for your colour by clicking on the "RGB" input [screenshot];
Choose the "accented analogic" preset;
Mouseover the "Export" item in the main menu (top-right) and select "Text...";
Click on the 'Color List' tab in the bottom left to display the colour codes
Take the values displayed in the text file and use them to customise the template below
Save this as [your-project-name]-colours.css and link to it in the <head> of your pages, after the other stylesheets

    /*
    *** TEMPLATE - please apply your custom values ***
    Colour palette: [project name] [main colour]
    Details: Accented Analogic from ColourSchemeDesigner
    http://colorschemedesigner.com/[custom URL]
    */
    /*
    #####  Color Palette by Color Scheme Designer
    #####  Palette URL: http://colorschemedesigner.com/[custom URL]
    #####  Color Space: RGB; 
    *** Primary Color:
    var. 1 = #P1 = rgb(x,y,z)
    var. 2 = #P2 = rgb(x,y,z)
    var. 3 = #P3 = rgb(x,y,z)
    var. 4 = #P4 = rgb(x,y,z)
    var. 5 = #P5 = rgb(x,y,z)
    *** Secondary Color A:
    var. 1 = #A1 = rgb(x,y,z)
    var. 2 = #A2 = rgb(x,y,z)
    var. 3 = #A3 = rgb(x,y,z)
    var. 4 = #A4 = rgb(x,y,z)
    var. 5 = #A5 = rgb(x,y,z)
    *** Secondary Color B:
    var. 1 = #B1 = rgb(x,y,z)
    var. 2 = #B2 = rgb(x,y,z)
    var. 3 = #B3 = rgb(x,y,z)
    var. 4 = #B4 = rgb(x,y,z)
    var. 5 = #B5 = rgb(x,y,z)
    *** Complementary Color:
    var. 1 = #C1 = rgb(x,y,z)
    var. 2 = #C2 = rgb(x,y,z)
    var. 3 = #C3 = rgb(x,y,z)
    var. 4 = #C4 = rgb(x,y,z)
    var. 5 = #C5 = rgb(x,y,z)
    #####  Generated by Color Scheme Designer (c) Petr Stanicek 2002-2010
    */
    /* Color
    ===================================================*/
    /* These style rules will over-ride the core EBI styles and apply 
    your custom colour palette in a consistent manner */
    /* Links */
    a:link,
    a:visited { border-bottom-color: #P1; }
    a:hover,
    a:focus,
    a:active {
    color: #P1;
    border-bottom: 1px solid #P1;
    }
    a.special:hover,
    a.special:focus,
    a.special:active {
    color:#P1;
    border-bottom: 3px double #P1;
    }
    a:link { color: #A3; }
    a:hover,
    a:focus,
    a:active { color: #B3; }
    a.special { background-color: #B5; }
    /* Headings */
    h1, h2, h3, h4, h5, h6 { color: #222222; }
    h1 { color: #P1; }
    h2 { color: #C2; }
    h1 a:link,
    h2 a:link,
    h3 a:link,
    h4 a:link,
    h5 a:link,
    h6 a:link,
    h1 a:visited,
    h2 a:visited,
    h3 a:visited,
    h4 a:visited,
    h5 a:visited,
    h6 a:visited {
    border-bottom-color: #P1;
    }
    /* Table heading cells */
    th { background-color: #B1; }
    /* Form submission button */
    input.submit {
    /* colours */	
    color: #fff;
    text-shadow: #P3 1px 1px;
    border-top: 1px solid #P5;    
    border-left: 1px solid #P5;
    border-right: 1px solid #P3;
    border-bottom: 1px solid #P3;
    background-image: -moz-linear-gradient(top, #P1, #P2); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ccc),color-stop(1, #P2)); 
    background-image: -webkit-linear-gradient(#P1, #P2); 
    background-image: linear-gradient(top, #P1, #P2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#P1', EndColorStr='#P2');
    }
    /* Define the basic colour your local masthead */
    div#local-masthead { background-color: #P5; }
    /* Colour the faux-underline for local menu items */
    div#local-masthead ul li a:hover,
    div#local-masthead ul li a:focus,
    div#local-masthead ul li a:active {
    border-bottom: 3px solid #P1;
    }

Template stylesheet for applying custom colours

An example colour palette based on EMBL green #71B360, feature here as "P1" (primary colour 1):

Colour palette