Explore public social data APIs across Instagram, TikTok, YouTube, and Facebook
SocQ

Free Color Wheel & Color Scheme Generator

Find complementary, analogous, triadic and other matching colors on a wheel.

Loading the editor…

How to use this tool

A color wheel finds the colors that go with your base color: drag the marker or enter your brand’s HEX code, choose a color scheme, and the matching colors appear on the wheel and as swatches. Copy the HEX codes one by one, as a list or as CSS variables, ready for a logo, a social post, a YouTube thumbnail or a slide deck.

  1. 01

    Choose a base color

    Drag the large marker around the wheel, adjust Brightness, or type a HEX, RGB or HSL value into Base color.

  2. 02

    Pick a color scheme

    Choose Complementary, Analogous, Triadic, Split complementary, Tetradic, Square or Monochromatic. The partner colors move on the wheel as you change the base.

  3. 03

    Copy the palette

    Copy single HEX codes, use Copy HEX for the whole list, or Copy CSS for a block of variables. Click a partner swatch to make it the new base.

The color schemes

• Complementary: the opposite color; strongest contrast • Analogous: neighbors 30° either side; calm and natural • Triadic: three colors 120° apart; lively but balanced • Split complementary: the base plus the two colors beside its opposite (150° and 210°); contrast with less tension • Tetradic: two complementary pairs 60° apart; rich palettes • Square: four colors 90° apart • Monochromatic: the base plus two darker and two lighter versions of the same hue

RGB color wheel vs painter’s wheel

This wheel uses the RGB model behind screens, CSS and digital design apps: red, green and blue sit 120° apart, so the complement of red is cyan. The traditional red-yellow-blue wheel from art class arranges hues differently, so for on-screen work like websites, Reels and thumbnails, the RGB wheel gives the matches you’ll actually see.

Using a palette well

• Use one color as the main color, a second for accents, and neutrals for the rest • A common split is 60% main, 30% secondary, 10% accent • Soften partner colors by lowering brightness or picking a monochromatic step • Check text contrast with the SocQ color picker before using a color for body text

Frequently asked questions

How do I use a color wheel?

Pick a base color by dragging the marker, then choose a color scheme. The matching colors appear on the wheel and as swatches with HEX codes.

What is the complementary color of orange?

On this RGB wheel, the complement of #F64C31 orange-red is #31DBF6 cyan. On a painter’s wheel, orange pairs with blue.

What are analogous colors?

Colors next to each other on the wheel, here 30° on each side of the base. For #F64C31 they’re #F63179 and #F6AF31, a calm, harmonious set.

What are triadic colors?

Three colors evenly spaced, 120° apart. For #F64C31 they’re #31F64C and #4C31F6.

What’s the difference between tetradic and square?

Tetradic uses two complementary pairs 60° apart, forming a rectangle on the wheel. Square spaces four colors evenly, 90° apart.

Can I enter my brand’s HEX code?

Yes. Type it into Base color, or use the color input next to it.

How do I copy the palette into CSS?

Click Copy CSS to get a :root block with --color-1, --color-2 and so on. Copy HEX gives a comma-separated list.

Why does Brightness change every color?

Partner colors share the base’s saturation and brightness, which keeps the palette balanced. Adjust the base and the whole palette follows.

Which color wheel should I use for digital design?

The RGB wheel, which this tool uses. It matches how colors mix on screens, so complements and triads look right on websites, social posts and video.

Is the color wheel free?

Yes. It’s free with no signup and no limit.

For developers

Find palette inspiration on Pinterest

Planning a campaign look? SocQ’s Pinterest API returns public pins, search results, profiles and a user’s pins, so you can collect trending visuals and turn their colors into a palette here.

Explore the API

pinterest/pins

posts0.5 credits / result

pinterest/search

search0.6 credits / result

pinterest/profiles

profiles0.6 credits / result

pinterest/user-pins

posts0.5 credits / result

Keep working with free tools

View all tools