CSS Color Palette Generator
Start from one base color and generate a matching palette using real hue rotation and RGB mixing math.
About the CSS Color Palette Generator
Pick a base color and the generator rotates its hue mathematically to build the rest of the set, sixty, one hundred twenty, or one hundred eighty degrees around the color wheel depending on the scheme you choose. Monochromatic keeps the hue fixed and steps the lightness instead, while shades and tints mix the base color's RGB channels toward black or white in five even increments. Every swatch can be copied on its own, or grab the whole palette at once as ready-to-paste CSS custom properties.
Why the tool converts to HSL before doing anything else
Hex and RGB store a color as raw red, green, and blue intensities, which makes "rotate this color 120 degrees around the color wheel" mathematically awkward to express directly. HSL (hue, saturation, lightness) represents the same color as a position on an actual circular color wheel, so a hue rotation becomes simple addition, hue + 120, wrapped back into the 0-360 range with modulo arithmetic. This tool converts your base hex to RGB, then to HSL, performs whatever hue math the selected scheme calls for, and converts back to RGB and hex for display, using the standard piecewise hue2rgb algorithm that maps a hue position into each of the three color channels across six 60-degree segments of the wheel.
How each scheme's angles map to actual color theory
Complementary takes the base color's exact opposite on the wheel (+180 degrees), the classic high-contrast pairing like blue against orange. Analogous picks two neighbors 30 degrees on either side of the base, colors that sit next to each other on the wheel and read as naturally harmonious since they share more underlying wavelength similarity. Triadic splits the wheel into three equal 120-degree segments starting from the base, producing a scheme that's more vibrant and higher-contrast than analogous but still balanced, unlike a complementary pair, which is only two colors, or an arbitrary hue pick, which has no mathematical relationship to the base at all.
Why shades, tints, and monochromatic all look different despite using the same base color
These three modes all step through the same five ratios ([0.20, 0.35, 0.50, 0.65, 0.80]), but they apply that number in genuinely different color spaces, which is why the results aren't interchangeable. Monochromatic reuses the base color's existing hue and saturation and only substitutes a new lightness value from HSL space at each step. Shades instead take the original RGB values and linearly interpolate each channel toward black (0, 0, 0), which is mathematically equivalent to scaling every channel down by the same factor, preserving the hue almost exactly but darkening it more aggressively than an HSL lightness change alone would. Tints do the same RGB interpolation but toward white (255, 255, 255) instead, which tends to desaturate the color as it lightens, a pastel-like softening effect that's visually distinct from just raising the HSL lightness value, since mixing toward white pulls the saturation down along with the lightness going up.
The output format matches how you'd actually use it in a project
"Copy All as CSS Variables" doesn't just dump a list of hex codes, it wraps them in a :root { --color-1: ...; } block, ready to paste directly into a stylesheet as custom properties. This matters because CSS custom properties can be referenced anywhere with var(--color-1) and, unlike a Sass or Less variable, can also be overridden per-component or per-theme at runtime (for example, redefining them inside a [data-theme="dark"] selector), which a plain hex-code list wouldn't give you without extra manual setup.
A practical note on picking a scheme for real UI work
Complementary and triadic palettes work well for accent colors, calls to action, and chart series where colors need to visually separate from each other at a glance. Analogous palettes suit backgrounds, illustrations, and gradients where a cohesive, low-tension feel matters more than contrast. Shades and tints are the ones most UI systems actually lean on the heaviest, since a real interface typically needs many variations of one brand color, for hover states, disabled states, borders, and subtle background fills, far more often than it needs entirely different hues.
Frequently Asked Questions
Why does the tool convert my hex color to HSL internally?
HSL represents color as a position on an actual circular wheel, which makes hue rotation (the basis of complementary, analogous, and triadic schemes) a simple addition operation. RGB and hex store raw channel intensities that don't map cleanly onto wheel-based rotation, so converting through HSL is necessary for the color math to work.
What's the difference between the Shades and Monochromatic options?
Monochromatic keeps the original hue and saturation and only changes the HSL lightness value. Shades instead linearly mix the original RGB channels toward black, which scales all channels down proportionally, preserving hue closely but producing a different, often more saturated-looking darkening curve than an HSL lightness change.
Why do Tints look more pastel or washed-out than Monochromatic's lighter steps?
Tints mix the RGB channels toward white, which reduces saturation as the color lightens, producing a soft, pastel effect. Monochromatic's lighter steps instead raise HSL lightness while keeping the original saturation value, so the two techniques produce visually different results even at similar brightness levels.
How is the Triadic scheme different from picking three random colors?
Triadic colors are placed at exactly 120 degrees apart around the color wheel from your base color, dividing it into three equal segments. That even spacing is what gives triadic palettes their balanced yet vibrant look, a mathematical relationship that arbitrary color picks wouldn't have.
What does "Copy All as CSS Variables" actually copy?
It copies a complete :root { } block with each palette color assigned to a numbered custom property, like --color-1 through --color-5, ready to paste directly into a stylesheet and reference anywhere with var(--color-1), rather than just a plain list of hex codes.
Does this tool accept 3-digit shorthand hex codes as the base color?
Yes, both the color picker and the text input accept 3-digit shorthand hex (like #6db) as well as full 6-digit hex, and the shorthand is automatically expanded to its 6-digit equivalent before any color math runs.