Uwarp

Square scheme colors

Four hues spaced at 90° intervals on the color wheel from your base pick.

rgb(51, 102, 153)

rgb(153, 51, 153)

rgb(153, 102, 51)

rgb(51, 153, 51)

The square scheme keeps your base saturation and lightness while rotating hue by 0°, 90°, 180°, and 270°.

Help Us Improve

—

(—)

Square color scheme online

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.

  1. Pick a base color

    Use the color picker or paste a hex value you already use in your project.

  2. Review square swatches

    Check all four generated hues and choose roles for UI, charts, or branding.

  3. 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 /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.