What is a color square on the color wheel?

A color square means four hues at equal 90° spacing on the wheel. This tool calculates that square color wheel relationship instantly from your base hex.

How is square different from tetrad color scheme?

Square schemes use equal 90° spacing. Tetrad schemes can also include a rectangular variant (such as 60° and 180° offsets). Use Tetrad Color Scheme when you want both square and rectangular outputs.

How do I use square scheme colors in UI design?

Start with one base hex, then assign the four outputs to roles like primary, secondary, success, and accent. Reduce saturation on supporting swatches if the palette feels too strong.

Is this the same as complementary colors?

A square scheme includes complementary relationships, but it provides four hues instead of a single opposite pair. That gives you more flexibility for interfaces and illustrations.

Can I make a square scheme from image-picked colors?

Yes. Sample a color on Image Color Picker, paste the hex here, and copy all four square scheme swatches.

Does this invert or desaturate colors?

No. Square schemes rotate hue while preserving saturation and lightness. For inversion use Invert Color; for grayscale use Greyscale Desaturate Color.

Are colors sent to a server?

No. All calculations run locally in your browser.

Base

#336699

hsl(210, 50%, 40%)

+90°

#993399

hsl(300, 50%, 40%)

+180°

#996633

hsl(30, 50%, 40%)

+270°

#339933

hsl(120, 50%, 40%)

Scheme colors

Base · Color 1

rgb(51, 102, 153)

+90° · Color 2

rgb(153, 51, 153)

+180° · Color 3

rgb(153, 102, 51)

+270° · Color 4

rgb(51, 153, 51)

Base color

Help Us Improve

—

(—)

Square color scheme online

Q: What is a square color scheme?

A square color scheme (or square colour scheme) uses four hues spaced evenly around the color wheel at 90° intervals. It creates a balanced four-color palette with strong contrast and multiple accent options.

Generate a square color scheme from any hex. Build a square color wheel set with four evenly spaced hues and copy square colors as HEX, RGB, and HSL.

What is a square color scheme?

A square color scheme selects four hues equally spaced on the color wheel, creating high contrast with balanced distribution. This square color wheel page starts from your base hex, rotates hue by fixed 90° increments while preserving saturation and lightness, and returns four square scheme colors you can copy for UI and brand systems, including square color scheme examples for fast testing.

Square scheme features

Four evenly spaced square color wheel hues from one base hex with instant copy.

Base color picker
Choose visually or paste a six-digit hex to update all scheme swatches instantly.
Square color wheel math
Generates four hues at 0°, 90°, 180°, and 270° around the wheel.
Square color examples
Preview square color scheme examples side by side for quick comparison and selection.
HEX and RGB output
Each swatch shows color code output with one-click HEX copy.
HSL-preserving hue rotation
Retains source saturation and lightness while rotating hue offsets.
No account
Free and unlimited in modern browsers.

How to generate a square color scheme

Three quick steps to get four harmonized colors.

Pick a base color
Use the color picker or paste a hex value you already use in your project.
Review square swatches
Check all four generated hues and choose roles for UI, charts, or branding.
Copy color codes
Copy the HEX values into CSS variables, design tokens, or Figma styles.

Tips for square palettes

Practical advice for using four strong hues well.

01
Reduce saturation on secondary colors
Square palettes can feel loud; mute two swatches to improve hierarchy.
02
Check text contrast
Harmony does not guarantee accessibility—validate pairs on Colour Contrast Checker.
03
Need rectangular variants?
Use Tetrad Color Scheme for both square and rectangular tetrad outputs.
04
Start from image samples
Pick a source color on Image Color Picker, then build your square scheme here.
05
Adjust lightness afterward
Tune each swatch with Lighten Color or Darken Color for production use.
06
Document role mapping
Name each swatch role (primary, accent, warning, success) for consistent team usage.

When to use square schemes

Common scenarios for four-way color harmony.

Brand system expansion
Expand one brand hex into four harmonized accents for marketing assets.
Data visualization colors
Assign chart series colors that remain distinct but related.
UI state palettes
Map states like info, warning, success, and accent from one source hue.
Presentation themes
Generate cohesive slide accent colors without manual wheel calculations.
Illustration sets
Create vivid, balanced palettes for icons and flat artwork.
Quick palette experiments
Try different base colors to generate fresh square color scheme examples quickly.

Why use this square tool

Benefits of instant four-color generation.

Consistent spacing
Equal 90° hue spacing gives predictable square harmony.
Private
All color calculations stay in your browser.
Fast copy workflow
Copy each generated swatch immediately for handoff and implementation.
Interoperable formats
Use HEX for tokens, RGB for UI docs, and HSL for design reasoning.
Free
No credits, login, or limits.
Focused scope
Purpose-built for square schemes, not broad palette extraction from images.

Technical details

How square scheme colors are calculated.

Color model: RGB input converted to HSL, then hue rotated by fixed offsets.
Offsets: Square positions use 0°, 90°, 180°, and 270° from the base hue.
Input: Six-digit hex from picker or text field.
Output: Four swatches with HEX, RGB, and HSL strings.
Processing: Client-side only with no network requests.
Browser support: Modern Chromium, Firefox, and Safari.

Sources & References

Authoritative references on color wheel relationships, hue rotation, and the HSL color model this square scheme generator uses.

“A square color scheme uses four hues evenly spaced around the color wheel at 90° intervals, creating a balanced palette with complementary relationships between opposite pairs.”
— Wikipedia — Color theory
Color harmony — square and tetradic schemes: The tool takes the base hue in the HSL color space and generates three additional hues at +90°, +180°, and +270° offsets. Saturation and lightness remain constant across all four swatches. en.wikipedia.org/wiki/Color_theory
“In the HSL color model, hue is measured in degrees around the color wheel from 0° to 360°. Rotating the hue produces related colors at fixed angular intervals.”
— Wikipedia — HSL and HSV
HSL hue rotation for color schemes: Each scheme swatch is produced by converting the base hex to HSL, adding a fixed hue offset, and converting back. The square scheme uses 0°, 90°, 180°, and 270° offsets. en.wikipedia.org/wiki/HSL_and_HSV
“The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors.”
— Wikipedia — RGB color model
RGB color model for output formatting: After applying hue rotation in HSL space, each scheme color is converted back to RGB for the output hex and rgb() display strings. en.wikipedia.org/wiki/RGB_color_model

Frequently Asked Questions

Quick answers about this tool—open a question to read more.