Color Spinner — Simple Color Picker Spin

Sometimes you do not need a settings panel, a color editor or a tutorial — you just need a color, and you need something outside yourself to choose it. That is the whole idea of this color spinner. It is a single wheel with eight colored segments and a single button. Press spin, wait out the momentum, and read the result under the pointer: a color, its name, and its HEX code. The entire interaction takes four seconds, and nothing about the tool asks anything of you in between.

Simplicity is a feature, not a shortcut. Because the spinner does only one thing, it does that thing with no loading screens, no cookie banners asking about preferences, no account walls and no learning curve. A child can use it. A grandparent can use it. A group of friends halfway through a board game can use it without pausing the game for a software briefing. The wheel is drawn natively by your browser, spins smoothly even on older phones, and every result arrives with a HEX code in case the color needs to travel beyond the moment.

A spinner earns its place in a surprising number of everyday moments. Let it break a tie: two people want the last slice, red or blue decides. Let it assign chores: spin, and whatever color comes up belongs to the person whose shirt matches closest. Let it direct a drawing exercise, pick the next theme color for a craft afternoon, choose which marker starts the whiteboard, or decide what color the birthday cake frosting should be. Anywhere a coin feels too small and a full decision too heavy, a spinner is exactly the right size.

The spinner's fairness is also worth naming. Each spin ends at a random angle, giving all eight segments — red, orange, amber, green, teal, blue, indigo and pink — identical odds, with no memory between spins. Unlike a physical spinner that can warp or wobble toward a favorite pocket, this one's physics live in arithmetic, and arithmetic does not get tired. What you see slowing down on screen is pure easing math doing its best impression of luck.

Keep this page bookmarked for the moments that need it. If your decision needs more drama, the full color spinner wheel page offers the same wheel with a bigger presentation; if you need a faster pick, the color dice resolves in a second; and if eight colors are too few, the random colour generator draws from millions. One simple spinner, honestly random, always free.

Eight colours, eight HEX codes

The wheel runs on a fixed palette, and it is worth writing the values down, because half the point of a spinner is being able to carry the result somewhere else. Red is #EF4444. Orange is #F97316. Amber is #F59E0B. Green is #22C55E. Teal is #14B8A6. Blue is #3B82F6. Indigo is #6366F1. Pink is #EC4899.

Line those eight up and a pattern appears: every one of them sits at the same step of a standard interface palette — the 500 shade in the Tailwind scale, if you happen to write CSS for a living. That is not a coincidence. Eight colours from eight families, all held at the same lightness band, means no segment looks heavier than its neighbours once the wheel is drawn. Put a deep navy next to a pale lemon and one wedge will read as twice the size of the other even though the geometry is identical. Flat lightness keeps the wheel honest to the eye.

The hue spacing is deliberately uneven. Three warm segments — red, orange and amber — crowd into the first forty degrees of the hue circle. Four cool ones spread across the wide stretch from roughly 140 to 240 degrees. Pink sits alone out near 330. A perfectly even wheel would have handed you yellow-green and olive instead, and it would have handed you a palette nobody wants to use afterwards. That is the real test. A spinner that gives you a colour you cannot do anything with is just a slower way of being annoyed.

There is a quiet structure in the draw order as well. Eight wedges at 45 degrees each means every segment has an exact opposite: red faces teal, orange faces blue, amber faces indigo, green faces pink. Four warm-cool pairs, each one a ready-made contrast if you ever need two colours out of a single spin.

Why eight segments, and not six or twelve

Six is the dice number, and it is a good number — the color dice roller has been proving that for years. But six has a specific problem on a wheel. Six colours almost always resolve to the four primaries plus a green and a purple, and the set starts to feel like a children's toy box rather than a palette. Eight buys two extra slots, and those two slots are exactly what let the set cover amber and teal — the two colours that make a result feel like a design decision instead of a nursery wall.

Twelve is the other tempting number, because the traditional artist colour wheel has twelve spokes. Twelve is the right answer when you are mixing paint and need a full spectrum relationship to work from. It is the wrong answer for a spinner, for a purely physical reason. The canvas is 320 pixels across, so the radius is about 154 pixels, and a wedge's rim length is the radius multiplied by its angle in radians. Eight segments give each wedge a 45-degree slice — roughly 121 pixels of arc, comfortable for a label you can actually read. Twelve would cut that to about 81 pixels, and the colour names would start colliding at the rim on a phone screen.

