A Color Workflow: Extract, Build, Adjust

Most colour problems are not "what is my favourite blue". They are "what are the four colours already in this photograph, and how do I build a design that agrees with it". That is a workflow, and it has four steps: sample, extract, structure, adjust. Each one has a tool, and all of them run in your browser without the image ever being uploaded.

Step 1: Sample an exact colour

Start with the image colour picker when you need one specific value - the exact green in a client's logo, the background of a screenshot you have to match, the dominant tone of a product photo. Load the image, click a pixel, and you get the HEX and RGB values back.

Two things trip people up. First, sample the middle of a region rather than an edge: edges in a JPEG are full of compression artefacts and anti-aliasing, so the pixel you clicked may be a blend of two colours that neither of them actually is. Second, a photograph of a coloured object is not that object's colour. It is the colour under that lighting, with that white balance. If you are reverse-engineering a brand colour, sample from a flat digital asset, never from a photo of a printed one.

Step 2: Extract a palette from the image

One colour is rarely enough. The colour palette generator analyses the whole image and returns a set of swatches representing its dominant colours, each of which you can click to copy the hex code. This is quantisation - grouping millions of individual pixel values into a handful of representative clusters - and it is far more reliable than eyeballing an image and guessing.

Palettes extracted from photographs tend to work because the colours in them already coexist in the real world under a single light source, so they share an undertone. That is also the failure mode: a photograph shot under strong tungsten light produces a palette with a warm cast baked into every swatch. If the extracted palette feels off, try a different source image rather than fighting the swatches.

Step 3: Give the palette structure

An extracted palette is raw material, not a design system. Assign roles before you use it:

Dominant - the background or largest surface. Usually the least saturated swatch.
Secondary - supporting panels, borders, secondary surfaces.
Accent - buttons, links, highlights. This should be the most saturated swatch and should cover the smallest area.
Text - very dark or very light, and chosen for contrast rather than for prettiness.

The common ratio is roughly 60 percent dominant, 30 percent secondary, 10 percent accent. The reason accents work is scarcity; a palette applied in equal thirds reads as chaotic no matter how good the individual colours are.

Then check contrast. WCAG asks for a contrast ratio of at least 4.5:1 between normal body text and its background, and 3:1 for large text, and a palette that came out of a photograph will frequently fail that on the first attempt. Do not discard the colour - adjust its lightness until it passes, which is what the next step is for.

Step 4: Adjust with HSL, not with brightness

The HSL adjuster gives you three sliders - hue from -180 to +180 degrees, saturation from -100 to +100, and lightness from -100 to +100 - and they map onto how people actually think about colour:

Hue rotates every colour around the wheel. Small rotations of 10 to 20 degrees warm or cool an image; large ones produce deliberately unnatural results.
Saturation controls intensity. Pulling it down toward -100 moves toward greyscale; pushing it up quickly clips into neon and loses detail in already-vivid areas.
Lightness shifts everything toward white or black. This is the slider that fixes a failing contrast ratio without changing the character of the colour.

The reason to reach for HSL rather than a brightness or contrast control is that HSL keeps the three properties separate. You can desaturate a photo to sit quietly behind text without changing its hue, or warm it without making it lighter. Brightness controls mix all three together, which is why images edited that way often end up washed out.

Duotone as a brand device

When you need a set of visually unrelated photographs to look like they belong to one brand, a duotone is the strongest lever available. It converts the image to luminance and remaps that range between two colours you choose - one for the shadows, one for the highlights - so every image in the set ends up sharing exactly the same two-colour vocabulary regardless of what was in front of the camera.

It works best on photographs with clear tonal separation, and best of all when the two colours have meaningfully different lightness. A dark shadow colour and a light highlight colour preserve the image's structure; two colours of similar lightness flatten it into mush. Pull both colours from your extracted palette and the result ties the whole system together.

HEX, RGB, HSL: same colour, different handles

These are three notations for the same thing. HEX is a compact way of writing RGB, so #3366CC and rgb(51, 102, 204) are identical. Both describe how much red, green and blue light to emit, which is how a screen works but not how a person thinks. HSL restates the same value as hue, saturation and lightness, which is why it is the right space to edit in and RGB or HEX is the right space to store and paste. Sample and store in HEX, reason and adjust in HSL.

Working privately

Every step here happens on a canvas in your tab: the picker reads a single pixel with getImageData, the palette generator quantises locally, and the HSL and duotone tools rewrite pixel arrays in place. Unreleased brand assets, client mockups, and personal photographs are never transmitted, which is not a minor detail when the file you are sampling from is a design nobody has seen yet.