Color Palette Generator: 14 Schemes From One Base Color

By Christopher Armstrong · Seattle, WA

A color palette generator takes one decision away from you and gives back eleven: you pick a base color, the tool rotates its hue around the color wheel by fixed angles, and the result is a set of colors that belong to the same family by construction. That is the whole trick. Every scheme in the palette generator on this site is a list of angles in HSL space, applied to the hue of your base color while saturation and lightness stay where you put them.

The useful part is not the rotation, which is arithmetic, but the mapping from a design problem to an angle set. A dashboard that needs ten chart series, a landing page that needs one loud accent, a packaging sketch that needs four balanced panels: each of those wants a different scheme, and picking the wrong one produces a palette that is technically harmonious and practically unusable. This guide walks through the fourteen schemes the generator offers, the formula behind each one, and the checks that stop a pretty palette from turning into unreadable text.

What a Color Palette Generator Does With One Hex Value

Start with a color and convert it from RGB to HSL. Hue becomes an angle from 0 to 360, saturation and lightness become percentages. Two of those three numbers carry the character of the color: saturation says how far it sits from grey, lightness says how bright it is. The third, hue, says where it lives on the wheel.

The generator on this page only touches hue for the wheel schemes. Feed it #667eea and it reads back hue 229, saturation 76 percent, lightness 66 percent. A complementary palette is that same color plus hue 49, because 229 plus 180 wraps to 49. Both colors keep saturation 76 and lightness 66, so they read as equally intense: one blue-violet, one warm yellow. That equal treatment is why the output looks like a deliberate set instead of two colors that happened to meet.

The ramps work the other way round. Shades, tints and tones keep the hue (except tones, which keep hue and lightness and move saturation) and vary one channel in ten steps, so you get a scale rather than a wheel position. A palette generator that only rotated hue would leave you without hover states, borders, or a single-hue ramp for a data series, which is why the fourteen schemes here split into ten wheel sets and four ramps.

Nothing about this needs a server. The conversion, the rotation and the canvas drawing of the PNG all run in the browser on your own machine, so the colors of an unreleased brand never leave the tab.

Which Color Scheme Should You Pick?

The schemes group by how many colors they hand you and how hard the result is to balance. Two are easy to place, a five-color family is quiet, and four colors drawn from two complementary pairs are the hardest because nothing in the set says which one should dominate.

Two of these get confused. Split-complementary uses 150 and 210 degrees, so its partners sit 60 degrees apart near the opposite side of the wheel and one hue still leads. Triadic spaces three hues evenly at 120 degrees and gives no hierarchy at all. Wikipedia's entry on color schemes describes the rectangle as a base plus 60, 180 and 240 degrees and the square as three hues 90 degrees apart, which is how the generator splits those four-color cases.

How the Hue Rotation Is Calculated

Every wheel scheme is the same two lines of arithmetic. Convert the base color to HSL, add the offsets of the chosen scheme, wrap the result into the 0 to 360 range, convert back to RGB and print the hex value.

$$H_k = (H_0 + \Delta_k) \text{ mod } 360$$

The wrap matters more than it looks. A base hue of 300 with a triadic offset of 120 gives 420, which is 60 after the modulo, not a failure. Tools that skip the wrap either clamp to 360 or throw an error on the second color, and the palette quietly loses a member.

The ramps use a different formula, one that keeps the hue and moves lightness or saturation in ten equal steps:

$$L_i = L_0 + \frac{(100 - L_0)(i + 1)}{11}$$

That is the tint ramp: each step covers one eleventh of the distance between the base lightness and white, so step ten lands near 97 percent instead of collapsing into pure white. Shades run from 5 to 95 percent lightness in steps of 10, which gives a full dark-to-light ladder regardless of where the base sits. Tones keep lightness constant and divide saturation by eleven per step, so the last swatch is a near-grey version of the same color rather than a different color.

One consequence catches people out: an achromatic base such as #808080 has saturation 0, so every hue rotation returns the same grey. The palette is not broken; there is no hue to rotate. Switch to shades or tints for greys.

What Is the Difference Between Shades, Tints and Tones?

A tint is a color mixed toward white, a shade is a color mixed toward black, and a tone is a color mixed toward grey. The difference is which channel of HSL you move. Tints raise lightness, shades lower it, and tones lower saturation while lightness and hue stay put.

In practice the three cover different jobs. Tints build the light end of an interface: card backgrounds, disabled buttons, hover states on a white page. Shades build the dark end: text, borders, shadows, the pressed state of a button. Tones mute a color without changing how bright it looks, which is why they suit charts and dense UI where ten saturated hues would fight each other.

Ten steps of each is enough to name them: tint 1 is barely lighter than the base, tint 10 is nearly white, and everything between can carry a state. A three-step ramp forces you to invent values; a ten-step ramp usually contains the value you need.

Keep the perceptual caveat in mind. Equal HSL lightness does not mean equal perceived brightness: a saturated yellow at 66 percent lightness looks much brighter than a saturated violet at the same number. That is a limit of HSL, not a bug in the generator, and it is why a palette that measures beautifully can still need a contrast pass before it ships.

How Do You Check a Palette Before Shipping It?

Three checks, in this order.

First, contrast. WCAG 2.2 level AA asks for 4.5:1 between normal text and its background, 3:1 for large text at 24 pixels or 18.66 pixels bold, and 3:1 for graphical objects and interface borders. Level AAA raises normal text to 7:1. Put your text color and your background through a contrast checker before the palette goes into a stylesheet; a tint that looks like a pleasant background often lands below 4:1 against white text.

Second, distribution. In any scheme with three or more colors, decide which one is the surface, which is the text, and which is the accent, then use them in that proportion. A four-color set used in equal parts reads as clutter even when the hues are correct, because nothing tells the eye where to start. The set is a supply of roles, not a mandate to use every color on every screen.

Third, reproduction. A palette that works on a laptop can fail on a projector, a phone in sunlight, or a printed carton. Check the two extremes: the lightest tint against the darkest shade, and the accent against the surface it sits on. If the palette survives those pairs, the middle values are usually safe.

The generator does not compute contrast for you, and it does not pretend to. It hands over HEX, RGB and HSL values, which is what a contrast checker or a design tool needs as input.

Where Palettes Break in Real Interfaces

Most palette failures come from using a wheel scheme as if it were a ramp. A triadic set gives three colors of equal weight, which is ideal for category badges and terrible for a page that needs a background, a text color and a button. The fix is to build the interface from tints and shades of the dominant hue, then spend one wheel color on the accent. That is why the generator offers both kinds of scheme in the same dropdown: the ramp schemes supply structure, and the wheel schemes supply emphasis.

A second failure is accent inflation. Split-complementary and its accented variants give a palette that already contains a strong contrast pair, and adding a third accent from outside the set breaks the logic the palette was built on. If you need a warning color and a success color, take them from the same wheel: the accent slot in the split-complementary set exists for exactly that.

The third is forgetting the neutral. Every one of the fourteen schemes produces colored swatches, and almost every interface also needs a near-black, a near-white and a mid grey that carry no hue. Pull them from the extreme ends of the shades and tints ramps rather than introducing a new color, so the neutral still belongs to the family.

Christopher Armstrong

Seattle, WA · SO reputation 7991 · Badges: 2🥇29🥈28🥉 · SO member since 2011