Loading color tools…
Loading color tools…
Loading color tools…
Generate complementary, triadic, analogous, and other harmonies from any base color. Based on classical color theory.
Two opposite colors on the color wheel
:root {
--base: #2463eb;
--complement: #ebac24;
}Pick any color and instantly get its HEX, RGB, HSL, and CMYK values
Generate beautiful multi-color palettes from a single seed color
Create CSS linear, radial, and conic gradients with live preview and code output
Upload an image and extract its dominant colors as a palette
Pick your base color
Use the color picker or type a HEX code. This is your starting point on the color wheel.
Choose a harmony type
Select from Complementary, Triadic, Analogous, Split-Complementary, Tetradic, or Square.
Review the color strip
The visual strip shows all colors in the harmony with their role labels.
Copy individual HEX values
Click the copy button next to any color in the list below the strip.
Export as CSS variables
Copy the :root block with semantically named variables for each harmony color.