Color Scheme Generator
Palettes That Agree

What A Color Scheme Generator Does

One color is a starting point rather than a plan. A page needs a background, a text color, a border and an accent that belong together. Therefore a color scheme generator takes the color you already have and works out the rest.

Four things come back from one pick. First, the harmony sets: complementary, analogous, triadic, split complementary, tetradic and monochromatic. Then a ramp of tints and shades from near black to near white. After that, a contrast table that says which pair can carry text. Finally, the export formats, ready to paste.

That contrast table matters more than it looks. A pretty palette which fails the contrast rule becomes a support ticket. So every pair gets a reading, and each failing row says so in words.

The direction also runs backwards. Because you can paste a palette you already own and ask which harmony fits it best, the page helps when you inherit a design and need to extend it without a visible break.

How A Color Scheme Generator Builds A Palette

The maths is older than the web. A color wheel arranges hues in a circle, and every harmony is a shape drawn on that circle. Two points opposite each other give a complementary pair. Three points at even spacing give a triad.

So the first pass converts your color to HSL. Hue is the angle, saturation is how far the color sits from grey, and lightness is how much white or black it carries. Angles add cleanly in HSL, which is why every harmony works there rather than in hex.

The second pass rotates the hue. Complementary adds 180 degrees. Analogous adds 30 and takes 30 away. Triadic adds 120 and 240. Split complementary adds 150 and 210. Tetradic adds 90, 180 and 270. Each result wraps around the circle, so a hue of 350 plus 30 lands on 20 rather than on 380.

The third pass adjusts the extras. Because a pure rotation can leave two colors at the same lightness, the generator also offers a version with the lightness stepped. Otherwise a banner and its accent blur into each other on a projector.

Nothing here needs a network call. Therefore the page works offline, and it works on a brand color you would rather not type into a hosted tool.

Why The Wheel Decides, Not The Eye

The eye adapts. Two colors that look different on a white page can look identical on a dark one. Hue arithmetic does not adapt, and that is the point of it.

Because the rotation runs on numbers, the same input gives the same output every time. So a palette you liked last month comes back exactly as you left it.

Contrast is the other reason. A contrast ratio depends on relative luminance rather than on hue. Therefore two colors from opposite sides of the wheel can still fail the rule when both sit at a similar lightness.

Hence the lightness step. It is the lever that repairs a harmony which is correct on the wheel and unusable on the page.

The Six Harmonies, One At A Time

Complementary puts two hues opposite each other. The pair shouts, which suits a call to action or a price. However, the same pair hurts as body text on a background, because the edges vibrate where the two meet.

Analogous keeps three neighbors inside about 60 degrees. Because the hues sit close, the set feels calm, and it suits a chart with several series. Yet it hands you no natural accent.

Triadic takes three hues at even spacing. The result is lively and balanced at once. Still, one of the three usually has to shrink to an accent, or the page turns into a flag.

Split complementary takes one hue and the two neighbors of its opposite. Therefore you keep the punch of a complementary pair with less tension. It is the easiest of the six to use on a landing page.

Tetradic, sometimes called square, takes four hues at even spacing. In fact it needs the most discipline, since two of the four should carry most of the page and the rest should stay small.

Monochromatic stays on one hue and moves lightness and saturation only. Notably, this is the safest set for a product interface, because nothing inside it competes for attention.

Reading A Color From A Photo

A brand color often arrives as a logo, a screenshot or a photograph rather than as a code. So the page reads one too. Drop the file in, and the sampler returns the hues that cover the most pixels.

The reading runs on a canvas inside your own tab. Because the file never leaves the browser, an unreleased product shot stays unpublished.

Sampling groups similar pixels before it counts them. Otherwise a photograph of a leaf returns four hundred shades of green and nothing useful. The grouping keeps the list short enough to choose from.

From there the same six harmonies apply. Therefore a photograph of a shopfront can produce a whole scheme in one step, with the sign color as the base.

What Comes Out: The Export Formats

Every set leaves in the format your next step needs. The plain list of hex codes suits a message to a designer. The CSS custom properties suit a stylesheet, since variables are the usual way to hold a theme.

A CSS custom property block comes first, because a theme usually lives in variables. Then a Tailwind block, since a theme file holds the same values under its own names. After that, SCSS variables and a JSON object cover the remaining cases.

Each swatch carries its own readings as well. That means the hue angle, the saturation, the lightness, the hex code, and the contrast against white and against black.

Finally, the whole scheme downloads as a JSON file. So a palette survives a cleared clipboard, and it can sit in a design repository beside the screens it came from.