Color Harmonies Generator
Generate complementary, analogous, triadic, split-complementary, and tetradic color palettes from any hex color code.
Run tool
This online color harmonies generator creates balanced palettes directly from any valid hexadecimal color value. Enter a 3-digit or 6-digit hex code, select a harmony rule, and generate coordinating colors calculated across the color circle. The tool supports five classic color relationships: complementary for high-contrast pairs 180 degrees apart, analogous for adjacent hues at -30 and +30 degrees with adjusted lightness, triadic for three-way balances spaced by 120 degrees, split-complementary for softer contrast at 150 and 210 degrees, and tetradic for four-color schemes shifting by 60, 180, and 240 degrees. If you omit the base color, the generator defaults to sky blue (#3498db) using the complementary scheme. Each calculated shade is rounded, clamped between 0 and 255 per RGB channel, and returned as a standardized lowercase hex code with a leading hash mark. This makes it straightforward to assemble reliable palettes for web design, digital graphics, and UI styling.
Instructions
- Enter a base hex color code (such as #3498db or e74c3c), or leave it empty to use the default blue.
- Choose a harmony rule from the menu: Complementary, Analogous, Triadic, Split-Complementary, or Tetradic.
- Click the run button to generate the coordinated palette entries.
- Copy the resulting hex color codes to use in your design or stylesheet.
Examples
- Base color #3498db with Complementary harmony produces the base color #3498db and its opposite hue #db7734.
- Base color #e74c3c with Triadic harmony returns the normalized base along with matching hues spaced 120 and 240 degrees apart on the color wheel.
FAQ
Can I enter a 3-character hex code?
Yes. Short 3-character hex inputs such as #f00 or abc are automatically expanded into standard 6-digit hex values before calculating harmonies.
Do I need to include the leading hash symbol?
No. If you omit the leading # mark, the tool automatically adds it before parsing the color.
What happens if I leave the input fields blank?
The generator uses #3498db as the default base color and applies the Complementary harmony type.
Which color harmony types are available?
You can select Complementary, Analogous, Triadic, Split-Complementary, or Tetradic harmony modes.