💻 Developer Tools

Color Scheme Generator

Pick one base color and get a full set of harmonies — complementary, analogous, triadic and more. Your input never leaves your browser.

Examples (click to try)
Base color #ea6379

Click any color to copy its HEX. Change the base color and every scheme updates instantly.

Related tools

🎨 Color ConverterHEX ⇔ RGB ⇔ HSL 🎚️ Color Shade Scale Generator50–950 lightness scale from one color 🌈 CSS Gradient GeneratorLinear & radial with live preview 🌐 Punycode / IDN ConverterIDN ⇔ xn-- (Punycode) 📎 MIME Type ReferenceExtension ⇔ Content-Type lookup 🔳 Border Radius GeneratorRounded corners & blob shapes { } JSON FormatterFormat, minify & validate JSON 🔡 Base64 Encode / DecodeText ⇔ Base64

How to use the Color Scheme Generator

Change the color and everything updates live. Click any HEX to copy it; your color never leaves the browser.

Pick a base color with the color picker, or type a #hex, rgb() or hsl() code. Based on the color wheel, a full set of harmonious schemes is generated. Click a color you like to copy its HEX, ready to paste into CSS or a design tool.

Example: build a palette from one color

With the base color #ea6379 (a rose), you get colors such as:

  • Base color: #ea6379
  • → Complementary (opposite): #62ead3
  • → Analogous (neighbors): #ea62bc / #ea8f62
  • → Triadic (evenly spaced): #79ea62 / #6279ea

Use the base as your main color, the complementary as an accent (buttons, links), and the analogous or monochromatic tones for backgrounds and supporting elements for a cohesive result.

The scheme types

  • Complementary: opposite on the wheel (180°). Strong contrast — eye-catching accents.
  • Analogous: neighbors (±30°). Calm, cohesive palettes.
  • Triadic: the wheel split in three (120° apart). Vivid and balanced.
  • Split Complementary: the two colors beside the complement (150° / 210°). Softer contrast than a straight complement.
  • Tetradic: four colors 90° apart. For richer, multi-color layouts.
  • Monochromatic: one hue at different lightness levels. For shading and depth.

Frequently Asked Questions

Is the color I pick sent to a server?
No. All color-scheme calculation happens entirely in your browser. The base color and the schemes you generate are never transmitted to or stored on any server. You can use this tool with complete confidence.
What are complementary and analogous colors?
Complementary colors sit opposite each other on the color wheel (180 degrees apart) and create strong contrast, good for accents. Analogous colors are neighbors (within about 30 degrees) and give a calm, cohesive look. Triadic uses three colors evenly spaced (120 degrees apart) for a balanced palette.
How should I use the generated scheme?
Use the base color as your main or brand color, the complementary color for accents such as buttons and links, and the analogous or monochromatic tones for backgrounds and supporting elements. Click any HEX to copy it straight into CSS or a design tool.