Color Palette Generator
Pick or type a base color and this tool converts it to HSL and generates three ready-to-use palettes around it — complementary, analogous, and triadic — so you can quickly explore color combinations for a design. Click any swatch to copy its hex code.
Complementary
Analogous
Triadic
How it works
Colors are converted to HSL (hue, saturation, lightness) so new colors can be generated by simply rotating the hue. A complementary palette adds the color directly opposite on the color wheel (+180°); an analogous palette adds the two neighboring hues (±30°); a triadic palette adds two hues spaced evenly around the wheel (+120° and +240°).
Tip
Click any swatch to copy its hex code to your clipboard — handy for pasting straight into your design tool or CSS.
Which palette should I use?
Complementary palettes create bold contrast and work well for a single accent color; analogous palettes feel calm and cohesive, great for backgrounds and gradients; triadic palettes are vibrant and balanced, useful when you need three colors that all stand out.
More tools in this category
Exposure Calculator
Find equivalent camera exposures across aperture, shutter speed, and ISO.
Aspect Ratio Calculator
Scale an image or video proportionally and find its simplified ratio.
CSS Gradient Generator
Design a linear or radial CSS gradient and copy the generated code.
Contrast Checker
Check whether a foreground and background color meet WCAG contrast guidelines.
Color Format Converter
Convert any color between HEX, RGB, HSL, and CMYK instantly, with one-click copy for each format.
Typography Scale Generator
Generate a harmonious set of font sizes from a base size and a scale ratio, ready to copy as CSS custom properties.