Create a complete color scheme from any starting color. Choose from five harmony types: complementary, analogous, triadic, tetradic, or monochromatic. Each scheme generates 2–5 coordinated colors with hex, RGB, and HSL values. Copy individual swatches or all colors as CSS custom properties. All calculations run locally in your browser.
Base color
#3cf6af
#3ce0f6
#3b82f6
#523cf6
#af3cf6
PALETTE TYPE
How it works
All color calculations use the HSL (hue, saturation, lightness) color space. The base color is converted from hex to HSL, and the hue is rotated by a fixed amount depending on the palette type (complementary: 180deg, triadic: 120deg/240deg, etc.). The adjusted hue values are converted back to RGB and then to hex for display. All arithmetic runs in JavaScript in your browser.
Processing runs in your browser
All processing happens locally in your browser tab. Our servers are not involved at any point.
Related operations
For lightening or darkening a single colour, try tints and shades. To convert any chosen swatch between HEX, RGB, and HSL, use the colour converter. For testing readable text colours on your palette, see the contrast checker.
Frequently asked questions
What is a color scheme?
A color scheme is a set of colors chosen to work harmoniously together in a design. Good color schemes have clear relationships between their colors, defined by their positions on the color wheel.
Which color scheme is best for websites?
Analogous schemes (adjacent hues) feel cohesive and calm, good for content-heavy sites. Complementary schemes create contrast, good for landing pages. Monochromatic schemes are elegant and simple. The best choice depends on your brand and message.
What is an analogous color scheme?
An analogous scheme uses 3–5 colors adjacent on the color wheel, typically within 60–90 degrees of each other. Because the hues are closely related, analogous palettes feel harmonious and natural, common in nature and easy on the eye.
Is my data sent to a server?
All color calculations are pure JavaScript running in your browser. All processing runs in your browser.