Hair Color Reference
CSS
You Might Also Need
The hair color reference generates a five-swatch palette spanning the full range of natural hair — near-black through auburn and warm brown to ash blonde — with each value as a hex code.
What is Hair Color Reference?
The hair color reference works like the other themed generators in this domain: five swatches with their codes, a Regenerate button, and a panel listing the set as numbered CSS custom properties. What sets it apart from its siblings is the shape of the range it draws from, which is unusual in two respects at once.
The first is the lightness span. Hair covers a wider tonal range than almost any other subject a palette generator is asked about — from near-black through mid browns to pale blonde — and this tool reflects that, generating across roughly ten to eighty-five percent lightness. That is by far the broadest ladder in the set. Most themed palettes keep their colours within a narrow band so they feel like one material; hair has to include both the darkest and one of the lightest values a person can have, and the even spacing between them is what makes the five swatches read as a family rather than as unrelated colours.
- The second is the saturation, which is held between about 0.02 and 0.12 — very low, and deliberately so.
- Natural hair colour is pigment seen through a translucent fibre, so even the warmest auburn reads as muted rather than vivid.
- A saturated orange is a hair dye; a low-chroma orange is brown.
- Keeping the chroma in that narrow band is what makes the palettes believable.
The hues complete the picture. The first swatch sits around thirty degrees, a warm brown; the second drops to fifteen for a red-brown that reads as auburn; the third falls to zero for a black-brown with a red undertone; the fourth climbs to forty-five for a golden tone; and the fifth reaches sixty, which at low saturation is the ash blonde that reads as cool rather than yellow. Read in order, that is the familiar ladder from dark to light, warm to ashen.
Regenerate re-rolls the saturation only, so each of the five positions keeps its hue band and its place on the lightness ladder. Repeated presses move the palette between a richer, warmer set and a flatter, cooler one without changing its structure — which is the behaviour you want when choosing a direction rather than a single colour.
- Where it earns its place is character work.
- Avatars, illustrated figures, game characters and doll customisation all need a small set of hair colours that are distinguishable from one another yet clearly belong to the same world, and the two constraints here — a wide lightness ladder at very low saturation — produce exactly that.
- It is also useful in reverse for checking a claim: if a sketch palette looks too orange or too yellow to read as natural hair, the chroma is usually the culprit.
Being honest about the limits: these are generated values chosen to occupy the right bands, not samples of real hair, and the palette covers natural colour rather than dye — there is no blue, green or pink here. Real hair also changes tone along its length, with highlights reflecting light and roots reading darker, so a single flat value is always an approximation. Nor is the set organised by shade name, so look elsewhere if you need a specific term. As a hair color palette to draw character work from, though, it is quicker than inventing natural hair colors by hand, and every swatch arrives as hair color hex codes with hex values you can use directly — a compact set of hair shades with hex notation, generated in one press.
How to use Hair Color Reference
- Press Regenerate until the saturation level suits the character or asset.
- Read the five swatches, which run from near-black through browns to pale blonde.
- Copy the numbered custom properties, or copy a single swatch value.
When to use Hair Color Reference vs related tools
Use this when a character, avatar or illustration needs a consistent set of natural hair colours. Use the eye colour reference for the same job on irises, or a themed palette generator when the subject is a mood rather than a material. For the neighbouring steps, see the flag color extractor and the brand color library.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.