How to Use a Color Wheel to Pick Colors for Illustrations and UI
How to use a color wheel the way designers do: the exact angle behind each harmony, a 5 step method on our free wheel, and the 4.5 to 1 contrast check.
It's Thursday, the onboarding screens are due tomorrow, and the illustration pack you dropped into Figma is teal, coral and mustard. The button is a blue someone picked two sprints ago. Nothing is wrong, exactly, but the screen looks like three people designed it without talking.
That's the moment a color wheel earns its keep. It replaces "does this feel right" with a handful of angles you can measure. This guide works through those angles on our own color theory wheel, then applies them to a real illustration and a real app screen, checks the text contrast with numbers, and exports the palette into CSS or Tailwind.
Every drawing I use along the way comes from the GetIllustrations packs, and every one of those begins with a human illustrator. The colors in a pack already agree with each other, which turns out to be the easiest starting point there is.
What is a color wheel and what do the parts mean
A color wheel is the rainbow bent into a circle, with the purples and magentas that no rainbow contains closing the gap between red and violet. Isaac Newton printed one of the first in his book Opticks in 1704, and the idea hasn't changed much since. Colors that sit near each other get along, colors that sit across from each other fight, and most of color theory is deciding how much fight you want.
Hue, saturation and value on the wheel
Hue is the name of the color: red, orange, teal. Saturation is how much of that hue is in the mix, from grey at zero to the purest version of the hue at full. Value is how light or dark it is.
Beginners pick by hue and stop there. Designers who've been burned pick by value first, because two colors of the same value turn to mud when they touch, however pretty each one looks alone.
Why our wheel runs on HSV with hue as 0 to 360 degrees
The wheel on our color theory page uses the HSV model. The outer ring sets hue as an angle from 0 to 360 degrees, with red at 0, green at 120 and blue at 240, and the triangle inside it sets saturation and value. Angles matter because every harmony in the next section is a fixed number of degrees away from your base color.
This is a screen wheel, not a paint wheel. It mixes light the way your monitor does, so the complement of blue lands on yellow, not on the orange a pigment wheel would give you. For UI and digital illustration that's the right answer.
Primary, secondary and tertiary colors on the 12 hue wheel
The traditional artist's wheel holds 12 hues: three primaries, three secondaries mixed from pairs of them, and six tertiaries in between. Our wheel is continuous, so you can land on any degree, but thinking in twelfths helps. Each step on the 12 hue wheel is 30 degrees, which is exactly the spacing the Analogous button uses.
How to use a color wheel step by step
The page has four tabs: Color Wheel, Harmonies, Palette Builder and Contrast Checker. You'll touch all four, in that order.
Step 1: pick your base color on the Color Wheel tab or type a hex
Drag the dot on the outer ring to set the hue, then drag the dot inside the triangle to set saturation and value. If you already have a brand color, type it into the Enter HEX color field and the wheel jumps to it. The panel beside the wheel shows HEX, RGB, HSL and HSV with a copy button on each.
Under the wheel there's a Shades and Tints row of nine swatches: four lighter, your color in the middle, four darker. Click any of them to make it the current color, which is a fast way to get a darker version of a brand blue for hover states.
Step 2: open the Harmonies tab and choose a Harmony Type
The Harmonies tab lists seven buttons under Harmony Type: Complementary, Analogous, Triadic, Tetradic, Split Complementary, Monochromatic and Square. Each one builds a Generated Palette from your base color, with a role label such as Base or Complement under every swatch. Click a swatch in the result and it becomes the current color on the Color Wheel tab, so you can tune it.
Step 3: adjust saturation and value as well as the hue
Every harmony button except Monochromatic moves hue only and keeps the saturation and value of your base. A complement at full saturation next to a base at full saturation vibrates. Take one of them back to the Color Wheel tab, pull the dot in the triangle toward grey or toward dark, and the pair settles down.
Step 4: add colors to the palette with Add to Palette
Every time a color is right, press Add to Palette on the Color Wheel tab. The Palette Builder tab collects them under Current Palette with a count, lets you name the set, and has Save Palette and Clear buttons. I usually end up with five or six colors: the base, one harmony color, two neutrals and a darker shade for text.
Step 5: run the pair through the Contrast Checker
Open the Contrast Checker tab, paste your text color into Foreground Color and your button or background into Background Color. The Contrast Ratio updates as soon as both fields hold a full six digit hex, with four badges under it marked PASS or FAIL, and a Swap Colors button flips the pair. If a badge fails, the Use FG color in Wheel and Use BG color in Wheel buttons send that color back to the wheel for a darker or lighter version.
What are the color harmonies on the wheel
Here's what each Harmony Type button does to your base hue. I took the angles from the page's code, so you can trust them to the degree.
| Harmony Type button | What it adds to the base hue | Colors you get | Best for |
|---|---|---|---|
| Complementary | 180 degrees | 2 | One loud accent on a calm base |
| Analogous | 30 degrees either side | 3 | Interfaces and dashboards |
| Triadic | 120 and 240 degrees | 3 | Posters, events, playful brands |
| Split Complementary | 150 and 210 degrees | 3 | Bold but professional |
| Tetradic and Square | 90, 180 and 270 degrees | 4 | Illustration sets, rarely a whole UI |
| Monochromatic | Nothing, it shifts saturation and value | 4 | Data heavy screens, dark mode |
Complementary: 180 degrees apart
Complementary colors sit straight across the wheel from each other, so the button adds 180 degrees: blue gets yellow and teal gets a warm red. It's the loudest pairing on the wheel. Use it when one element has to win the screen, and give the complement a small area, a button or a badge, never half the page.
Analogous: 30 degrees either side
Analogous colors on the color wheel are neighbours, and the button finds them by adding and subtracting 30 degrees. An azure at 210 degrees brings in a cyan at 180 and a pure blue at 240. The result is calm and hard to get wrong, but it gets boring fast, so pair it with a strong neutral and plenty of white.
Triadic: 120 and 240 degrees
Triadic adds 120 and 240 degrees, three colors spaced evenly around the wheel. It's playful, and it suits posters, events and anything aimed at kids.
The triadic color scheme examples most of us met in art class, red, yellow and blue, come from the paint wheel, and that's the set on the poster below. Our wheel works in light, so a red base gives you green and blue, and a yellow base gives you cyan and magenta.
Split Complementary: 150 and 210 degrees
A split complementary color scheme takes the two hues either side of the true complement, so the button adds 150 and 210 degrees. You keep the tension of a complement without the vibration. It's my default when a client asks for "bold but professional".
Tetradic and Square: 90, 180 and 270 degrees
On our wheel both Tetradic and Square add 90, 180 and 270 degrees, so the two buttons return the same four hues. Four hues is a lot for one interface. Pick one as the base, one as the accent, and keep the other two for illustration only.
Monochromatic: one hue, shifted saturation and value
Monochromatic keeps your hue and moves saturation and value instead, giving you Base, Dark Tint, Light Shade and Muted. It's the safest palette for a dashboard with a lot of data on it. Add one accent from a different harmony or the whole thing goes flat.
How to pick colors for an illustration with the color wheel
Start from the colors already in the drawing
The six Doodle Pop business illustrations above share a tight set: lime green, a sky blue, a soft purple, yellow and a few browns. Lime and sky blue carry it, with yellow and a little coral as the warm notes. The illustrator already did the hard part, so type the sky blue into Enter HEX color and build out from there instead of inventing a new palette the drawings will fight.
Give one hue 60 percent, one 30 and one 10
The old interior design split still works on a screen. Sixty percent of the area goes to a neutral or the quietest hue, thirty to the base, ten to the accent. In the Doodle Pop sheet the white does the sixty, the lime and the sky blue share most of the thirty, and purple and yellow fill the ten with a little coral.
Use the complement for the one thing the eye should land on
Type #34A6D8, the sky blue I picked from this sheet, press Complementary, and the wheel hands you #D86634, a warm red orange. Put that on exactly one element: the checkmark, the coin, the parcel the customer is opening.
One complement reads as intention. Three complements read as noise.
Recolor the SVG with the palette you built
Drop a pack illustration into the SVG color editor and every fill, stroke and gradient stop in it becomes a swatch. Click a swatch, paste a hex from your palette into the Choose Color box, watch the preview change, and press Download SVG. One thing to know: a copy of any file you drop or paste there is kept on our server, so don't use it for client work you've signed an NDA on.
How to use a color wheel for UI design
Both phone mockups above use the same Doodle Pop shopping and savings drawings and the same layout. The left one runs a complementary scheme, deep blue against warm orange, and the big orange button is the first thing you see. The right one is analogous, a teal header running into mint cards and a green button, and it reads calmer, but that button has to work harder.
Brand hue, then neutral, then one accent
Start with the brand hue on the Color Wheel tab. Build neutrals from it rather than from pure grey: drop the saturation almost to zero and keep a hint of the hue, so your greys feel like they belong. Then press one harmony button and take a single accent from it.
The cloud product concept above does this with the InkDex 3D pack. Nearly everything is sand beige and black outline, the button is near black, and the green uptime chart is the only accent on the page. The interface takes its beige and its black straight from the drawings, and green is the one color they don't have, which is why your eye lands on the uptime number first.
Checking text on buttons with the Contrast Checker
White text on an orange button is a classic trap: it looks fine and fails the check. Paste the #D86634 from the Doodle Pop example into Background Color and white into Foreground Color, and you get 3.58 to 1. That passes AA Large and fails AA Normal, which is the one most button labels need.
You have two fixes. Press Use BG color in Wheel and pick the first darker swatch in Shades and Tints, #974724, which takes white text to 6.48 to 1. Or keep the orange and make the label #1A1A1A, which reads 4.86 to 1.
AA, AAA and what large text means
The four badges are AA Normal, AA Large, AAA Normal and AAA Large. The WCAG 2.2 contrast minimum sets AA at 4.5 to 1 for normal text and 3 to 1 for large text, and those thresholds are not rounded, so 4.49 fails. Large means 18pt or bigger, or 14pt or bigger in bold.
Our checker follows the same rule. It shows the ratio to two decimals but tests the unrounded number, so a pair that reads 4.50 to 1 can still show FAIL, and one shade darker fixes it.
| Badge | Ratio required | Applies to |
|---|---|---|
| AA Normal | 4.5 to 1 | Body text, labels, input text |
| AA Large | 3 to 1 | 18pt or bigger, or 14pt bold or bigger |
| AAA Normal | 7 to 1 | Body text when you want the enhanced level |
| AAA Large | 4.5 to 1 | Large text at the enhanced level |
Matching the illustration palette to the interface
This onboarding set keeps one periwinkle blue for the logo, the progress dots and the Next buttons, and lets the illustrations carry the lime, coral and yellow. Nothing in the interface competes with the drawings. If your pack's accent clashes with your button color, recolor the pack, not the button, since the button has a contrast ratio to protect.
How to export a color palette from the color wheel
Both the Harmonies tab and the Palette Builder tab have the same seven export buttons, and each one downloads a file. On Harmonies they save the Generated Palette you're looking at. On Palette Builder they save your Current Palette, so add at least one color first.
| Export button | What you get | Where to paste it |
|---|---|---|
| CSS Variables | A root block of custom properties | Your global stylesheet |
| SCSS | One variable per color | A Sass variables partial |
| JSON | An object of named hex values | Design tokens, scripts |
| Tailwind | A JavaScript file shaped like a Tailwind config | Merged into your own Tailwind config |
| HEX List, JASC PAL, GIMP GPL | Plain text palettes saved as .txt | Figma styles set up by hand, older image editors, GIMP and Inkscape |
CSS Variables, SCSS, Tailwind and JSON
CSS Variables writes a root block with one variable per color, named palette and a number that climbs in hundreds from 100, in the order the colors sit in the set. SCSS does the same with dollar variables, and JSON gives you the same names as keys in one object. On the Palette Builder tab you can drag the chips to change the order before you export.
Tailwind downloads a small JavaScript file laid out like a whole Tailwind config, with the colors nested under a palette key, so they turn up in your utility classes as palette 100, palette 200 and so on. Merge that block into your own config rather than pasting the file over the top.
HEX List, JASC PAL and GIMP GPL for other apps
HEX List is one hex per line, handy to keep open while you set up color styles in Figma by hand. JASC PAL is the palette format older image editors read, and GIMP GPL works in GIMP and in Inkscape, so the same palette can follow an illustration into open source tools.
All three save as .txt files. Rename the ending to .pal or .gpl before you load one into those apps.
Saving a palette in the browser
Save Palette stores the set in your browser's local storage under the name you typed, and it shows up under Saved Palettes, with a Load button, next time you open the page in the same browser. The Current Palette itself is gone when you close the tab unless you've pressed Save Palette. A saved palette won't follow you to another machine either, so export a HEX List as a backup.
Common color wheel mistakes and how to fix them
Using two complements at full saturation
Pure blue against pure orange shimmers at the edges and tires the eye in seconds. Keep one of the pair saturated and drop the other, or push one much darker. The Shades and Tints row on the Color Wheel tab is the fastest way to find that darker version.
Picking by hue and forgetting value
A palette can be perfectly harmonious in hue and still be unreadable, because every color sits at the same lightness. Squint at the screen. If the illustration and the card behind it melt together, move one of them two steps along Shades and Tints.
Trusting the harmony without checking contrast
Harmony is about how colors feel together. Contrast is about whether a person with low vision can read the label. They're separate tests, and the second one has a number attached, so run every text and button pair through the Contrast Checker before it ships.
Can you use these illustrations in commercial work
Free packs from the free illustrations page come under the Free License, which asks for a visible credit, something like Illustrations by GetIllustrations.com in your footer, and doesn't cover client projects. The paid licenses remove attribution and cover client deliverables and products you sell. The full wording lives on the license page, and recoloring an illustration with your own palette is allowed under all of them.
If you'd rather start from a set that already matches, the collections group packs by theme and style, and the full pack library lets you preview every drawing before you pick a base color.
Questions about using a color wheel
What is the difference between a color wheel and a color contrast wheel
A color contrast wheel, or colour contrast wheel if you spell it the British way, isn't a separate tool. It's the same wheel doing a second job.
The wheel finds hues that go together by angle. A color wheel contrast checker takes two of those colors and turns the difference in their brightness into a ratio, which is what our Contrast Checker tab does.
Which color scheme is best for a website
Analogous or monochromatic for the interface, with one complementary or split complementary accent for buttons and links. Triadic and tetradic schemes belong in the illustrations and the marketing pages, where there's room for them.
How many colors should a palette have
Five or six. One base, one accent, two or three neutrals and a dark for text. A pack of illustrations can carry more, because the drawings have their own internal balance.
Do complementary colors always work
No. They always contrast, which isn't the same thing. At equal saturation and value they clash, and they only settle when one of them gives way in area or in strength.
Can I use the same palette for the illustration and the UI
Yes, and it's the single biggest step toward a product that looks designed on purpose. Pull the dominant hue from the pack, build the interface neutrals from it, and let the pack's brightest color be the accent. The SVG color editor does the recoloring if the pack is close but not exact.
For that Thursday deadline, start with the pack, not the button. Type its teal into Enter HEX color, take the button color from the Harmonies tab, and don't hand anything over until the label passes AA Normal.