Eight also splits cleanly into halves and quarters. Run a classroom exercise where four table groups each need two colours and the wheel does the division without anyone doing arithmetic.

How the spin stays fair

Every spin draws its stopping angle from the browser's own random number generator — the same Math.random function running inside every browser on the planet, called twice and added together, then spread across at least five full rotations. Eight equal wedges of 45 degrees means each colour owns exactly one eighth of the circle: 12.5 percent, on every spin, forever.

Nothing about the result leaves your device. Your browser draws the wheel onto a canvas, your browser calculates the spin, and the page never fires a request when you press the button. There is no server deciding anything, which also means there is no server that could decide anything. The only state kept between spins is the current rotation angle, and that exists so the wheel does not snap back to zero before it starts. It is never consulted when working out where the pointer landed.

Compare that with a physical spinner. Cardboard warps in a damp cupboard. A metal pointer bends a degree or two. A plastic arrow wears a groove in the same spot after a hundred flicks, and the person flicking it has a wrist. Every one of those is a bias, and none of them is deliberate. Here the deceleration is a fixed curve — four seconds, easing out the same way every time — so the only variable left is where the random angle falls.

One honest footnote. Math.random is a pseudorandom generator, not a cryptographic one. For picking a colour that is completely fine, because there is nothing to gain from predicting your next wedge. If you were running a draw with real money attached, you would want crypto.getRandomValues instead, and you would want to say so on the page. This spinner is not that, and does not pretend to be.

One colour or a whole palette?

A spinner hands you a single colour, and a single colour is the right unit surprisingly often. Which marker starts the whiteboard. Which team wears which shirt. Which of four cake frostings gets made. All of those are one-slot decisions, and a wheel resolves them in four seconds without a meeting.

Where a spinner stops being the right tool is when you need a set that has to work together. Spinning eight times for a brand palette gives you eight colours with no relationship to each other, and the odds of a usable combination coming out are poor. That job belongs to a generator drawing from the full 16.7 million colour space, or to a curated system where someone chose the hues thinking about how they sit side by side. Spin when you need one colour. Do not spin when you need a family.

The middle case is a small fixed set with rules — four house colours, six team themes, three approved accent tones. When the candidates are already decided and you just need one of them picked without an argument, a visible wheel beats an invisible generator, because everyone in the room can watch it happen.

Where a colour spinner actually earns its keep

Classroom cold calls and group assignments

A teacher with eight table groups needs a fair order for presentations, and that order matters more than anyone admits — going first is harder than going fourth. Spinning in front of the class settles it in one gesture. Because the result prints as a word as well as a swatch, a student at the back can hear the colour name and know their group is up. The same wheel assigns colours for a sorting exercise: spin eight times, write the colours on the board, and each table works inside its own hue for the hour.

Board games with more players than tokens

Most board games ship with four or five player colours, which becomes a problem the moment a sixth person sits down. Rather than argue over who gets stuck with the beige pieces, spin and take what comes up. It also settles the smaller ritual of who goes first — a question otherwise decided by whoever is loudest, or by a dice roll half the table never saw.

Painting, sketching and palette building

Artists working from reference reach for the same three tubes every session. A committed spin breaks the habit: take the colour, no rerolls, and build a thirty-minute study around it. Amber forces a warm ground you would never have chosen. Teal forces you to go looking for its opposite. The HEX code earns its place here too, because you can note it in a sketchbook margin and reproduce the exact tone later during a digital pass.

Wedding and event colour decisions

Event planning has a well-documented failure mode: three weeks of reference boards and no decision, because every option is defensible and none is obviously right. A couple who genuinely do not care whether the signage is sage or dusty blue can spin for it and spend that attention on the decisions that matter. Seating works the same way — eight tables, eight colours, one spin each, printed on the place cards.

Livestream giveaways and chat picks

A streamer spinning a visible wheel on camera does something a hidden number generator cannot: lets the audience watch the draw happen. The four-second slowdown is the proof. Nobody can fake which wedge the pointer lands on when a thousand people watched it come to rest. Chat colour roles, giveaway winners and what-should-I-paint-today polls all run on the same visible mechanism.

Team names, jerseys and sprint colours

