Colours (EMBL-EBI)
Core EMBL-EBI colours
Consistent colours help us achieve a consistent EMBL-EBI "look". You can use a standard reday-made colour palette that we provide or some projects may want to use a custom palette.
We provide these basic colour palettes that will be of use for many projects:
EBI Petrol
The default.Found at css/theme-embl-petrol.css
Services
Close to EBI Petrol.Found at css/theme-ebi-services-about.css
Research
Green.Found at css/theme-ebi-research.css
Training
Golden.Found at css/theme-ebi-training.css
Industry
Bright blue ocean.Found at css/theme-ebi-training.css
You can call these colours directly with these colour and background-colour classes:
.ebi-background { background: rgb(0,124,130); }
.services-background { background: rgb(2,100,105); }
.research-background { background: rgb(168,200,19); }
.training-background { background: rgb(233,180,0); }
.industry-background { background: rgb(0,134,180); }
.elixir-background { background: rgb(251,106,42); }
.white-background { background: rgb(255,255,255); }
.ebi-color { color: rgb(0,124,130); }
.services-color { color: rgb(2,100,105); }
.research-color { color: rgb(168,200,19); }
.training-color { color: rgb(233,180,0); }
.industry-color { color: rgb(0,134,180); }
.elixir-color { color: rgb(251,106,42); }
.white-color { color: rgb(255,255,255); }Note: we recommend using the RGB values (support is near-universal. The alpha, RGBA mode, is available from IE 9.)
Roll your own colors
If you wish to make your own colour palatte, see this set of directions /css/theme-readme-custom.txt
Colours (EMBL-EBI) HTML
<p>Consistent colours help us achieve a consistent EMBL-EBI "look". You can use a standard reday-made colour palette that we provide or some projects may want to use a custom palette.</p>
<p>We provide these basic colour palettes that will be of use for many projects:</p>
<p>
<div class="row small-up-1 medium-up-2 large-up-3" data-equalizer>
<div class="column ebi-background white-color" data-equalizer-watch>
<p><h4 class="white-color">EBI Petrol</h4> The default. <br/><small>Found at css/theme-embl-petrol.css</small></p>
</div>
<div class="column services-background white-color" data-equalizer-watch>
<p><h4 class="white-color">Services</h4> Close to EBI Petrol. <br/><small>Found at css/theme-ebi-services-about.css</small></p>
</div>
<div class="column research-background white-color" data-equalizer-watch>
<p><h4 class="white-color">Research</h4> Green. <br/><small>Found at css/theme-ebi-research.css</small></p>
</div>
<div class="column training-background white-color" data-equalizer-watch>
<p><h4 class="white-color">Training</h4> Golden. <br/><small>Found at css/theme-ebi-training.css</small></p>
</div>
<div class="column industry-background white-color" data-equalizer-watch>
<p><h4 class="white-color">Industry</h4> Bright blue ocean. <br/><small>Found at css/theme-ebi-training.css</small></p>
</div>
</div>
</p>
<p>You can call these colours directly with these colour and background-colour classes:</p>
<div class="callout"><pre>
.ebi-background { background: rgb(0,124,130); }
.services-background { background: rgb(2,100,105); }
.research-background { background: rgb(168,200,19); }
.training-background { background: rgb(233,180,0); }
.industry-background { background: rgb(0,134,180); }
.elixir-background { background: rgb(251,106,42); }
.white-background { background: rgb(255,255,255); }
.ebi-color { color: rgb(0,124,130); }
.services-color { color: rgb(2,100,105); }
.research-color { color: rgb(168,200,19); }
.training-color { color: rgb(233,180,0); }
.industry-color { color: rgb(0,134,180); }
.elixir-color { color: rgb(251,106,42); }
.white-color { color: rgb(255,255,255); }</pre></div>
<p>Note: we recommend using the RGB values (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility">support is near-universal</a>. The alpha, RGBA mode, is available from IE 9.)</p>
<h3>Roll your own colors</h3>
<p>If you wish to make your own colour palatte, see this set of directions <code>/css/theme-readme-custom.txt</code></p>
Colours (EMBL-EBI) Style
You can find the original source of the CSS as .scss
Colours (EMBL-EBI)
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.