Super Boring Tools

Search tools

Find a tool by name or what it does.

Tetradic Color Generator

Turn one base color into a four color tetradic scheme. Pick rectangle or square spacing and copy the palette as CSS variables.

HEX, RGB, or HSL, or pick a color. The scheme updates live, all in your browser.

Scheme

#6366f1
rgb(99, 102, 241)hsl(239, 84%, 67%)
#ee63f1
rgb(238, 99, 241)hsl(299, 84%, 67%)
#f1ee63
rgb(241, 238, 99)hsl(59, 84%, 67%)
#66f163
rgb(102, 241, 99)hsl(119, 84%, 67%)
CSS variables
:root {
  --tetradic-1: #6366f1; /* base */
  --tetradic-2: #ee63f1;
  --tetradic-3: #f1ee63;
  --tetradic-4: #66f163;
}

How to generate a tetradic color scheme online

  1. Enter a base color

    Type a HEX, RGB, or HSL value, or pick one with the color swatch.

  2. Choose the spacing

    Switch between rectangle and square modes, and adjust the rectangle angle with the slider.

  3. Copy the palette

    Copy any swatch as HEX, or grab all four colors at once as ready-to-paste CSS variables.

Why use this tool

Rectangle and square modes

Build a classic rectangle scheme from two complementary pairs, or an evenly spaced square scheme with 90 degree steps.

Adjustable spacing angle

In rectangle mode, a slider sets the pair spacing from 15 to 75 degrees and the palette updates as you drag.

HEX, RGB, and HSL for every swatch

Each of the four colors shows all three formats, with a one-click copy button on the HEX code.

CSS variables output

The whole scheme is generated as a :root block of custom properties you can paste straight into a stylesheet.

Runs entirely in your browser

Colors are computed on your device. Nothing is uploaded and no account is needed.

About this tool

A tetradic color scheme uses four hues arranged as a rectangle or square on the color wheel, which makes it two complementary pairs working together. It is the richest of the classic harmonies: four distinct hues give you plenty of room for backgrounds, accents, and highlights, but the built-in complements keep the set balanced instead of random. This generator takes one base color and computes the other three by rotating its hue while keeping saturation and lightness fixed, so every color in the scheme has the same visual weight as the one you started with.

Rectangle mode places the second color at an adjustable angle from the base (60 degrees by default, adjustable from 15 to 75), then mirrors both across the wheel. Square mode locks the spacing to even 90 degree steps for a perfectly balanced set. Each swatch displays its HEX, RGB, and HSL values with a copy button, and the full palette is also written out as CSS custom properties in a :root block so you can drop it into a project unchanged. Input accepts HEX with or without the hash, shorthand three-digit HEX, and rgb() or hsl() notation.

Tetradic schemes work best when one color leads and the other three support it, so treat the base as your dominant color. If you want fewer colors to manage, a triadic scheme uses three evenly spaced hues, and a single complementary color is the simplest pairing of all. Very low saturation colors barely change under hue rotation; the tool flags that case rather than showing four near-identical greys without explanation.

Frequently asked questions

What is a tetradic color scheme?
It is a four color harmony built from two complementary pairs. On the color wheel the four hues form a rectangle (uneven spacing) or a square (even 90 degree spacing). This tool derives all four from your base color by rotating its hue and keeping saturation and lightness the same.
What is the difference between rectangle and square spacing?
Square spacing rotates the hue in even 90 degree steps, giving four equally distant colors. Rectangle spacing places the second color at a smaller angle from the base (adjustable from 15 to 75 degrees) and mirrors the pair across the wheel, which usually feels less loud because two of the colors stay closer together.
Which color formats can I enter?
HEX with or without the leading hash, including three-digit shorthand, plus rgb() and hsl() notation with comma or space separated values. Out-of-range channel values are clamped rather than rejected.
Why do all four swatches look the same for my color?
Greys and near-greys have little or no saturation, so rotating their hue changes almost nothing. The tool shows a note when your base color has very low saturation and suggests picking a more saturated one.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server and no account or signup is required.

Related tools