HSB & RGB Color Guide: How to Guess Any Color

RGB: How Screens Make Every Color

A screen pixel is three tiny lights: red, green and blue. Each one can be set from 0 (off) to 255 (full power), which gives 256 × 256 × 256 = over 16.7 million colors. Light mixing is additive: adding more light makes the color brighter, and all three at full power make white.

That is why red + green = yellow on a screen. Paint behaves the opposite way: pigments absorb light, so mixing paints makes colors darker. If you want to learn paint-style mixing with red, yellow and blue, read the color mixing guide for the Color Match game.

Hex Color Codes Explained

A hex code like #FF8000 is just the three RGB numbers written in base 16: two digits for red (FF = 255), two for green (80 = 128) and two for blue (00 = 0). So #FF8000 is full red, half green, no blue: orange.

HSB: Hue, Saturation and Brightness

RGB is how the screen stores color, but nobody thinks “58% green”. HSB (also called HSV) describes the same screen colors with three questions people naturally ask: which color is it, how vivid is it, and how light is it? Toon Tone's Color Guess game gives you exactly these three sliders.

Hue (0-360°): which color

Hue is the position on the color wheel. It wraps around, so 0° and 360° are both red.

Saturation (0-100%): how vivid

0% is a neutral gray, 100% is the purest version of the hue. Pastels and skin tones are low; neon and bold cartoon colors are high.

Brightness (0-100%): how light

0% is always black. 100% is the brightest version of the color at that saturation (with 0% saturation, 100% brightness is white).

HSB vs RGB vs HSL

• HSB and RGB describe the same colors; only the controls differ. Every HSB value converts to one RGB value and hex code (see the table above).
• In RGB, making orange “a bit darker” means changing all three numbers. In HSB you just lower brightness, which is why HSB is easier for guessing.
• HSL is a close cousin with the same hue wheel, but its third value is lightness: pure red is HSB(0°, 100%, 100%) but HSL(0°, 100%, 50%), and HSL 100% lightness is always white. Do not copy HSL numbers into the HSB sliders.

How to Guess Any Color, Step by Step

In Color Guess you see a cartoon character and are asked for the color of one part, like a shirt or hair, from memory. Each round the sliders start at H 180°, S 50%, B 50%, a medium cyan, so you always have to move all three. Work in this order:

1. 1

   Name the hue family first

   Before touching a slider, say the color family out loud: red, orange, yellow, green, cyan, blue, purple or pink. Then drag Hue to that part of the wheel. Hue is worth half of your score, so this step matters most.

2. 2

   Fine-tune the hue

   Decide which neighbor the color leans to. A warm yellow sits near 45-55°, a lemon yellow near 60°; a sky blue near 200°, a royal blue near 225-240°. Watch the character preview update as you move.

3. 3

   Set saturation

   Ask how vivid it is. Bold cartoon outfits are often 75-100%; skin, pastels and grayish fur are much lower. If the color looks dusty or grayish, lower saturation rather than brightness.

4. 4

   Set brightness

   Ask how light or dark it is. Most cartoon colors are bright, so start high and only go low for dark colors like navy, brown or dark green.

5. 5

   Compare and submit

   Look at the live preview on the character as a whole and nudge whichever slider looks most off, then press Submit. On timed difficulties, get the hue right first in case the clock runs out.

What the character colors look like

Across the 65 colors currently in the game, the middle half have saturation between 55% and 91% (median 78%) and brightness between 72% and 96% (median 88%). 78% of targets have brightness of 70% or more. In other words: cartoon colors are usually bright, so when in doubt start brightness high and spend your effort on hue and saturation.

Tricky Colors: Brown, Pink, Navy, Skin Tones and Pastels

Some everyday color names are not on the hue wheel at all. They are a hue plus a particular saturation and brightness.

How Color Guess Scoring Works

• Each round is scored from 0 to 10 by comparing your H, S and B values with the target.
• Hue counts for 50%, saturation 25% and brightness 25%. Hue is measured around the wheel, so 350° vs 10° is only 20° apart.
• Each part uses a square-root curve: score = 1 − √(error ÷ max error), where the max is 180° for hue and 100% for saturation and brightness. The first few degrees or percent off cost the most, and being slightly off is much better than being far off.
• Using the hint shows a band of ±36° hue and ±20% saturation and brightness around the answer, and costs 1 point (a perfect guess with a hint scores 9).
• Easy has no timer, Medium gives 15 seconds and Hard 5 seconds per round. When time runs out, the current slider position is submitted automatically.
• A game is 5 rounds and your final score is the average.

Real scores from the game's scoring code when only one slider is off:

Tips for a higher score

• Lock in the hue family before anything else: a wrong hue costs twice as much as a wrong saturation or brightness.
• Save the hint for colors you genuinely cannot place. It narrows hue to a 72° band, but a close unaided guess usually beats the 1-point penalty.
• On Hard (5 seconds), move hue first, then brightness up, and submit. Fine detail is less valuable than a roughly right hue.
• Train your eye between rounds with Color Match, where the target stays on screen.

Color Guessing FAQ