Color Palette Generator

The color wheel and HSL: how a palette is built

The generator converts your base color to HSL, which describes a color by hue, saturation and lightness, and then rotates only the hue by fixed angles. The color wheel is a 360-degree circle: red sits at 0°, yellow near 60°, green near 120°, cyan near 180°, blue near 240° and magenta near 300°. Because saturation and lightness stay the same, the results look like members of one family with a similar brightness and vividness. Behind the scenes there are three steps: HEX to RGB to HSL, a hue rotation, and then HSL to RGB to HEX. Rounding at each step can shift a value by one, so the base color is always shown exactly as you entered it.

One caveat is that HSL lightness does not match perceived brightness. At the same 50% lightness, yellow looks very bright and blue looks dark. If a palette color will carry text or sit behind text, check it with a contrast ratio, as shown below, rather than trusting your eyes.

Scheme rules and when to use each

• Complementary (+180°): the color directly across the wheel. It gives the strongest contrast and works for a single call to action or highlighted word. Using both colors in equal amounts over a large area tires the eye, so let one dominate (70% or more) and keep the other as an accent.
• Analogous (±30°): neighbors on the wheel. Calm and cohesive, but low in contrast, so emphasis can get lost. Good for backgrounds, illustrations and gradients.
• Triadic (+120°, +240°): three colors evenly spaced. Lively and balanced, common in playful or infographic designs. Using all three at the same weight looks busy, so assign one primary, one secondary and one accent.
• Split-complementary (+150°, +210°): instead of the exact opposite, use the two colors on either side of it. You keep much of the contrast with less tension, which makes it a forgiving choice for beginners.
• Tetradic (four colors, 90° apart): rich but hard to balance. Let one color lead and keep the others small. It is also a starting point for category colors in charts.
• Monochromatic: one hue at 20, 35, 50, 65 and 80% lightness. The safest option, and a natural fit for the background, card, border and text tiers of an interface.

Example 1: a palette built from the gold #c9a961

The base #c9a961 is about 41.5° hue, 49% saturation and 58.4% lightness in HSL. Rotating only the hue gives the colors below; the table is calculated with the same formulas when the page is built.

The complement of this gold is the blue #6181c9 at roughly 221.5°. Used for links or secondary buttons on a gold-led brand, it adds a cool counterweight to the warm base.

Reading text contrast with WCAG

The Web Content Accessibility Guidelines (WCAG) compute a relative luminance L for each color and define the contrast ratio as (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05). The scale runs from 1:1 (no difference) to 21:1 (black on white). For normal body text the AA level asks for at least 4.5:1; for large text (roughly 24 px and up, or 18.66 px and up in bold) the minimum is 3:1. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. For every swatch, this tool picks white or black text, whichever gives the higher ratio, and shows that number.

Example 2: white and black text on #c9a961

White text on #c9a961 has a contrast ratio of 2.25:1, below the AA threshold of 4.5:1, while black text reaches 9.33:1, which clears even AAA (7:1). On a gold button, dark text is the more readable choice. Here is the monochromatic ladder for the same hue:

In this table the dark gold at 35% lightness (#856a2d) gives 5.13:1 with white text, which passes AA. Around 50% lightness (#be9841) neither choice is comfortable: white gives 2.71:1 and black 7.76:1, so it is effectively a black-text-only color. Mid-lightness colors are the hardest to use behind text. For checking any two colors you choose yourself, use the Contrast Checker.

A practical ratio: the 60-30-10 guideline

When a fresh palette leaves you unsure where to start, decide the proportions first. A widely used rule of thumb is 60% for the dominant color (backgrounds and large areas), 30% for a secondary color and 10% for an accent. With the five-step monochromatic palette you can use the lightest step as the background, a slightly darker step for cards and dividers, the darkest step for text and the base color as the accent, and it will rarely look off. The “Copy as CSS variables” button copies lines like --color-1: #...;, ready to paste inside a :root block.

Common mistakes and limits

• Using every generated color: treat the output as candidates. Most designs settle on two or three colors, mixed with neutrals such as white, gray and near-black.
• Ignoring lightness: the tool keeps your base color’s saturation and lightness, so blues and purples can look much darker than a yellow of the same lightness. Check contrast before placing text on them.
• Relying on hue alone: red versus green is hard to separate for some people with color vision deficiency. Add icons, labels or a lightness difference, and check with the Color Blindness Test if you are curious how your own eyes handle such pairs.
• Screen versus print: HEX describes screen (RGB) color. Vivid blues and greens can look duller in CMYK print, and monitors differ, so proof printed work.
• Cultural meaning: the same color carries different associations in different regions and contexts, so check the audience before committing.
• The generator applies simple hue rules. It will not define a brand identity for you, and projects that need colors extracted from imagery or validated with users need separate work.

What to do with the result

For a website, copy the CSS variables, define them in :root, and reference only the variables in buttons, links and backgrounds so the colors live in one place. If you need the same colors as RGB or HSL, the swatches already show those values, or use the Color Converter. For a smooth transition between two analogous colors, feed them into the CSS Gradient Generator. To train your eye for the differences these palettes depend on, the Color Matching Game is a quick exercise.

Frequently Asked Questions

Related tools

• Color Converter: switch between HEX, RGB and HSL
• Contrast Checker: test any text and background pair
• CSS Gradient Generator: turn two palette colors into a gradient
• Color Psychology Test: explore how colors are commonly associated with moods