Aqeeb Studio

Palettes & Harmony

Tetradic Color Generator

Enter a color to build a four-color scheme from two complementary pairs. The rectangle option for royal blue #4169E1 gives #B941E1, #E1B941 and #69E141, and the square option gives #E141B9, #E1B941 and #41E169.

Shape

Open in the palette generator

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Tetradic Color Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. Choose Rectangle (60° and 180° steps) or Square (90° steps, four evenly spaced colors).
  3. Read the four swatches with HEX codes and names, and copy the ones you need.
  4. Export the scheme as CSS, JSON or CSS variables, or open it in the palette generator.

Examples

Rectangle

From royal blue at 225° the rectangle adds 285°, 45° and 105°: #B941E1, #E1B941 and #69E141. Two pairs of near neighbors sit opposite each other.

Square

The square adds 315°, 45° and 135°, giving #E141B9, #E1B941 and #41E169. All four colors are evenly spaced.

Keeping it calm

Four saturated colors are a lot. Make one color the star, keep one or two as accents and treat the last as a neutral by lowering its saturation.

Tips

  • Use tints and shades of the four colors for backgrounds so the main hues stay clean.
  • Check contrast for text on every color before using it in an interface.

Questions about the Tetradic Color Generator

What is a tetradic color scheme?

It uses four colors arranged as two complementary pairs. On the wheel they form a rectangle, or a square when the spacing is equal.

Rectangle or square: which is better?

The rectangle gives a little more variation in warmth and coolness. The square is more evenly balanced and also more demanding, because no single color is a natural anchor.

How can I stop a four-color palette looking messy?

Choose a dominant color, reduce the saturation of two of the colors and rely on neutrals for backgrounds and text.

Where are the angles for the rectangle from?

This tool uses +60°, +180° and +240° from the base, which keeps two complementary pairs 60° apart.

Triadic Color Generator

Get three evenly spaced colors from the color wheel.

Complementary Color Generator

Find the color opposite any color on the color wheel.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.