CSS Gradient Generator

About this tool

Pick a base color on the wheel or type its hex code, choose a color harmony, and get a palette of colors that work together. Copy the HEX codes or CSS variables, or turn the palette into a CSS gradient in one click.

How to use the color wheel

• Base color: press or drag on the wheel. The angle sets the hue, the distance from the center sets the saturation. Or type a hex code.
• Harmony: choose how the other colors relate to the base color (see below).
• Colors and lightness: set how many colors you want, from 2 to 8, and how light or dark the palette is.
• Use it: click a color to copy its hex code, copy the whole palette, or make it a gradient.

Color harmonies

• Complementary: the base color and the one opposite it on the wheel, 180 degrees away. The strongest contrast, best with one color leading and the other as an accent.
• Analogous: neighbours on the wheel, 30 degrees apart. Calm and cohesive, like a sunset or a forest, and they make the smoothest gradients.
• Triad: three colors evenly spaced, 120 degrees apart. Vibrant but balanced.
• Split complementary: the base color plus the two colors on either side of its complement. Almost as much contrast as complementary, with less tension.
• Square: four colors evenly spaced, 90 degrees apart. Rich and varied, easiest when one color leads.
• Monochromatic: one hue in lighter and darker versions. Always harmonious, and a safe choice for interfaces and backgrounds.

When you ask for more colors than a harmony has hues, the extra colors are lighter and darker versions of those hues.

How to find the complementary color of a hex code

Type or paste the hex code into Base color and choose Complementary. The complementary color is the one opposite yours on the wheel: its hue is 180 degrees away, with the same saturation and lightness. For example, the complement of #FF6347 (tomato) is #47E3FF.

This wheel uses the RGB color model of screens, so red's complement is cyan, not green as on a painter's wheel.

FAQ

What are complementary colors?

Colors that sit opposite each other on the color wheel, like red and cyan or blue and orange on the RGB wheel. Side by side they make each other look more intense, which is why they're used for contrast and accents.

What is a color harmony?

A combination of colors chosen by their position on the color wheel: opposite (complementary), next to each other (analogous) or evenly spaced (triad, square). Harmonies are a quick, reliable starting point for a palette.

What's the difference between analogous and complementary colors?

Analogous colors sit next to each other on the wheel and feel calm and cohesive. Complementary colors sit opposite each other and create strong contrast. Analogous palettes make smooth gradients, complementary ones make bold, high-contrast gradients.

Why is red's complement cyan and not green?

Painters traditionally use a red, yellow and blue (RYB) color wheel, where red sits opposite green. Screens mix light in red, green and blue (RGB), and on that wheel red sits opposite cyan. This tool uses the RGB wheel, since the colors end up on a screen.

Can I turn a color harmony into a gradient?

Yes. Make it a gradient opens the palette in the gradient generator as a linear gradient. There you can switch it to radial, conic or mesh, adjust the colors, then copy the CSS or download it as an image.