Color Palette Generator

Color palette generator for balanced, usable colour schemes

Use this color palette generator to turn one starting colour into a coordinated set for a website, app, presentation, worksheet, poster, or brand concept. Pick the starting colour visually or with RGB sliders, choose a harmony rule, and the palette updates immediately. Every swatch includes a HEX value that you can copy, and clicking a generated swatch makes it the new starting colour so you can explore a different branch of the scheme.

The generator is more than a row of attractive swatches. It includes seven colour-harmony methods, a colour wheel, lightness and saturation tools, saved colours, format conversion, and text-on-background previews with WCAG contrast results. That makes it possible to move from inspiration to a palette with clear jobs in a real interface. The calculations run in the browser. Saved colours stay in local storage on the device, while the Share Color button copies a link containing the current colour, opacity, and selected harmony so that the same setup can be reopened or shared.

How to generate a palette from one colour

Choose the starting colour

In Square mode, move across the colour square to change saturation and move vertically to change HSV value, then use the separate hue slider to move around the colour wheel. Sliders mode exposes red, green, and blue channels when you need direct RGB control. You can also click the colour wheel to choose a hue, select Random Color for a fresh starting point, or click a previously saved colour to restore it.

The Color Tools buttons provide quick variations of the current colour. Lighten and Darken adjust HSL lightness, Saturate and Desaturate adjust HSL saturation, and Complement moves the hue to the opposite side of the wheel. Invert and Grayscale offer additional transformations. Each action changes the starting colour and regenerates the selected harmony, so it is easy to compare a bright palette with a calmer or darker version without rebuilding it.

Select a harmony and refine it

• Open the Color Harmony menu and choose complementary, analogous, triadic, tetradic, split-complementary, square, or monochromatic.
• Review the generated swatches and their position on the colour wheel. The description beneath the palette explains the selected relationship.
• Click any swatch to promote it to the starting colour. The picker, formats, wheel, combinations, and palette all update around that choice.
• Use the copy icon on a palette swatch when you only need its HEX code, or use the format panel for another colour notation.
• Check the Text & Background Combinations before assigning a swatch to text, a surface, a button, or another functional role.

Harmony rules implemented by the generator

The generator converts the current RGB colour to HSL, applies the selected hue and lightness offsets, and converts the results back to RGB and HEX. Angles wrap around the colour wheel, so a value beyond the end returns to the beginning. These are the exact structures produced by each option:

Complementary and monochromatic palettes do more than rotate hue. Complementary adds and subtracts twenty points of HSL lightness around the base and its opposite. Monochromatic uses lightness offsets of thirty and fifteen points above and below the base. Values stop at the ends of the HSL lightness range, so a very pale or very dark seed may produce swatches that are closer together.

A worked palette example

Start with #336699, which the format panel represents as hsl(210, 50%, 40%). Complementary mode produces #6699CC, #336699, #19334D, #996633, and #4D3319. The result contains pale and deep blue choices plus brown-orange accents. Analogous mode instead produces #339966, #339999, #336699, #333399, and #663399, moving from green through blue to violet while retaining the same saturation and lightness. Triadic mode reduces the set to #336699, #993366, and #669933.

These outputs show why the harmony menu is a design decision, not just a shuffle button. Analogous colours share a visual neighbourhood, triadic colours create three separate families, and the complementary result includes tonal variations that can become surfaces or text. If a result feels too vivid, Desaturate the current colour and regenerate it. If its roles are difficult to separate, use Lighten or Darken to create more luminance difference.

How HSL helps when choosing a palette

HSL separates three decisions that are easy to blur together when looking only at HEX. Hue is the colour family and its position around the wheel. Saturation describes how intense or muted the colour is. Lightness moves the colour toward white or black. The picker itself uses hue with an HSV saturation-and-value square, but the format panel displays the corresponding HSL value and the harmony engine performs its relationships in HSL.

• Change hue when the colour family is wrong or when you want to explore another part of the wheel.
• Reduce saturation when several accents compete for attention or when a surface needs to sit behind content.
• Change lightness when roles need clearer separation, especially for text, borders, controls, and layered surfaces.
• Keep a hue while varying lightness when you want hover, selected, or emphasis states that still feel related.

