Build a Colour Palette in the Browser: Harmony Rules and CSS Variables

Five colours, one hex value

Every project starts the same way: someone picks a colour, and then a dozen more have to be derived from it. A button hover, a muted background, a border that has to sit somewhere between the two.

The usual way to get those extra colours is a colour picker in a design tool, or a web page that asks you to upload an image of your palette. The Colour Studio's Palettes tab in OnePassApps takes the first route instead: give it one hex value and it builds a palette from it in the browser tab, with the CSS custom properties already written for you.

Open it here: the Colour Studio

What the tab actually shows

The Colour Studio carries four tool tabs on one page: Picker, Contrast, Palettes, Image. The Palettes tab is laid out as three numbered steps, and the copy in each one is the clearest statement of what the tool does.

01 Base colour - "Shared with Picker & converter." The step offers a colour swatch and a text field whose placeholder reads "HEX, RGB or HSL", so you can type a value in the format you already have.

02 Harmony - a dropdown with five named schemes. Each one carries its own one-line explanation, and the number of colours it produces follows from the rule:

• Analogous - "Five neighbouring hues, 20° apart, around the base."
• Complementary - "The base and the hue opposite it on the colour wheel."
• Triadic - "Three hues spaced evenly, 120° apart."
• Split-complementary - "The base and the two hues either side of its opposite."
• Monochrome - "One hue in five steps of lightness."

03 CSS variables - the palette written out as a :root block, ready to paste into a stylesheet:

:root {
  --palette-1: #58A0D6;
  --palette-2: #5876D6;
  --palette-3: #6458D6;
  --palette-4: #8E58D6;
  --palette-5: #B858D6;
}

Underneath the three steps the page says "Nothing leaves this tab."

A real run, mode by mode

I opened the Palettes tab and left the base colour at the page default, #6458D6, then switched the Harmony dropdown through all five schemes. Each one changed the description line, the CSS block and the swatch list together, so the palette is computed from the base colour and the chosen rule - not from a stock list.

Analogous - "Five neighbouring hues, 20° apart, around the base." The panel reported "Analogous palette" and "5 colours · base #6458D6":

• #58A0D6
• #5876D6
• #6458D6
• #8E58D6
• #B858D6

Complementary - "The base and the hue opposite it on the colour wheel." "2 colours · base #6458D6":

• #6458D6
• #CAD658

Triadic - "Three hues spaced evenly, 120° apart." "3 colours · base #6458D6":

• #6458D6
• #D66458
• #58D664

Split-complementary - "The base and the two hues either side of its opposite." "3 colours · base #6458D6":

• #6458D6
• #D6A358
• #8BD658

Monochrome - "One hue in five steps of lightness." "5 colours · base #6458D6":

• #0A0821
• #241C73
• #3E30C5
• #857CDF
• #D1CEF3

The monochrome row is the one worth a second look: the base hue stays the same, and the palette runs from near-black to near-white in five steps. That is the row you want for a text-and-surface scale, and it is exactly what a hand-rolled version of this is tedious to get right.

The small conveniences that matter

The generated palette sits in a GENERATED PALETTE panel with a Copy CSS variables button, so the whole :root block goes into your clipboard in one click instead of you retyping eight hex values.

Each swatch is its own control. The panel explains what they are for: "Select a swatch to copy its HEX value." So the workflow is: click the colour you want, paste it wherever the value is needed.

There is a Pick from screen control on the stage too, which is the shortcut for the case where you do not have the hex value in front of you but you can see the colour you want somewhere on your screen.

Why a rule beats a guess

Picking "colours that look right" by hand is where colour systems go wrong. The rules the tab applies are the ones already written down:

• Analogous keeps everything in one neighbourhood, so it stays calm and modern.
• Complementary maximises contrast between two colours, which is what you want for a call to action.
• Triadic gives three usable accents without the clash that random picks cause.
• Split-complementary is the softer version of complementary - two accents instead of one, still anchored opposite.
• Monochrome gives you a lightness ramp from a single hue.

You still choose the base colour, and you still copy the values by hand or with the button, but the arithmetic is done for you and the result is reproducible: the same hex and the same scheme give the same five colours every time.

Two honest limits

• The palette is a starting point, not a finished system. The tool gives you colours derived by rule. Whether they pass contrast checks for body text is a separate question - the same studio has a Contrast tab for exactly that, where you can check a pair against the WCAG levels.
• The swatches are generated, not sampled. This tab derives colours from a base value you give it. The Image tab is the other job: drop in a photo and it samples the pixels and builds a palette from what is actually in the file.

Where the work happens

OnePassApps is one option here, and I work on OnePassApps - full disclosure, as it should be. The Colour Studio is where this lives, and it runs inside the tab. The page states it plainly: "Pick, convert, compare and sample colours on this device. Your values and selected images stay in this browser tab." and "Nothing leaves this tab."

The Standard plan is currently free during a promotional period: $0 / month, 100,000 credits every 30 days, no end date set and no card required, with no automatic paid subscription.

The short version

Type one hex value, pick a harmony rule - analogous, complementary, triadic, split-complementary or monochrome - and the tab hands you the colours and a :root block of CSS variables to paste. Nothing leaves the browser.

Disclosure: I work on OnePassApps. The behaviour above is what I can verify today, read off the live studio page and from harmony-mode runs I made myself. Limits may change. How the browser-local tools work in general is written up in the app's own guides: app.onepassapps.com/guides.