Colour System

The Palette

An earthy, considered palette drawn from natural tones — ink, olive, sage, gold and sand. Click any swatch to copy its hex value.

Core Dark

Ink — #323526
Copied!
Just add h2o.
Primary dark background — use for hero sections and dark panels.
Ink #323526
Olive 800 — #545940
Copied!
Fearless thinking.
Secondary dark — footers, cards, alternative dark sections.
Olive 800 #545940
Slate 800 — #4B5D63
Copied!
Fewer hoops.
Cool dark tone — data sections, callout panels, contrast blocks.
Slate 800 #4B5D63
Gold 700 — #C69023
Copied!
20 Years of Creative.
Button hover state — deeper gold for pressed and active interactions.
Gold 700 #C69023
Gold 500 — #E5AC34
Copied!
Primary Action.
The primary CTA colour — buttons, highlights, and key brand moments.
Gold 500 #E5AC34
Bluegray 500 — #9DACB2
Copied!
Cool Neutral.
Supporting colour — captions, metadata, secondary UI elements.
Bluegray 500 #9DACB2

Mid Tones

Sage 500 — #879F80
Copied!
Natural, Considered.
Versatile mid-tone — section backgrounds, borders, and accent use.
Sage 500 #879F80
Honey 500 — #CAA355
Copied!
Warm Accent.
Softer gold variant — illustration, warm accent panels, secondary CTAs.
Honey 500 #CAA355
Sand 400 — #DEC589
Copied!
Earthy Warmth.
Gentle warmth — illustration fills, tag backgrounds, dividers.
Sand 400 #DEC589
Tealgray 400 — #96AFA6
Copied!
Cool Balance.
A cooler counterpoint — pairs with sage and sand for visual depth.
Tealgray 400 #96AFA6
Bluegray 200 — #C3D3CE
Copied!
Airy Contrast.
Light cool tone — background tints, input borders, UI strokes.
Bluegray 200 #C3D3CE

Light / Backgrounds

Offwhite 50 — #E9EDE9
Copied!
Clean canvas.
Alternate light background — section breaks and card fills.
Offwhite 50 #E9EDE9
Stone 100 — #E0DAC9
Copied!
Warm neutral.
Borders, dividers, and subtle contrast backgrounds.
Stone 100 #E0DAC9
Cream 50 — #F5F4E7
Copied!
Primary background.
The default page background — warm, light, easy on the eye.
Cream 50 #F5F4E7
Sand 100 — #EADECC
Copied!
Toasted warmth.
Card and panel tints — adds warmth without distracting from content.
Sand 100 #EADECC
Sky 50 — #D3E7EA
Copied!
Crisp & cool.
Accent background — info panels, notification tints, data areas.
Sky 50 #D3E7EA

Highlight / Action

Action Primary — #E5AC34
Copied!
The main event.
Primary CTA — buttons, highlights, and key interactive elements.
Action Primary #E5AC34
Action Hover — #C69023
Copied!
Pressed state.
Hover and active state for Gold 500 buttons — deeper, richer tone.
Action Hover #C69023
Action Highlight — #D3E694
Copied!
Bold accent.
New / featured labels, success states, and highlight callouts — now the primary action colour.
Action Highlight #D3E694

Colour Combinations

Five combinations built on the mid-tone palette — each one using that mid-tone as the dominant background, with dark and light tones for type, and one highlight colour chosen for contrast and energy.

Find out more
Sage 500
Ink
Cream
Gold
Sage 500
Sage as the mid ground sits between Ink type and Cream for light text panels. Gold as the highlight pops cleanly off the muted green — use for environmental, sustainability, and natural brand messaging.
Get in touch
Honey 500
Ink
Stone 100
Lime
Honey 500
Honey is warm and confident — Ink grounds it with authority, Stone 100 softens lighter text panels. Lime as the CTA highlight creates a surprising contrast that reads as energetic and modern rather than predictable.
Learn more
Bluegray 500
Ink
Offwhite
Gold
Bluegray 500
Bluegray is the coolest mid-tone — it reads as calm, clinical, and precise. Ink type anchors it firmly, Offwhite gives breathing room. Gold adds warmth and drives action without clashing.
Explore
Slate 800
Cream
Offwhite
Lime
Slate 800
Slate 800 is darker than the other mid-tones so light type is needed — Cream and Offwhite both work well here. Lime as the highlight creates a striking, cool-toned palette suited to considered, premium communications.
View work
Tealgray 400
Ink
Cream
Gold
Tealgray 400
Tealgray sits between Sage and Bluegray — it's softer and more coastal in feel. Ink holds the type firmly, Cream lightens supporting panels naturally. Gold is the warmest highlight choice and stops the palette reading too cold.

Dark Tone Combinations

The three core dark tones as backgrounds, each layered with complementary mid and light tones for type, and one highlight. All use the negative (white) logo.

Get started
Ink
Bluegray 500
Offwhite
Gold
Ink
The primary brand dark. White carries headlines, Bluegray 500 works as secondary text and subtle dividers. Offwhite panels sit comfortably within the layout. Gold drives all action — the definitive h2o dark combination.
Find out more
Olive 800
Sage 500
Cream
Lime
Olive 800
Olive and Sage are close in the palette — the analogous pairing creates depth without contrast clash. Cream warms up light text areas, and Lime as the highlight lifts the whole palette with energy. The B Corp-aligned combination.
Learn more
Slate 800
Tealgray 400
Bluegray 200
Gold
Slate 800
A tonal cool palette — Slate, Tealgray, and Bluegray 200 all share the same blue-green undertone, creating a coherent, calm system. Gold breaks the cool register deliberately, adding warmth exactly where action is needed.

Light & Background Combinations

The five light background tones, each paired with a dark tone for type, a mid tone for accents, and one highlight. All use the positive (dark) logo.

Explore
Offwhite 50
Ink
Sage 500
Gold
Offwhite 50
The softest green-tinted ground. Ink type is authoritative against it, Sage adds a tonal mid-layer that feels natural rather than decorative. Gold on CTAs completes the palette cleanly.
View work
Stone 100
Ink
Honey 500
Lime
Stone 100
Stone is warm and earthy. Honey 500 as the mid accent sits naturally in the same warm register. Lime on the CTA creates a deliberate cool-warm tension that makes the action element impossible to miss.
Get in touch
Cream 50
Olive 800
Sand 400
Gold
Cream 50
A fully warm, tonal palette — Cream, Olive, Sand, and Gold share the same yellow-green undertone. Calm and cohesive, it reads as premium and considered. The go-to combination for editorial and brand storytelling layouts.
Discover more
Sand 100
Ink
Honey 500
Gold
Sand 100
Sand 100 is warmer and more saturated than Cream. Ink anchors the type firmly, Honey 500 bridges the gap between ground and Gold highlight. A rich, confident palette suited to consumer-facing and lifestyle communications.
Find out more
Sky 50
Slate 800
Tealgray 400
Gold
Sky 50
The coolest light tone. Slate 800 type and Tealgray 400 accents stay fully within the cool register — airy, clinical, and precise. Gold as the sole highlight is the deliberate disruption that stops the palette feeling sterile.