Color Palette Generator

It converts your base hex color to HSL (hue, saturation, lightness), then rotates the hue around the color wheel to build each harmony. Complementary adds the opposite hue (180 degrees away), analogous adds neighbors at plus and minus 30 degrees, triadic spaces three colors 120 degrees apart, and tetradic spaces four colors 90 degrees apart. Each result is converted back to a hex code.

Complementary gives you two high-contrast opposites, good for accent colors. Analogous keeps three neighboring hues for a calm, cohesive look. Triadic and tetradic spread three or four evenly spaced hues for balanced, vibrant schemes. Monochromatic keeps a single hue and only varies lightness, producing five tints and shades of the same color.

Monochromatic keeps your base hue and saturation fixed and steps the lightness up and down by 15 percentage points to create five shades. The values are clamped between 10 percent and 90 percent lightness, so a very dark or very light base never collapses to pure black or pure white.

You can type a 3-digit or 6-digit hex code, with or without the leading hash, for example #f53 or #ff5733. You can also use the color picker swatch to choose a base color visually. Anything else is rejected and the generator asks for a valid hex value.

Each swatch reports its WCAG 2.1 contrast ratio against white and black, on a scale from 1 to 21. A higher number means more contrast. The generator labels each swatch with whichever text color (white or black) reads more clearly on it, which helps you judge whether the color works for text or UI elements.

Yes. Click any swatch to copy its hex code to your clipboard, or use Copy all to grab every hex code in the palette as a comma-separated list. You can paste these straight into CSS, Figma, or any design tool that accepts hex values.