Complementary
// COLOR WHEEL
// explore color theory harmonies on an interactive wheel
Free browser-based color harmonies tool. Explore complementary, analogous, triadic, tetradic, and 4 more harmony types with an interactive color wheel. Copy HEX, RGB, and HSL values instantly. No sign-up required.
Click the swatch, type a HEX value, or drag the marker on the color wheel to select a hue.
Select one of 7 harmony types. The wheel instantly shows the geometric relationship between colors.
Click any swatch to copy in your chosen format. Export the full harmony as CSS variables or JSON.
A free browser-based tool for exploring color theory harmonies. Pick any base color, choose a harmony type, and see the resulting colors on an interactive SVG color wheel with geometric connectors. Copy each color or export the full set — no server, no sign-up.
Color harmony refers to combinations of colors that are pleasing to the eye because of their geometric relationship on the color wheel. The rules of harmony come from color theory, which identifies specific angular relationships between hues that produce predictably balanced or dynamic visual results. Harmonious colors feel natural together; discordant colors create tension.
A triadic harmony uses three colors evenly spaced 120° apart on the color wheel — forming an equilateral triangle. A tetradic (or rectangular) harmony uses four colors arranged as two complementary pairs 60° apart from each other — forming a rectangle. Tetradic palettes offer more color variety but require more careful balancing to avoid visual chaos.
A split-complementary harmony takes the base color and instead of using its direct complement (180° away), uses the two colors flanking the complement (150° and 210° away). This creates a high-contrast palette similar to complementary, but with more visual interest and less tension — a popular choice for web UI design.
Analogous colors are adjacent on the color wheel — typically within 30°–60° of each other. They share a common hue family, making them inherently harmonious and calm. Analogous palettes are commonly used in nature-inspired design, photography color grading, and serene user interfaces. They lack contrast compared to complementary schemes.
A double split-complementary (or tetradic variant) uses four colors: the two colors flanking your base color (±30°) and the two colors flanking its complement (210° and 150°). This creates a rich four-color palette with the tension of complementary colors but the added variety of the split offset. It requires careful management of dominant and accent roles.
A practical approach: assign your base color as the primary brand color; use tints of the base for backgrounds; use the complementary or split-complementary color sparingly for calls to action and highlights; use analogous colors for supporting content. Never use all harmony colors equally — assign proportional roles: 60% dominant, 30% secondary, 10% accent.
Color harmony is the principle that certain combinations of colors, determined by their angular relationships on the color wheel, produce aesthetically pleasing and visually coherent results. The concept originates from Johannes Itten's color theory work in the 1960s and has been formalized into a set of geometric rules used by designers, artists, and brands worldwide.
The color wheel arranges hues in a circle based on their spectral relationships. Colors opposite each other produce the most contrast (complementary), while colors close together share visual similarity (analogous). Harmony types are defined by the specific geometric shape formed by connecting the selected hues on the wheel.
This tool implements seven classical color harmony types, each representing a different geometric arrangement on the HSL color wheel. Understanding when to use each type is key to professional color selection.
Complementary — two colors directly opposite (180°) — produces maximum contrast and visual vibration. It is powerful for calls to action and icon design but can be fatiguing if overused. Analogous — three or more adjacent colors within 60° — creates a calm, cohesive feel ideal for backgrounds and atmospheric design. Triadic — three colors 120° apart — offers balanced vibrancy with more variety than analogous schemes. Tetradic and Square — four-color schemes using rectangular or square geometry — provide rich palettes but demand careful proportion management. Split-Complementary softens the tension of a direct complement by flanking it, producing a popular compromise between contrast and harmony.
In user interface design, color harmony theory provides a principled starting point for palette selection, but real-world constraints like accessibility, brand guidelines, and context always take precedence. A complementary palette looks great on a color wheel but may produce a 3:1 contrast ratio that fails WCAG AA for body text. Always validate your harmony-derived colors with a contrast checker before finalizing your palette.
A practical workflow: use this tool to explore harmonic relationships and identify candidate colors, then feed those colors into a contrast checker to verify accessibility. Use the Tint & Shade Generator to build out the full lightness range for each key hue, giving you a complete, accessible design system palette.