HSL lightness is useful for systematic adjustments, but it is not the same as WCAG relative luminance. Two hues with the same HSL lightness can produce very different contrast against white or black. Treat HSL as the palette-building model, then use the measured contrast result for accessibility decisions.

What makes a palette usable in an interface

Give every colour a job

A usable interface palette has roles rather than a collection of equally loud swatches. Choose a surface or page background, a primary text colour, a secondary text colour, a primary action colour, and a restrained accent. Add border and state colours only where they communicate something. A harmony can guide which hues belong together, but it does not decide which colour should dominate or how often each colour should appear.

Start by choosing the quietest suitable swatch for large surfaces. Reserve the strongest colour for actions, current selections, or small areas of emphasis. Dark and light versions of the same family often make more dependable text, border, and surface roles than several saturated hues placed side by side. Preview the scheme in context: a swatch that looks elegant in isolation can become tiring across a full page, while a subdued colour may work well as a background.

Design states, not only a resting screen

• Check default, hover, active, selected, focus, error, and disabled appearances where those states exist.
• Do not use colour as the only cue for meaning. Pair it with text, an icon, an underline, a shape, or another visible change.
• Test light text on dark surfaces and dark text on light surfaces instead of assuming one choice works everywhere.
• Keep enough difference between adjacent surfaces and controls for boundaries and states to remain visible.
• Recheck transparent colours on the background where they will actually be rendered.

Copy, save, and reuse colour values

Each generated harmony swatch has a copy control for its HEX value. The Color Preview & Formats panel provides copy buttons for HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, and HWB representations of the current colour. There is no file-download export in this generator; copy the values you need into CSS custom properties, a design token file, a presentation theme, or your design application.

Save Current stores the selected colour and opacity in the browser's local storage. Saved swatches can be clicked to restore a colour or removed when no longer needed. Because this storage is tied to the current browser and device, it is convenient for an ongoing local shortlist but is not a cloud library. Share Color copies the current page URL. The URL state records the colour and, when applicable, opacity and the non-default harmony selection, making the link the practical way to pass a starting setup to someone else.

Check which palette pairs are safe for text

Read the contrast combinations

The Text & Background Combinations section creates a solid background from every harmony swatch and tests both white and black text on it. It also considers one harmony colour as text on another harmony colour, but includes those colour-on-colour pairs only when they reach the WCAG AA large-text threshold. Results are sorted from the highest contrast ratio to the lowest. Each card shows a heading and body sample, the two HEX values, the ratio, and an AA-oriented badge. You can copy either value separately or copy the background-and-text pair together.

For body copy, captions, labels, form help, and other normal-sized text, choose a card marked All text sizes. Large text only is not a body-text pass. The font selector lets you preview the cards in different typefaces, and Random Font chooses another preview family, but changing the family does not change the numerical contrast ratio or turn small text into large text.

Accessibility example using the generated palette

Return to the #336699 complementary palette. White on #336699 has a contrast ratio of 6.00:1, so it clears the AA requirement for body text. White on the lighter #6699CC is only 3.00:1, making it a large-text choice rather than a body-text choice. Black on that same light blue is 6.99:1 and is safe for normal text at AA. White on #19334D is 12.95:1, making the dark blue a much stronger background for light body text.

The checker calculates these combinations with fully opaque versions of the harmony colours, even if the opacity slider is below full. If you plan to use RGBA or HSLA transparency, the visible result depends on the colour underneath. Test the final composited text and background rather than treating the opaque preview as proof. For a focused audit of a chosen foreground and background, continue with the Color Contrast Checker after the palette roles have been narrowed down.

A practical palette workflow

• Choose a starting colour that reflects the subject or existing brand constraint.
• Compare two harmony rules and select the one whose relationships match the design's tone.
• Assign tentative roles instead of trying to use every generated swatch.
• Adjust saturation for emphasis and lightness for role separation while keeping the hue relationship intact.
• Choose only All text sizes combinations for normal body copy and interface labels.
• Preview interactive states and any transparent layers on their real surfaces.
• Copy the final values, save useful seeds locally, and share the URL when another person needs the same starting setup.

This approach keeps the colour palette generator focused on its real purpose: choosing related colours and turning them into a small, intentional system. Harmony supplies structure, HSL makes the structure adjustable, and the contrast previews reveal which relationships can carry readable content.