Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Palette Generator tool

Loading...

Example

Input: Base color #C4653A, palette type Triadic

Result: #C4653A, #3AC465, #653AC4

A triadic palette rotates the base hue by 120 and 240 degrees while keeping saturation and lightness, which here simply rotates the red, green and blue channel values.

Palette Schemes and Hue Offsets

SchemeChange from baseResult from #C4653A
ComplementaryHue +180#C4653A, #3A99C4
AnalogousHue -30, +30, +60, -60#C43A54, #C4653A, #C4AA3A, #99C43A, #C43A99
TriadicHue +120, +240#C4653A, #3AC465, #653AC4
Split-complementaryHue +150, +210#C4653A, #3AC4AA, #3A54C4
MonochromaticLightness -30, -15, +15, +30#4E2817, #894729, #C4653A, #D69374, #E7C1B0

Computed with the generator, colors listed in the order the tool shows them.

  1. Choose a base color by entering a 3- or 6-digit hex code.
  2. Select a palette type from the menu: complementary, analogous, triadic, split-complementary, or monochromatic.
  3. View the generated palette of harmonious colors displayed as swatches with their hex codes.
  4. Click the copy button next to any color to copy its hex code, or click a swatch to make it the new base color.
  5. Copy the entire palette as a comma-separated list of hex codes with the All button, or as CSS custom properties with Copy CSS.

Color Harmony Rules for Building a Palette

Pick one base color and this generator builds a matching palette by rotating its hue around the color wheel. From #C4653A, a triadic palette adds #3AC465 and #653AC4, and a complementary palette adds one blue, #3A99C4. Saturation and lightness stay the same, so the colors feel related.

There are five schemes. Complementary adds the opposite hue, 180 degrees away, for strong contrast. Analogous adds neighbors 30 and 60 degrees to each side for a calm, natural look. Triadic spaces three hues 120 degrees apart. Split-complementary uses the two hues beside the complement, at 150 and 210 degrees, for contrast with less tension. Monochromatic keeps the hue and changes the lightness instead.

Treat a palette as a starting point, not a finished design. Hue rotation keeps the HSL numbers equal, but some hues look much brighter than others at the same lightness. Yellows and greens often need toning down, and blues may need lifting. Pick one color to lead, one or two to support, and add neutrals for text and backgrounds.

Click any swatch to make it the new base and explore from there. You can copy single hex codes, the whole list, or a block of CSS custom properties. Before you use a pair for text, test it in the Color Contrast Checker. For lighter and darker versions of a color, use the Color Shade and Tint Generator.

Frequently Asked Questions

It is the hue directly opposite on the color wheel, 180 degrees away. On the RGB wheel used for screens, orange pairs with blue and red with cyan. Side by side they make each other look stronger, so designers often use one as the main color and the other as a small accent.
Analogous colors sit next to each other, here 30 and 60 degrees from the base, so they blend smoothly and feel calm. Triadic colors are spread evenly at 120-degree steps, so they contrast more and feel lively. Analogous suits backgrounds and illustrations, while triadic works when you need clearly different colors, such as chart series.
It keeps the hue and saturation of your base color and changes only the lightness. The tool makes two darker colors, 15 and 30 points lower, and two lighter ones, 15 and 30 points higher. Lightness is kept between 10% and 95%, so you will not get pure black or pure white.
Three to five is common. A typical split is one main brand color, one or two accents, and a neutral for text and backgrounds. More hues are hard to use consistently. If you need more variety, add lighter and darker steps of the colors you already have rather than new hues.
The tool keeps saturation and lightness the same, but our eyes do not see all hues equally. At the same HSL lightness, yellow looks far brighter than blue. Adjust the lightness of single colors by eye, then check any text pairs with a contrast checker.

Related Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Color Tools

Color Shade and Tint Generator

Generate shades and tints of any color. Create darker and lighter variations for complete color scales.

Color Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

RGB to HSL Converter

Convert RGB color values to HSL format. See hue, saturation, and lightness with a live color preview.

Color Tools

Gradient CSS Generator

Create CSS gradients with a visual editor. Build linear, radial, and conic gradients with live preview.

Color Tools