Color Harmony Generator
Enter a base color to build matching schemes from the color wheel. The tool rotates the hue to derive complementary, analogous, triadic, tetradic, split complementary and monochromatic palettes.
How to generate a color harmony
- Pick a base color with the swatch or paste a hex value.
- Review the complementary, analogous, triadic and other schemes.
- Copy any color or the whole palette into your design.
Examples
Complementary of red
#FF0000
#00FFFF
Triadic of red
#FF0000
#FF0000, #00FF00, #0000FF
Frequently asked questions
How are the schemes calculated?
Your base color is converted to HSL, the hue is rotated by fixed angles for each scheme, then each result is converted back to a hex value. The math is the standard color wheel approach.
What is a complementary color?
It is the color directly opposite on the wheel, found by rotating the hue 180 degrees. Complementary pairs have strong contrast and are good for accents.
What is the difference between triadic and tetradic?
Triadic uses three colors spaced 120 degrees apart, while tetradic uses four colors at 90 degree steps. Tetradic offers more variety but is harder to balance.
What does the monochromatic scheme show?
It keeps the same hue and saturation while stepping the lightness up and down, giving you tints and shades of a single color for subtle, cohesive designs.
Is my color sent anywhere?
No. All of the conversions run in your browser and nothing about your color choices is uploaded.
Related tools
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.