10 palettes
Ten palettes for the random color generator
Each palette loads with one click, and every color in it is a CSS named color with an exact hex code. The button shows how many colors it adds, and Undo in the message that appears puts your old wheel back.
Everyday colors
The default wheel: 12 color words most people know. Red, Orange, Yellow, Green, Teal, Blue, Purple, Pink, Brown, Gray, Black, White.
Rainbow
The 7 rainbow colors in order, red to violet. Red, Orange, Yellow, Green, Blue, Indigo, Violet.
Primary and secondary
The painter's primaries, then the secondaries made by mixing 2 of them. Red, Yellow, Blue, Orange, Green, Purple.
16 basic colors
The 16 names CSS took from the VGA palette by way of HTML. Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.
Pastels
Soft, light colors. Pink, Peach Puff, Lemon Chiffon, Pale Green, Pale Turquoise, Light Blue, Lavender, Thistle.
Warm
Reds, oranges and yellows. Crimson, Red, Orange Red, Tomato, Coral, Dark Orange, Orange, Gold.
Cool
Blue-greens and blues, from turquoise to navy. Turquoise, Light Sea Green, Teal, Deep Sky Blue, Dodger Blue, Royal Blue, Navy, Slate Blue.
Neutrals
Grays, white, black and pale browns. Black, Dim Gray, Gray, Silver, Gainsboro, White, Beige, Tan.
Earth tones
Browns, olives and deep reds. Saddle Brown, Sienna, Chocolate, Peru, Burlywood, Olive, Dark Olive Green, Maroon.
All named colors
Every CSS named color once: 139 colors. Alice blue to yellow green.
The 16 basic colors palette follows the CSS specification, which says those 16 names came from the VGA palette and were then adopted into HTML. The other nine palettes are Wheel Spinning's own picks.
Quick start
How to pick a color with the spinner
Start from a palette or from your own shortlist. The color spinner runs the same on a phone, a tablet or the board at the front of a class.
Load a palette
Press a palette under Palettes, next to the wheel (under it on a phone), such as Rainbow (7) or Pastels (8).
Or type your own
Open Edit entries & settings and type a CSS color name or a hex code on each line.
#3a7bd5and#f80both work.Spin
Use the Spin button, a click on the wheel or the Space key. A popup then shows a swatch, the name, the hex code and the RGB value.
Copy the code
Press Copy in the popup, or Copy hex next to the last color. Copy all hex codes copies every slice as “name: hex”.
Your browser's crypto.getRandomValues draws the result before the wheel starts to turn, and a slice's color has no effect on the pick. A pale slice and a dark slice have the same chance. See how the randomness is checked.
Color wheel picker
Where the named colors sit on the color wheel
A screen's color wheel runs through 360 degrees of hue, with red at 0°, green at 120° and blue at 240°. Placing all 139 CSS colors on that circle shows which hues the random color generator lands on most when you load All named colors.
- 23Orange huesThe biggest group, so 16.5% of spins on All named colors
- 24Grays and near-whites17.3% of spins, from black to snow
- 4Magenta-red huesThe smallest group, 2.9% of spins
| Hue | Named colors | Chance on All named colors |
|---|---|---|
| Red 345°–15° |
| 14 of 139, 10.1% |
| Orange 15°–45° |
| 23 of 139, 16.5% |
| Yellow 45°–75° |
| 10 of 139, 7.2% |
| Yellow-green 75°–105° |
| 6 of 139, 4.3% |
| Green 105°–135° |
| 8 of 139, 5.8% |
| Green-cyan 135°–165° |
| 6 of 139, 4.3% |
| Cyan 165°–195° |
| 13 of 139, 9.4% |
| Cyan-blue 195°–225° |
| 9 of 139, 6.5% |
| Blue 225°–255° |
| 9 of 139, 6.5% |
| Blue-violet 255°–285° |
| 6 of 139, 4.3% |
| Magenta 285°–315° |
| 7 of 139, 5% |
| Magenta-red 315°–345° |
| 4 of 139, 2.9% |
| Neutral grays and near-whites |
| 24 of 139, 17.3% |
Each hue comes from the color's hex code with the HSL formula in CSS Color 4. Colors whose red, green and blue values sit within 25 of each other count as neutral, because they show almost no hue. Pale tints keep their hue, so bisque and wheat count as oranges.
Screen wheel or painter's wheel?
- On a screen's wheel, opposite hues sit 180° apart. Red faces cyan, and blue faces yellow.
- A painter's wheel starts from red, yellow and blue. Each primary faces the secondary mixed from the other two, so red faces green.
- The Primary and secondary palette spins those six painter's colors, which suits art class warm-ups.
- This color wheel picker chooses for you. It picks one color at random and doesn't draw a hue circle or suggest matching colors.
Hex and RGB
Reading the hex code from the random color generator
A hex color code writes a color as 3 pairs of hexadecimal digits, one pair each for red, green and blue. Each pair runs from 00, meaning none of that light, to ff, meaning full strength. In decimal, ff is 255.
Take tomato, #ff6347. The first digit of each pair counts sixteens, so ff is 15 × 16 + 15 = 255. Then 63 is 6 × 16 + 3 = 99, and 47 is 4 × 16 + 7 = 71. That is why the popup reads #ff6347 · rgb(255 99 71).
Subtract each value from 255 and you get the opposite hue on a screen's wheel. Tomato turns into #009cb8. Pale colors come back dark, so treat the result as a starting point for a contrast color.
The hex notation rules also allow 3-digit codes, where each digit doubles, so #f80 is #ff8800. Capital and small letters mean the same thing. Four- and eight-digit codes add transparency, which a solid slice can't show, so the wheel reads 3- and 6-digit codes.
| Color | Red | Green | Blue |
|---|---|---|---|
| #000000 black | 0 | 0 | 0 |
| #ffffff white | 255 | 255 | 255 |
| #ff0000 red | 255 | 0 | 0 |
| #00ff00 lime | 0 | 255 | 0 |
| #008000 green | 0 | 128 | 0 |
| #ff6347 tomato | 255 | 99 | 71 |
| #663399 rebeccapurple | 102 | 51 | 153 |
- Tomato #ff6347#009cb8
- Gold #ffd700#0028ff
- Teal #008080#ff7f7f
Opposites worked out as 255 minus each channel.
- 16.8MPossible 6-digit codes256 × 256 × 256 = 16,777,216
- 139Of them have a CSS nameAbout 1 in 120,700 codes
- #f80Short for #ff8800A 3-digit code doubles each digit
Random color palette
Spin a random color palette without repeats
Spin once for each color you need, and take each winner off the wheel so no color comes up twice. Without that step, repeats turn up more often than most people expect.
After each spin, take the color off with Remove in the popup. Or pick That entry under Remove the winner automatically in Customize, and the wheel drops each color after a short countdown.
Five spins of the random color generator on Everyday colors give a 5-color set for a poster, a mood board or a game night table. Press Copy in each popup as you go, or read the five names from the Results tab later. The Results tab also exports a CSV with the time of every spin.
For a calmer set, spin Pastels or Earth tones. For a strange one, All named colors puts 139 slices on the wheel, from alice blue to yellow green.
- Primary and secondary (6)9.3%
- Rainbow (7)15%
- Pastels, Warm, Cool, Neutrals, Earth tones (8)20.5%
- Everyday colors (12)38.2%
- 16 basic colors (16)50%
- All named colors (139)93%
CSS named colors
The 148 CSS color names behind the color wheel spinner
CSS defines 148 color names for 139 different colors, and every one works on the random color generator. The W3C sets the list in CSS Color Module Level 4, and each name maps to one exact hex code, such as tomato for #ff6347.
- 148Color namesEvery one types straight onto the wheel
- 139Different colorsThe All named colors palette
- 9Second spellingsGrey for gray, aqua and fuchsia
- 16Basic colorsThe VGA set that HTML adopted
Quirks in the CSS color list
- Seven grays have a second “grey” spelling, such as darkgrey for darkgray. Aqua and cyan are both #00ffff, and fuchsia and magenta are both #ff00ff.
- The names are not always logical. The specification itself notes that darkgray (#a9a9a9) is lighter than gray (#808080), and lightpink is darker than pink.
- CSS green is #008000, with the green channel at 128 of 255. Full-strength green, #00ff00, is named lime.
- Purple is #800080, which shares its 300° hue with magenta. It is a darker magenta, not a blue-violet.
- One slice per color. The All named colors palette keeps gray, cyan and magenta and leaves out grey, aqua and fuchsia, so no color gets 2 slices.
- Typing is forgiving. Spaces, hyphens and capitals don't matter, so “Light Sea Green”, “light-sea-green” and “lightseagreen” all paint the same slice.
- Labels that aren't color names, such as “Team blue”, take their color from the Weights, colors & images table. The result then shows that color's hex code.
See all 148 CSS named colors with their hex codes
aliceblue#f0f8ffantiquewhite#faebd7aqua#00ffffaquamarine#7fffd4azure#f0ffffbeige#f5f5dcbisque#ffe4c4black#000000blanchedalmond#ffebcdblue#0000ffblueviolet#8a2be2brown#a52a2aburlywood#deb887cadetblue#5f9ea0chartreuse#7fff00chocolate#d2691ecoral#ff7f50cornflowerblue#6495edcornsilk#fff8dccrimson#dc143ccyan#00ffffdarkblue#00008bdarkcyan#008b8bdarkgoldenrod#b8860bdarkgray#a9a9a9darkgreen#006400darkgrey#a9a9a9darkkhaki#bdb76bdarkmagenta#8b008bdarkolivegreen#556b2fdarkorange#ff8c00darkorchid#9932ccdarkred#8b0000darksalmon#e9967adarkseagreen#8fbc8fdarkslateblue#483d8bdarkslategray#2f4f4fdarkslategrey#2f4f4fdarkturquoise#00ced1darkviolet#9400d3deeppink#ff1493deepskyblue#00bfffdimgray#696969dimgrey#696969dodgerblue#1e90fffirebrick#b22222floralwhite#fffaf0forestgreen#228b22fuchsia#ff00ffgainsboro#dcdcdcghostwhite#f8f8ffgold#ffd700goldenrod#daa520gray#808080green#008000greenyellow#adff2fgrey#808080honeydew#f0fff0hotpink#ff69b4indianred#cd5c5cindigo#4b0082ivory#fffff0khaki#f0e68clavender#e6e6falavenderblush#fff0f5lawngreen#7cfc00lemonchiffon#fffacdlightblue#add8e6lightcoral#f08080lightcyan#e0fffflightgoldenrodyellow#fafad2lightgray#d3d3d3lightgreen#90ee90lightgrey#d3d3d3lightpink#ffb6c1lightsalmon#ffa07alightseagreen#20b2aalightskyblue#87cefalightslategray#778899lightslategrey#778899lightsteelblue#b0c4delightyellow#ffffe0lime#00ff00limegreen#32cd32linen#faf0e6magenta#ff00ffmaroon#800000mediumaquamarine#66cdaamediumblue#0000cdmediumorchid#ba55d3mediumpurple#9370dbmediumseagreen#3cb371mediumslateblue#7b68eemediumspringgreen#00fa9amediumturquoise#48d1ccmediumvioletred#c71585midnightblue#191970mintcream#f5fffamistyrose#ffe4e1moccasin#ffe4b5navajowhite#ffdeadnavy#000080oldlace#fdf5e6olive#808000olivedrab#6b8e23orange#ffa500orangered#ff4500orchid#da70d6palegoldenrod#eee8aapalegreen#98fb98paleturquoise#afeeeepalevioletred#db7093papayawhip#ffefd5peachpuff#ffdab9peru#cd853fpink#ffc0cbplum#dda0ddpowderblue#b0e0e6purple#800080rebeccapurple#663399red#ff0000rosybrown#bc8f8froyalblue#4169e1saddlebrown#8b4513salmon#fa8072sandybrown#f4a460seagreen#2e8b57seashell#fff5eesienna#a0522dsilver#c0c0c0skyblue#87ceebslateblue#6a5acdslategray#708090slategrey#708090snow#fffafaspringgreen#00ff7fsteelblue#4682b4tan#d2b48cteal#008080thistle#d8bfd8tomato#ff6347turquoise#40e0d0violet#ee82eewheat#f5deb3white#ffffffwhitesmoke#f5f5f5yellow#ffff00yellowgreen#9acd32
Readable labels
Why some slices get black text and others white
Every slice the random color generator paints gets white text where it passes the WCAG contrast minimum, and black text everywhere else. WCAG 2.2 asks for 4.5:1 for normal text and 3:1 for large text.
| Slice | White text | Black text | Large label | Small label |
|---|---|---|---|---|
| Red | 4.0:1 | 5.3:1 | White | Black |
| Orange | 2.0:1 | 10.6:1 | Black | Black |
| Yellow | 1.1:1 | 19.6:1 | Black | Black |
| Green | 5.1:1 | 4.1:1 | White | White |
| Teal | 4.8:1 | 4.4:1 | White | White |
| Blue | 8.6:1 | 2.4:1 | White | White |
| Purple | 9.4:1 | 2.2:1 | White | White |
| Pink | 1.5:1 | 13.7:1 | Black | Black |
| Brown | 7.1:1 | 3.0:1 | White | White |
| Gray | 3.9:1 | 5.3:1 | White | Black |
| Black | 21.0:1 | 1.0:1 | White | White |
| White | 1.0:1 | 21.0:1 | Black | Black |
Red shows the rule at work. White on red is 4.0:1, enough for a big label but not a small one, so red slices switch to black text when labels shrink on a crowded wheel. The popup swatch has an outline, so pale colors such as white, snow and ivory stay visible.
Ideas
When to let a color spinner choose
A random color generator works best where any of the options would be fine and somebody still has to decide.
Art and design prompts
Paint a still life where the spun color leads, or build a 5-color scheme around it. Copy the hex code straight into your design app.
Teams and party tables
Give each team, table or guest a color. Rainbow covers 7 groups, and Primary and secondary covers 6.
Color hunt
Spin, start the Timer, and everyone finds something in the room in that color before it runs out. Everyday colors keeps to names kids know.
Paint and outfit shortlists
Type the 3 paint names or hex codes you can’t choose between, then spin. Check a real paint sample before you buy.
Language classes can spin 16 basic colors and name each result in Spanish or French. For a word game, spin a color here and a letter on the letter wheel, then name something that fits both, like green and G for grapes. For sketch subjects with a style, try the drawing prompt wheel. For choices that aren't colors, the decision wheel takes any list.
FAQ
Random color generator FAQ
How many colors are on the random color generator?
12 to start. The default Everyday colors wheel has 12, All named colors loads 139, and any wheel holds up to 10,000 entries.
How do I copy the hex code?
Press Copy in the result popup. The Copy hex button next to the last color does the same after the popup closes.
Does the result show RGB values too?
Yes. Every result shows the RGB value next to the hex code, such as rgb(255 99 71) for tomato.
Is this a color wheel picker like the one in design apps?
No. A design app’s color wheel picker lets you drag around a hue circle. This random color wheel picks one color for you from a list. The hue table on this page helps you choose by hue first.
Is gray the same as grey in CSS?
Yes. Both spellings give the same hex code, such as #808080 for gray and grey.
Why is CSS green darker than lime?
CSS green is #008000, with the green channel at 128 out of 255. The full-strength green, #00ff00, is named lime.
Can I add colors that are not CSS names?
Yes. Type any hex code with its # sign, such as #3a7bd5, and the slice takes that color.
Can two slices end up the same color?
Only if you add a color twice. No palette repeats a color, and All named colors skips second spellings such as grey and aqua.
Will the color look the same in paint?
No, not exactly. Screens differ, and paint changes with the light in the room, so check a real sample before you buy.
Last updated · Written and tested by Melissa T. Brown