Colours
Brand specification / Digital / v1
European blue for actions. Neutrals for the words. Purposeful colour for feedback.
Primary / EU blue base
EU website blue
#0E47CB · RGB 14, 71, 203
Emblem reference
Reserved for the EU flag
The emblem uses a different blue. Its colours stay fixed in the logotype.
Colour in context
Temporary experiments · Approved values stay fixed
i12e / infrastructure
A clear view of what matters
Good infrastructure starts with clear choices. Use colour to show what people can do, what needs attention, and what has changed.
Supporting text adds context without competing with the main message.
A labelled field with an identifiable boundary.
Success Your changes are ready.
Warning Review this setting before continuing.
Error A required value is missing.
Information This is a demonstration of the palette.
View all text and boundary checks
| Combination | Contrast | Target | Result |
|---|
Checks cover the explicit colour pairs in this sample. They do not certify whole-page accessibility. Decorative dividers have no contrast target.
01 / Fixed values
The palette
Five colour scales derived from one EU-blue spectrum with evenly spaced OKLCH lightness, alongside the existing neutral scale. Each fixed base colour is shown separately. Select a HEX value or RGB button to copy it.
These shared palettes supply the interface samples, colour roles, comparisons and theme exports throughout the design references.
Blue signals action
EU blue remains exactly #0E47CB as the fixed base. Its colour is independent of the shade numbers used to organise the spectrum.
Neutrals support reading
Use white and grey surfaces, charcoal body text, and readable secondary text. Decorative lines should remain quiet; input boundaries need stronger contrast.
Supporting colour families
Green, yellow / amber, red and information blue-green each have a spectrum derived from EU blue. The neutral scale and the flag colours keep their existing values.
Each coloured scale keeps its base hue and runs from 98% to 24% OKLCH lightness in eleven evenly spaced shades. L shows the target lightness; shade numbers identify positions in the scale. This range keeps the dark end visibly coloured. Base colours remain exact, independently of the numbered shades.
All five families use the same calculation: first derive each shade's lightness and colour intensity from the original EU blue, then rotate its hue for the family. Reduce colour intensity only where needed to fit sRGB, keeping lightness and hue fixed, and round to HEX at the end. This gives the scales a consistent fade; pale yellows are softer and dark yellows appear brown. Check contrast when choosing text and background combinations.
02 / Approved assignments
Give each colour a job
Both appearances use the same palette. The roles choose shades for their surroundings. Primary buttons keep the brand blue in both modes; dark links and button outlines use lighter shades.
| Role / CSS variable | Light | Dark |
|---|
Normal text requires at least 4.5:1; essential boundaries require 3:1. Main text has stronger contrast. Links stay underlined, including visited links. Focus uses a 2px outline with a 2px surface-coloured gap.
03 / Independent check
Compare two colours
Choose palette values or enter custom HEX colours. This comparison does not change the playground or exported themes.
Colour changes what we see.
Read this paragraph to judge the pairing at a normal text size. The numerical result measures contrast, not personal preference.
Aa Bb Cc · 0123456789
04 / Use the specification
Copy & export
Copy a complete theme, including every fixed palette value and both appearances. Experiments are exported only when you explicitly select them.
05 / Provenance
Sources & decisions
Official EU interface and emblem guidance cover different uses. The interface blue is #0E47CB. The emblem retains #003399 and #FFCC00. These documented differences do not imply a website is disregarding the emblem specification.
- EU Publications Office: links and main buttons — the #0E47CB interface reference.
- Europa Component Library, EU theme v5.2.1 — the fixed EU-blue base reference. The spectra here are derived from that base in OKLCH.
- Interinstitutional Style Guide: the European emblem — the flag’s blue and yellow.
- W3C: text contrast, non-text contrast, and use of colour — contrast thresholds and meaning beyond colour.
- Tailwind CSS theme variables and manual dark mode — export format checked against v4.3.3.
Reference decisions verified 6 September 2026. Follow the system appearance, with light as the fallback; manual theme switches and experiments last only until reload. The shared stylesheet is the source of the displayed values.