Hackathon teams, office sports leagues and product sprints all end up needing a colour, and the conversation has a way of eating twenty minutes it should not. Spinning removes the politics — the wheel decided, not the most senior person in the room. Nobody has to defend a preference, and a colour everyone watched arrive is strangely easy to accept.

Colour blindness, old phones and no signal

The result is never colour alone. Every spin prints the HEX value in a monospace face and the colour name in plain English beneath the swatch, so a reader with deuteranopia — roughly one man in twelve — gets the answer as text instead of having to judge a wedge. The names are painted inside the wheel itself as well, in black or white picked automatically from each segment's brightness, so the wheel stays legible before you press anything.

On the device side, the whole tool is a canvas drawn at 320 pixels with about forty lines of drawing code. No image files, no WebGL, no animation library, no web font needed for the wheel itself. If a phone can open a web page, it can spin this one. The canvas scales to the screen's pixel density, so the edges stay crisp on a modern handset without costing an older one anything.

Because a spin never touches the network, the page keeps working with no signal at all — in a basement classroom, on a plane, at a craft fair with two bars. Load it once and it spins all afternoon.

One thing this page does not offer is a reduced-motion variant. The four-second slowdown is the tool rather than decoration on top of it, so there is nothing to strip away. If a long animation is the obstacle, the online color dice resolves in about a second and skips the theatre entirely.

Which of the six colour tools you actually want

Six tools on this site all claim to pick a colour, and they are not interchangeable. The dividing line is how many candidates are allowed to win.

Six candidates, one second, plus a running tally of how often each colour has shown up — that is the color dice roller, and it is the right pick when you want the count as well as the colour. Six candidates tumbling in 3D instead of sitting still is the online color dice.

The same eight colours as this page, presented with more room and more emphasis on the spin itself, live on the color spinner wheel page. Identical wheel, different framing: that page is about the momentum, this one is about getting out of your way.

If the answer you want is not on a list at all, the pick a random colour tool draws from all 16.7 million, and its US-spelling twin the random color generator covers the same ground. Neither shows you a wheel, because there is no way to draw sixteen million wedges.

This page sits at the far end of the simplicity axis: eight colours, one button, no statistics, no 3D, no options to configure. If you searched for the simplest possible colour spinner, you are already in the right place.

Two things people get wrong about a spinning wheel

The first complaint is that the wheel seems to favour whatever it landed on last time. It does not, and the reason it feels that way is arithmetic. With eight colours, two identical results back to back happens one time in eight — 12.5 percent. That is often enough to notice, and a brain watching for a pattern will notice it every time while forgetting the seven spins in between. The wheel also starts from wherever it stopped instead of from zero, which makes consecutive spins look connected even though the new angle is drawn independently of the old one.

The second is the expectation that ten spins should look varied. Spin ten times and count. Seeing all eight colours inside ten spins happens about three percent of the time, and there is usually a colour missing entirely from a set of ten — the chance that any one named colour fails to appear across ten spins is roughly 26 percent. Spin eighty times instead and the counts drift toward ten apiece, but they will not sit on ten. The natural spread for eighty spins is about three either side, so one colour landing five times while another lands sixteen is ordinary behaviour, not a rigged wheel.

HEX, RGB and HSL: reading the code the wheel prints

After every spin the wheel displays a six-character HEX value like #3B82F6. That string is three byte-pairs in hexadecimal: the first two encode red intensity (00 to FF), the next two encode green, the last two encode blue. #3B82F6 therefore carries red 59, green 130, blue 246 on a scale of 0 to 255. Most design tools accept both notations — Figma, Sketch, Adobe XD, CSS, and Tailwind all parse #3B82F6 and rgb(59,130,246) without conversion, so you can paste whichever form the workflow expects. Tailwind encodes the same eight colors as named utilities: blue-500, green-500, red-500 and so on, each mapped to the exact HEX value this wheel uses, which makes it straightforward to translate a spin result into a class name without reaching for a color picker.

HSL notation expresses the same color as hue (0–360°), saturation (0–100%) and lightness (0–100%). #3B82F6 converts to roughly hsl(217, 91%, 60%). The advantage of HSL is that you can hold a hue fixed and nudge lightness downward to 45% for a hover state, or drop saturation to 20% for a disabled-button tint — operations that are opaque in HEX arithmetic. CSS custom properties make it practical to store the spun hue once and derive the full scale from it: --brand-hue: 217; --brand: hsl(var(--brand-hue) 91% 60%); --brand-dark: hsl(var(--brand-hue) 91% 45%). If your project uses design tokens, a spin result is a valid seed for an entire palette rather than a single swatch. For a deeper dive into all the random-color formats this site supports, see the random color generator which outputs HEX, RGB and HSL simultaneously.

