HomeDevColor Scheme Generator
Color tools

Color Scheme Generator

Generate harmonious color schemes from a base HEX: random, monochromatic, analogous, complementary, triadic, and more. Runs locally in your browser.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Pick a base or generate

Set a base HEX, choose a scheme type, then Generate (or press Space) for a new palette.

2

Lock and refine

Lock colors you like, edit any swatch with the color picker or HEX, then regenerate the rest.

3

Export for CSS

Copy individual HEX codes or the full :root custom-property block for your stylesheet.

Color formulas

Core relationships used by this color tool.

ComplementaryH and H + 180°
AnalogousH ± ~24–48° neighbors
TriadicH, H + 120°, H + 240°
Monochromatic / shadesfixed H (and S), stepped L
iHue angles use the HSL circle. Random mode samples pleasant S/L ranges; locked swatches stay fixed when you regenerate.

Example colors

Common picks with formula and result.

ϟ

Analogous teal family

Calm UI set

Base #188FA7 · analogous
#E2DBBE · #D5D6AA · #9DBBAE · #769FB6 · #188FA7
ϟ

Complementary CTA

Blue + warm accent

H ≈ 210° + 180°
Primary + orange-amber accent
ϟ

Monochrome green

One hue, many values

H fixed, L stepped
Shade → mid → tint stack
ϟ

CSS tokens

Export

--color-1 … --color-5
:root { … }

Color scheme generator specification

Version 1.0.0

Definition
A color scheme (or palette) is a set of colors chosen to work together—often from color-wheel relationships such as complementary, analogous, or triadic hues. Generators start from a base color, apply a scheme rule or random variation, and export HEX codes for CSS and design tools.
What it calculates
A 3–6 color palette from a base color and scheme rule (or random), with lockable swatches and CSS/HEX export.
Inputs
  • Scheme type (random, monochromatic, analogous, complementary, split-complementary, triadic, tetradic, shades)
  • Palette size (3–6)
  • Optional base HEX / color picker
  • Per-swatch lock and manual HEX edits
Outputs
  • Palette swatches with HEX and RGB
  • Simple UI preview using the palette
  • Copyable HEX list and :root CSS custom properties
Formula
Unlocked colors = f(scheme, base H/S/L, count); locked colors unchanged on generate

Start with a base color, pick a scheme type, and iterate: lock keepers, regenerate the rest, then export tokens. For geometric exploration on a circular wheel, use the color wheel; for a single precise HEX, use the HTML color picker.

:root {
  --color-1: #E2DBBE;
  --color-2: #D5D6AA;
  --color-3: #9DBBAE;
  --color-4: #769FB6;
  --color-5: #188FA7;
}

body {
  background: var(--color-1);
  color: var(--color-5);
}
.btn {
  background: var(--color-5);
  color: #fff;
}
Scheme types
SchemeColorsBest for
Random3–6Exploration, mood boards
Monochromatic1 hue, many LMinimal, layered surfaces
AnalogousNeighbor huesCalm, cohesive layouts
ComplementaryOppositesStrong accents, CTAs
Split-complementaryBase + near-oppositesContrast with less tension
Triadic120° apartVibrant, balanced brands
TetradicTwo pairsRich multi-color systems
Shades & tintsL / mild S stepsSurfaces, elevation, text
i Let one color dominate; use others for accents. Always check text contrast on backgrounds.
Assumptions
  • Colors are opaque sRGB for web use.
  • Harmony modes use HSL hue offsets similar to classical wheel geometry.
  • Tool runs locally; nothing is uploaded.
Units
  • Hue: degrees 0–360
  • Saturation / lightness: percent
  • HEX: #RRGGBB
Boundary conditions
  • Invalid HEX edits revert to the previous valid value.
  • Space regenerates only when focus is not in an input or select.
  • Lightness is kept roughly in a visible range (~5–95%).
Example
Analogous from #188FA7 → five related teal–sand tones
Validation cases
  • complementary, base H=0° → Includes hues near 0° and 180°
  • monochromatic → Same hue, stepped lightness
  • lock one swatch + generate → Locked HEX unchanged
  • Copy CSS → :root { --color-1: … }
Sources
  • Classical color-scheme / palette harmony geometry
  • HSL as used in CSS Color Module
Calculation version
1.0.0
◌ Color wheel › ◎ HTML color picker › # HTML color codes › RGB RGB color chart › Web Web color codes › ⇄ HEX to RGB ›

Frequently asked questions

Key distinctions behind the tool.

What is a color scheme?

A set of colors chosen to work together in a design, usually guided by relationships on the color wheel (complementary, analogous, triadic, and similar rules).

What is the best scheme for a website?

It depends on brand and contrast needs. Analogous and monochromatic schemes feel calm; complementary and triadic schemes give stronger accents. Prefer one dominant color and check readability.

How do I use a scheme in CSS?

Copy the :root block from the tool and reference var(--color-1), var(--color-2), and so on for backgrounds, text, and buttons.

How is this different from the color wheel?

The wheel emphasizes picking a hue on a circular chart and seeing harmony markers. This generator focuses on full strip palettes, locking colors, regenerating, and exporting CSS tokens.

Does regenerating upload my palette?

No. Generation, locks, and exports run locally in your browser.