Visual color wheel for selecting colors and exploring complementary, analogous, triadic, and split relationships.
Choose a color on the wheel to see where related hues fall under complementary, analogous, triadic, and split-complementary arrangements. The circular layout turns hue differences into visible angular relationships, making it useful for comparing palette directions before refining individual colors. The main surprise is that a geometrically balanced relationship is not automatically readable or attractive. The wheel organizes hues, but brightness, saturation, surrounding colors, and the relative area occupied by each color still affect the result.
The selected hue acts as the anchor. A complementary hue sits halfway around the circle, while a triadic arrangement places three hues at equal one-third intervals. Analogous colors occupy neighboring parts of the wheel. A split-complementary arrangement replaces the direct opposite with two hues positioned on either side of it.
Moving the anchor around the wheel rotates the selected relationship while preserving its basic geometric pattern. This lets you compare several families without reconstructing each relationship manually. Read the marked positions as palette candidates, then assess the actual colors at their intended saturation, lightness, size, and background rather than treating wheel position as a finished design decision.
No. Complementary hues can still have nearly the same relative luminance, producing poor contrast for text or controls. Use the wheel to choose a hue relationship, then test the exact foreground and background values with an appropriate contrast checker. Adjusting lightness is often necessary even when the hues remain opposite.
The wheel equalizes hue spacing, not visual prominence. Saturation, lightness, surrounding colors, and the amount of space assigned to each hue change how strongly each color appears. A practical triadic design often gives one color the dominant role and uses the other two more selectively. Equal usage is not required.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.