Screen colors are additive RGB. The wheel's eight HEX values are calibrated for digital displays, and they sit in the sRGB color space that all modern monitors and browsers assume by default. If you hand a HEX value to a commercial printer using CMYK inks, the conversion is lossy: cyan 66%, magenta 46%, yellow 0%, black 4% approximates #3B82F6, but the printed result will appear duller than the screen version because printer gamuts don't cover the full sRGB range for saturated blues. For print work, use the HEX result as a reference and confirm against a physical swatch — Pantone 2727 C is the closest spot color to #3B82F6 within about three ΔE units.

Using a color spinner in a classroom or team icebreaker

Project the page on a screen and use a spin to cold-call students or assign tasks. Each of the eight colors maps to a row of seats, a team, or a card drawn before the session — spin once and the room immediately knows who is up. This works better than a name-picker in two specific ways: the audience watches the wheel slow down and experiences the selection as a shared event rather than a number popping up on a spreadsheet, and the outcome is visually unambiguous across the room without anyone needing to read small text. Color is a faster channel than text at thirty feet. The HEX value displayed after landing is secondary noise in that setting — hide the result panel if it distracts, the color swatch alone carries the signal.

For design workshops the spinner doubles as a constraint generator. Spin once to fix the primary hue, spin again to fix the accent. Working within an externally imposed palette — one neither the facilitator nor the participants chose deliberately — removes the paralysis of a blank color picker and tends to produce more surprising combinations than deliberate selection. Research on creative constraint suggests that arbitrary starting points reduce anchoring bias: designers who begin from a self-selected blue tend to produce variations of the same blue, while designers who start from a spun teal explore a wider region of the palette space. The constraint is artificial, but the output is genuinely different.

When you need to run a fair random draw across a group and record the result, spin and screenshot the swatch — the HEX code in the frame is a verifiable timestamp-free receipt that the winning color was not edited afterward. For structured draws where you want a count across many spins, switch to the color dice roller, which tracks totals per color across every roll and lets you export or reset the history without leaving the page.

WCAG contrast ratios and accessibility after a spin

WCAG 2.1 success criterion 1.4.3 requires a contrast ratio of at least 4.5:1 between normal text and its background to meet level AA. Large text — defined as 18 pt regular or 14 pt bold, which is roughly 24 px and 18.67 px at 96 DPI — gets a relaxed threshold of 3:1. The wheel's eight colors vary sharply on this axis. Amber #F59E0B on a white (#FFFFFF) background reaches a ratio of 2.9:1, which fails both thresholds for body text. Red #EF4444 on white scores 4.0:1, passing large-text AA but failing normal-text AA. Blue #3B82F6 on white gives 3.0:1, also a large-text pass only. Green #22C55E on white clears 3.0:1 but not 4.5:1. Indigo #6366F1 on white reaches 4.5:1 exactly, and pink #EC4899 sits at 3.3:1.

The practical rule is: if you are using a spun color as a text color on a white background, only indigo #6366F1 and teal #14B8A6 (contrast ratio 4.6:1) reliably clear normal-text AA without adjustment. All eight colors pass AA when used as button or card backgrounds with white text reversed out, because white on any of these medium-to-dark values clears 4.5:1 — indigo, teal, green and blue do so comfortably; amber and orange pass on white reversed text at 3.6:1 and 3.2:1 respectively, which clears the large-text threshold. Before finalising a spun result in a production UI, run it through a contrast checker: paste the HEX value displayed by the wheel and your background color, then read the pass/fail row directly. The wheel labels this value prominently after every spin precisely so that accessibility validation takes one paste rather than a color-picker hunt.

For users with deuteranopia (red-green deficiency, affecting roughly 8% of men and 0.5% of women of Northern European descent), red #EF4444 and green #22C55E can appear nearly identical when viewed as isolated swatches. The wheel mitigates this by printing the color name in text after every spin — a feature that costs nothing on a standard display and removes the ambiguity entirely for colorblind users. If you are building an interface that uses spun colors as category labels, consider pairing each with an icon or pattern, not color alone, to stay compliant with WCAG 1.4.1 (use of color).