Brand colours for email

Named colour fields — accent, header bar, heading text, body text and page background — plus a light or dark appearance, each with a swatch picker and a hex box.

What it is

Colours are exposed as roles rather than raw CSS: Accent is described as buttons, icons and highlights; Header bar as behind your logo. Each field pairs a native colour swatch with a monospace hex input that normalises a pasted value by adding the missing #.

Also called: accent colour · header colour · email colours · dark mode emails

See it
Brand colours for email
Day rate
$500
Days figured
6
Crew size
4
Fuel & equipment
$300
Finished 2 days early — $1,800 back to the crew
The Colors block: five labelled rows, each with a swatch and a hex field, hints underneath. Sample data — no customer information appears here.
How it works
  1. 1ColorField renders a swatch button over a hidden colour input plus a hex text field.
  2. 2Values fall back to the resolved brand defaults when unset, so the fields are never blank.
  3. 3Appearance (light/dark) is a token like the rest.
Why we built it

A builder does not think in CSS variables; they think 'the bar behind my logo'. Naming the roles and hinting where each colour lands makes the palette editable without a designer, and the hex normaliser accepts the value people actually paste.

The problem
  • Colour settings were unnamed or too technical to configure confidently.
  • Hex values pasted without a leading hash were rejected.
Sound familiar?
What you get
A brand palette can be entered from a brand sheet without translation.
Every colour field says where it shows up.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →