Kleuren
Van het eerste licht tot de laatste duik
Ons palet komt rechtstreeks uit een dag aan de kust: de ondergaande zon, de haven rond het middaguur, de lucht na een duik en het diepe blauw van een zomernacht. Warm, maar nooit schreeuwerig.
Primair palet
Vier kleuren doen het meeste werk
Klik op een waarde om die te kopiëren. Gebruik de CMYK-waarden op gestreken papier en de Pantone-referenties voor bewegwijzering, textiel en merchandise.
Ondersteunend palet
Kleuren voor warmte en detail
Gebruik deze in illustraties, vlakken, grafieken en achtergronden voor rustigere content. Ze vervangen Sunset nooit als accent.
Verhouding
Vooral licht, een beetje zon
Een typisch Onda-ontwerp is vooral Shell en Night, met Sunset als het ene accent dat de blik trekt. Ondersteunende kleuren gebruik je in kleine doses. Voelt een pagina oranje, dan zit er te veel Sunset in.
- Shell 38% · Achtergronden en ruimte
- Night 20% · Tekst, logo en donkere vlakken
- Sunset 16% · Het ene accent: knoppen, highlights
- Harbour 12% · Links, zee, informatievlakken
- Sky 6% · Lichte vlakken en kaarten
- Apricot 4% · Warmte achter foto's en citaten
- Lemon 2% · Alleen kleine accenten
- Olive 2% · Natuur en duurzaamheid
Toegankelijkheid
Combinaties die werken
We volgen WCAG 2.2 AA: minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst (24 px, of 19 px vet) en iconen. De verhoudingen hieronder worden live berekend: probeer je eigen tekst of draai de kleuren om. De laatste twee combinaties zakken met opzet.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Pa’s wijze lynx bezag vroom het fikse aquaduct.
Contrast berekend met de WCAG 2.2-formule. AA: minstens 4,5:1 voor broodtekst en 3:1 voor grote tekst (24 px, of 19 px vet); AAA: 7:1.
- Gebruik Night voor alle lopende tekst, op Shell, wit, Sky of Apricot.
- Gebruik Sunset voor één ding per scherm: de hoofdknop, een accent of een kop.
- Combineer Harbour met tekst in Shell voor rustige, informatieve vlakken.
- Zet geen kleine witte of Shell-tekst op Sunset: dat haalt het contrast niet.
- Gebruik Lemon niet voor tekst of grote achtergronden.
- Maak geen nieuwe tinten, kleurverlopen of neonversies van onze kleuren.
Details