Explore color harmonies with custom angles, sliders, and real-world use cases.
Two colors directly opposite each other on the wheel (180° apart). Creates high contrast and vibrant looks.
The most interactive color wheel with unique features for designers.
Complementary, analogous, triadic, split-complementary, tetradic, square, monochromatic, and custom angles.
Define your own harmony by specifying exact degree separations. Create unique color combinations not available in presets.
Adjust color intensity and brightness with dedicated sliders. Fine-tune your harmony to perfection.
Each harmony includes real-world usage tips and best practices for web design, branding, and art.
Rotate the entire wheel to align specific hues or create variations of the same harmony scheme.
Export as CSS variables, SCSS, JSON, or Tailwind config. Ready to use in any project.
Click anywhere on the wheel to select a base color. The tool automatically generates harmony colors based on your selected harmony type. You can adjust saturation and lightness using the sliders below the wheel.
Custom angles let you define your own harmony by specifying exact degree separations. For example, you can create a 45-90-180 degree harmony for unique color combinations not available in standard presets.
RGB (Red-Green-Blue) is used for digital screens and web design. RYB (Red-Yellow-Blue) is the traditional artist's wheel used in painting. You can switch between them using the color model selector.
Click the lock icon next to any color in the harmony output. Locked colors won't change when you move the wheel, allowing you to build custom palettes around fixed colors.
Each harmony type includes real-world usage tips. For example, complementary colors work great for call-to-action buttons, while analogous colors are perfect for calm, nature-inspired designs.
The tool calculates the WCAG contrast ratio between your primary colors. If the ratio is below 4.5:1, you'll see a warning to help you create accessible designs for all users.
Yes! Use the rotation slider to rotate the entire wheel. This is useful for aligning specific hues with the top position or for creating variations of the same harmony.
You can export your harmony as CSS variables, SCSS variables, JSON, or Tailwind config. Click any export button to copy the code to your clipboard.
The saturation slider controls color intensity (0% = gray, 100% = vivid). The lightness slider controls brightness (0% = black, 50% = pure color, 100% = white). Both affect all harmony colors.
Yes, 100% free with no signup required. All processing happens in your browser using Canvas API - your colors never leave your device.