Softonic

Color Wheel Explorer

Step 1 / 4

Choose the base color

Drag a pin around the colour wheel and watch harmony markers rotate with it, complementary at 180°, triadic at 120° intervals, analogous neighbours, split-complement, tetradic. Switch between HSL (the engineering wheel) and RYB (the artist’s wheel), compare how they disagree, and copy whichever combination you settle on as a palette.

How the colour wheel explorer works

  1. 1

    Drag the pin around the wheel

    The pin sets your base colour. Saturation and lightness slide with separate controls.

  2. 2

    Select a harmony

    Complementary, analogous, triadic, split-complement, tetradic, monochromatic. Harmony markers rotate with the base.

  3. 3

    Switch model (HSL vs RYB)

    HSL wheel is symmetrical (red opposite cyan, green opposite magenta). RYB wheel is asymmetrical (red opposite green, blue opposite orange: matches paint mixing intuition).

  4. 4

    Copy the palette

    Hex, RGB, HSL for base and each harmony mark. CSS variables, Sass map or plain CSV.

HSL wheel vs RYB wheel

Both wheels arrange colours in a circle, but they disagree about which colours are “opposite”:

Base HSL complement RYB complement
Red Cyan Green
Orange Teal Blue
Yellow Blue Purple
Green Magenta Red
Blue Yellow Orange
Purple Yellow-green Yellow
  • HSL (hue, saturation, lightness): a cylindrical representation of sRGB used in CSS and digital design. Adding 180° selects the opposite hue on this digital wheel.
  • RYB (red, yellow, blue): a traditional conceptual wheel used in art education. This explorer remaps hue angles to approximate that convention; it does not predict the result of mixing real pigments.

Both are valid for different goals. Use HSL for screen work; use RYB when you care about painted-media intuition.

Harmony definitions on the wheel

  • Complementary: base + 180°. Strongest hue separation on the selected wheel.
  • Analogous: base with neighbours at -30° and +30°. Soft and unified.
  • Triadic: base + 120° + 240°. Balanced vibrancy.
  • Split-complement: base + 150° + 210°. Rich without the full tension of complementary.
  • Tetradic / square: base + 90° + 180° + 270°. Four hues at equal spacing.
  • Monochromatic: same hue, different lightness/saturation.

Temperature on the wheel

  • Warm half: reds, oranges, yellows. Traditionally advancing (draws eye forward).
  • Cool half: greens, blues, purples. Traditionally receding.
  • Neutrals: desaturated colours; belong to either half depending on tint.

Practical uses

  • Brand palette exploration: drag the pin until you find a colour that fits, then check triadic or tetradic marks for supporting accents.
  • Art studies: pick a photo reference, find the dominant hue, look at analogous neighbours for monochromatic shading.
  • Illustration: choose a complementary pair for shadows, e.g. for an orange object, paint shadows in blue rather than just darker orange.
  • Interior design mock-up: triadic wheels map to classic interior palettes (blue/yellow/red in traditional American; green/orange/purple in bohemian).

Why the wheel isn’t perfectly intuitive

Actual human colour perception is more complex than either wheel suggests. The Munsell system, LAB and OKLCH all attempt perceptually uniform arrangements, and they don’t make a simple circle, chroma varies with lightness at every hue. For production design-system work, perceptual colour spaces give cleaner results than wheels; for conceptual colour exploration, the wheel still wins on clarity.

Frequently Asked Questions

HSL for digital design (CSS, screens, UI). RYB when you’re thinking about paint, printing or traditional art and want the conventional art-school harmony intuition.

The models arrange hue differently. HSL uses the sRGB hue angle, so the opposite of red is cyan. The traditional RYB convention places green opposite red. RYB here is a visual approximation, not a prediction of how particular paints will mix.

For education, sketching ideas and client communication, yes. For precise palette work, professionals increasingly use perceptual spaces (LAB, OKLCH) where lightness and chroma are independent of hue.

Copy the palette as CSS, Sass or CSV and save it where you work. The explorer has no palette library or account storage. In the four-step flow, the visible wheel settings are included in the URL and may remain in your browser history.

Related Tools

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

BBCode to HTML Converter

Convert BBCode (bulletin-board markup) to clean HTML. Handles formatting tags, lists, quotes, code, images, links and tables.

Random Color Palette Generator

Generate random color palettes from 2 to 15 swatches, choose a vibrant, pastel, muted or dark style, then copy HEX codes or CSS variables.