A colour palette generator takes one colour you already know you want and derives the rest of a usable set from it. That is a different job from picking colours you like one at a time. Harmonies are computed by moving a fixed distance around the hue wheel, which produces relationships that stay consistent when the base changes — swap the base and the whole palette shifts with it rather than falling apart.
This generator produces the four harmonies used most in interface work — complementary, triadic, analogous, and split-complementary — plus a tint and shade ramp for the base itself, which is usually where the real work of a design system happens. Arb Digital built it for exactly that: turning a single brand colour into the surfaces, borders, hovers, and states a build actually needs.
What This Colour Palette Generator Does
Set a base colour with the picker or by typing a hex value, and the tool converts it to HSL, rotates the hue by the angles each harmony defines, and returns every result as a hex value you can click to copy. The tint and shade ramp is generated by moving lightness up and down in even steps while holding hue and saturation, giving you a predictable scale rather than a set of hand-mixed one-offs.
The result panel adds four facts about the base colour itself. The complementary hex is the colour directly opposite on the wheel. The hue angle is the base's position in degrees, which is the number every harmony is calculated from. Relative luminance is the perceptual brightness value used in contrast maths, and the last item tells you whether black or white text achieves higher contrast against the base — the first accessibility question anyone asks about a brand colour.
How to Use It
- Set your base colour. Use the picker to explore, or paste an exact brand hex if you are working to an existing identity.
- Choose how many tint and shade steps you need. Five each side gives a ten-stop ramp plus the base, which covers most interface needs.
- Read the harmonies. Each group is labelled with the hue rotation used, so you can see the relationship rather than just the result.
- Click any swatch to copy its hex. The whole palette is also available as CSS custom properties in the output box.
- Check contrast before committing. Take each text and background pair to a contrast checker rather than trusting how it looks on your own screen.
The Formula / How It's Calculated
Everything starts by converting the hex value to RGB and then to HSL — hue in degrees from 0 to 360, saturation and lightness as percentages. HSL is used because hue rotation is a single addition in that space, whereas the same operation in RGB requires far messier arithmetic.
The harmonies are fixed rotations of the hue. Complementary adds 180 degrees. Triadic adds 120 and 240, producing three evenly spaced hues. Analogous takes small steps of about 30 degrees either side, which is why analogous palettes feel calm — the hues are neighbours. Split-complementary takes 150 and 210 degrees, landing either side of the complement, which keeps the contrast of a complementary scheme while softening its bluntness. Every result wraps at 360.
Tints and shades hold hue and saturation constant and move lightness. A tint interpolates the lightness toward 100 percent, a shade toward 0. Relative luminance is a separate calculation defined by the W3C's contrast guidance: each RGB channel is normalised, linearised through a gamma transform, and then weighted 0.2126 for red, 0.7152 for green, and 0.0722 for blue, reflecting how much each contributes to perceived brightness.
Why Green Looks Brighter Than Blue at the Same Lightness
Those luminance weights explain a phenomenon that confuses people the first time they meet it. Green carries roughly seventy percent of perceived brightness and blue barely seven. A pure blue and a pure green with identical HSL lightness values are not equally bright to the human eye — the green is dramatically brighter, and it will pass a contrast check against white when the blue does not.
This is why a palette that looks evenly stepped in a design tool can fail accessibility testing unevenly across hues. If your ramp is built purely on HSL lightness, the yellow end of the palette will be perceptually much lighter than the blue end at the same nominal step. The practical fix is to treat the HSL ramp as a starting point and then adjust individual stops against measured contrast rather than assuming the numbers are perceptually uniform.
Choosing a Harmony for an Interface Rather Than a Poster
Colour theory is usually taught with paintings and posters in mind, where balance across the whole composition matters. Interfaces work differently. Most of the surface is neutral, and colour is used sparingly to direct attention — which means a full triadic palette applied at equal weight tends to look chaotic on screen.
The convention that survives contact with real products is roughly sixty percent neutral, thirty percent a dominant brand colour, and ten percent an accent. Under that split, an analogous palette gives you the neutral-and-dominant range, and the complementary or split-complementary result supplies the accent used for the single most important action on a screen. Triadic palettes are best treated as a source of three candidates from which you pick two, not as three colours to use simultaneously.
What Tints and Shades Are Actually For
The harmonies get the attention, but the ramp does most of the work. A single brand colour cannot fill an interface on its own: you need a lighter version for hover states, a lighter one still for selected rows and subtle backgrounds, a darker one for pressed states, and a darker one still for text that has to sit on a light tint of the same hue.
Generating those from one base keeps them related. Picking them by eye tends to drift in hue — a "slightly lighter navy" chosen by hand often comes out slightly more purple, and the inconsistency compounds across a hundred components. A generated ramp holds hue and saturation fixed by definition, so every stop is unmistakably the same colour family.
One caveat worth knowing: at very high and very low lightness values, saturation stops being visible. A shade at five percent lightness is effectively black regardless of its hue, and a tint at ninety-eight percent is effectively white. Ramps that run all the way to the ends waste stops. Stopping around ten and ninety percent usually gives a more useful scale.
Hex, HSL, and Why Both Are Worth Keeping
Hex notation is compact and is what most design handoffs use, but it is opaque: nothing about #1B3A6B tells you it is a dark, moderately saturated blue. HSL states that directly, which makes it far easier to reason about relationships and to write systematic adjustments.
Modern CSS supports both, and it also supports newer colour spaces designed to be perceptually uniform, where equal numeric steps correspond to equal perceived changes. Those spaces, defined in the CSS Color Module Level 4 specification, solve the green-versus-blue brightness problem properly. They are worth investigating for a serious design system, though hex and HSL remain the common currency of most handoffs and are what this tool emits.
Colour Alone Should Never Carry Meaning
Around one in twelve men has some form of colour vision deficiency, most commonly affecting the distinction between red and green. A palette built on a red-green complementary pair can therefore lose the very contrast it was designed around for a meaningful share of users. That is not an argument against the harmony, but it is an argument against relying on it alone.
Any status that matters — error, success, warning, selected — needs a second signal alongside colour: an icon, a label, a border weight, or a position. Testing this is straightforward. Convert your interface to greyscale and see whether every distinction still reads. If two states become identical, colour was doing work that something else needs to share.
Arb Digital's web development team builds design systems where colour, contrast, and component states are defined once and applied consistently across every page.
Web Development Services Talk to Arb DigitalCommon Mistakes to Avoid
- Using every colour a harmony produces. A triadic palette is a shortlist, not an instruction to use three colours at once.
- Assuming a harmony is accessible. Hue relationships and contrast ratios are unrelated calculations — check text pairs separately.
- Building a ramp that runs to pure black and pure white. The extreme stops carry no hue and waste steps you could use in the visible range.
- Judging colour on one screen. Uncalibrated displays, dark mode, and glare all change how a palette reads.
- Encoding meaning in colour alone. Add an icon or label so the message survives colour vision deficiency and greyscale printing.
Related Free Tools From Arb Digital
Verify every pair with the colour contrast checker, convert between formats using the colour picker and converter, hex to RGB, or RGB to hex, pull colours out of an existing design with the image colour picker, and blend two palette stops into a background with the CSS gradient generator. More sit in the free online tools hub.
Frequently Asked Questions
It is the colour directly opposite the base on the hue wheel, 180 degrees away. Complementary pairs produce the strongest hue contrast, which makes them effective for accents and poor for large adjacent areas.
A tint is the base colour moved toward white and a shade is the base moved toward black. Both hold the hue steady, so every stop stays recognisably the same colour.
Most interfaces work with one dominant colour, one accent, and a neutral range, each with several tints and shades for states. Adding more distinct hues usually reduces clarity rather than increasing it.
No. Harmony is about hue relationships and contrast is about relative luminance. A harmonious pair can still fail a contrast check, so test each text and background combination.
Perceived brightness weights green far more heavily than blue. A green and a blue at identical HSL lightness will have very different relative luminance and very different contrast behaviour.
Yes. All colour maths runs in your browser, nothing is uploaded, and there is no limit on how many palettes you generate.
Yes. The output box provides the whole palette as CSS custom properties, ready to paste into a stylesheet and reference by name.
Colour appearance varies with display calibration, ambient light, and operating system colour management. Verify final choices on the devices your audience uses.
