Colour
From first light to the last swim
Our palette comes straight from a day on the coast: the sun going down, the harbour at noon, the sky after a swim and the deep blue of a summer night. Warm, but never loud.
Primary palette
Four colours do most of the work
Click a value to copy it. Use the CMYK values on coated paper and the Pantone references for signage, textiles and merchandise.
Supporting palette
Colours for warmth and detail
Use these in illustrations, tiles, charts and backgrounds for quieter content. They never replace Sunset as the accent.
Proportion
Mostly light, a little sun
A typical Onda layout is mostly Shell and Night, with Sunset as the one accent that draws the eye. Supporting colours appear in small doses. If a page feels orange, there's too much Sunset.
- Shell 38% · Backgrounds and space
- Night 20% · Text, logo and dark panels
- Sunset 16% · The one accent: buttons, highlights
- Harbour 12% · Links, sea, information panels
- Sky 6% · Light panels and maps
- Apricot 4% · Warmth behind photos and quotes
- Lemon 2% · Tiny highlights only
- Olive 2% · Nature and sustainability
Accessibility
Pairs that pass
We follow WCAG 2.2 AA: at least 4.5:1 for body text and 3:1 for large text (24 px, or 19 px bold) and icons. The ratios below are calculated live — try your own text, or swap the colours. The last two pairs fail on purpose.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Contrast is calculated with the WCAG 2.2 formula. AA: at least 4.5:1 for body text and 3:1 for large text (24 px, or 19 px bold); AAA: 7:1.
- Use Night for all body text, on Shell, white, Sky or Apricot.
- Use Sunset for one thing per screen: the main button, a highlight or a headline.
- Pair Harbour with Shell text for calm, informative panels.
- Don't set small white or Shell text on Sunset — it fails contrast.
- Don't use Lemon for text or large backgrounds.
- Don't create new tints, gradients or neon versions of our colours.
Details