Color basics

Why you need this

Stage 1 of the art pipeline decides a palette, and every later stage picks colors from it. A palette that looks pretty as swatches can still fail as a sprite if two of its colors have the same lightness, because the eye reads shape from lightness first and hue second. This page gives you the three-number description of color that artists actually think in, and the two tests that catch a bad palette before you draw with it.

The idea

RGB: three lights

A screen pixel is three tiny lights, red, green, and blue, each at a brightness from 0 to 255. All three off is black, all three full is white, and equal amounts at any level are gray. Written as hex, #c96a5a is red 201, green 106, blue 90. RGB is how the hardware works, but it is a poor way to think: "make it a little less orange" is not any single channel.

HSV: how artists think

HSV describes the same color as hue, saturation, and value. Hue is the position on the color wheel as an angle from 0 to 360 degrees: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, and 360 wraps back to red. Saturation, 0 to 100 percent, is how far the color is from gray: 0 is gray, 100 is the purest version of that hue. Value, 0 to 100 percent, is the brightness of the brightest channel: 0 is black no matter the hue.

HSL is a cousin that replaces value with lightness, where 100 percent is white instead of the pure hue. This cluster says HSV unless noted.

Artists think in HSV because the three knobs match the three questions you ask while shading: warmer or cooler (hue), more or less vivid (saturation), lighter or darker (value). Changing one leaves the other two alone, which RGB never does.

Converting one color both ways

Take #c96a5a, red 201, green 106, blue 90. The largest channel is 201 and the smallest is 90.

• Value is the largest channel over 255: $201 / 255 = 0.79$, so 79 percent.
• Saturation is the spread over the largest: $(201 - 90) / 201 = 111 / 201 = 0.55$, so 55 percent.
• Hue, since red is the largest channel, is $60 \cdot (G - B) / (\max - \min) = 60 \cdot 16 / 111 = 8.6$, about 9 degrees. A red leaning slightly toward orange.

So #c96a5a is roughly HSV(9, 55, 79). Going back: value 79 percent gives the largest channel $0.79 \cdot 255 = 201$. Saturation 55 percent makes the smallest channel $201 \cdot (1 - 0.55) = 90$. Hue 9 degrees sits 9/60 of the way from red toward yellow, so green rises 9/60 of the spread above the minimum: $90 + 0.15 \cdot 111 = 107$. That gives #c96b5a, one step off in green from rounding the angle. HSL reports the same color at lightness $(201 + 90) / 2 / 255 = 57$ percent, which is why the two systems disagree about a "50 percent" color.

Value carries readability

The eye has far more cells sensing brightness than color. A sprite whose colors differ only in hue disappears against its background; one whose colors differ in value reads even in grayscale. Two tests catch the problem:

• The squint test. Squint until the screen blurs. Hue detail vanishes and only the value pattern remains. If the character no longer separates from the floor, the palette has no value contrast.
• The grayscale test. Convert to gray. A fair approximation is $0.30 R + 0.59 G + 0.11 B$; green counts for more than half because the eye is most sensitive there. Pure red #ff0000 becomes gray 76, pure green #00ff00 becomes 150, pure blue #0000ff becomes 29. Three colors that look equally "bright" as swatches sit at three very different values.

#c96a5a in gray is $0.30 \cdot 201 + 0.59 \cdot 106 + 0.11 \cdot 90 = 60 + 63 + 10 = 133$. A ramp is only a ramp if its grays rise in order; see Palettes and ramps.

Warm and cool

Hues from red through orange to yellow (roughly 0 to 70 degrees) read as warm; green through blue to violet read as cool. Warm colors seem to advance and cool colors recede, which is why lit sides are pushed a little warm and shadows a little cool in Light and form. A warm sprite on a cool background separates for free.

Three color relationships

Complementary colors sit opposite each other on the wheel, 180 degrees apart. The complement of #c96a5a (hue 9) is hue 189 at the same saturation and value: #5bb9c9, a teal. Complements give maximum hue contrast, so a warm character on a teal-tinted floor pops; side by side at equal value and saturation they vibrate, so let one dominate.

Analogous colors are neighbors within about 30 degrees. Around #c96a5a that is #c99b5b (hue 35, an orange) and #c95b76 (hue 345, a rose). Analogous sets feel unified and are the usual choice for one material's ramp, with the hue drifting warmer as the value rises.

Split-complementary takes a base color plus the two colors 30 degrees either side of its complement, hues 159 and 219 here: #5bc9a3 (a green-teal) and #5b82c9 (a soft blue). It keeps the punch of a complement without the vibration, and gives a game two cool accents against one warm one.

Contrast ratio for text

For text and UI, "different enough" has a number. Each color has a relative luminance, its brightness on a 0 to 1 scale computed from the linear (un-gamma-corrected) channels with weights near 0.21, 0.72, and 0.07. The contrast ratio between two colors is $(L_1 + 0.05) / (L_2 + 0.05)$ with the lighter luminance on top; white on black is 21:1. The accessibility rule of thumb is at least 4.5:1 for body text and 3:1 for large text and icons. Every editor and browser has a checker. The ratio, not the hue difference, decides legibility. UI and text in pixel art applies this at 5-pixel font sizes.

Color blindness

About one in twelve men has some red-green color deficiency; deuteranopia, weak or missing green receptors, is the most common. To such a player a red enemy and a green ally at the same value look the same. Never encode a game state in red versus green alone. Add a value difference (make one clearly darker), a shape difference (a different icon or outline), or both. Blue versus orange survives every common deficiency, and value differences survive all of them.

Worked example

Six named colors with their hex and HSV, so you can see the three knobs move.

Color	Hex	Hue	Saturation	Value	Gray (0.30/0.59/0.11)
Red	#ff0000	0	100	100	76
Orange	#ff8000	30	100	100	152
Yellow	#ffff00	60	100	100	227
Green	#00ff00	120	100	100	150
Sky blue	#87ceeb	197	43	92	188
Mid gray	#808080	0 (any)	0	50	128

Read down the value column: five of the six are at 92 or above, yet their grays span 76 to 227. Value in HSV is the brightest channel, not perceived lightness, which is exactly why the grayscale test exists. Read across sky blue: lowering saturation to 43 is what makes it "sky" rather than cyan, and hue 197 leans slightly toward blue from pure cyan at 180.

In a game's art pipeline

Stage 1 writes the palette down as a list of ramps, each an ordered set of colors from dark to light, and this page supplies the vocabulary for that list. Stage 2, drawing the still, uses hue shifts inside a ramp and value order between ramps. Stage 4, building the world and its UI, is where contrast ratio and color-blind safety get checked, because that is where text and state indicators live. A palette that passes the grayscale test at stage 1 saves every later stage from redrawing.

Common mistakes

• Picking colors as swatches on white. Symptom: the sprite looks fine in the palette panel and vanishes on the game's dark background.
• Shading by darkening value only. Symptom: shadows look like dirty gray versions of the base color. Shift hue toward cool as the value drops.
• Using pure #000000 and #ffffff. Symptom: outlines and highlights that look pasted on, unrelated to the palette.
• Red enemy, green friend, same value. Symptom: a color-blind tester cannot tell the two apart and nothing else on the sprite distinguishes them.
• Trusting HSV value as lightness. Symptom: a pure blue at value 100 reads darker than mid gray, so a blue-on-gray icon has no contrast.
• Text at 3:1 or less. Symptom: readable on the artist's monitor, unreadable on a phone in daylight.

Cost

Thinking in HSV costs nothing: every editor has an HSV or HSL picker. The squint and grayscale tests take seconds and belong on every new ramp, because fixing a value problem after a sprite sheet is drawn means recoloring every frame, while fixing it in the palette is one number. A shape cue beside a color cue costs a few pixels per icon. A palette that ignores contrast ratio costs a redraw of every UI element once the first player cannot read the score.

Going further

• Palettes and ramps, for turning these knobs into a fixed set of colors.
• Light and form, for how value order builds a three-dimensional shape.
• UI and text in pixel art, for contrast ratio at tiny sizes.
• Shading and lighting, for hue shifting inside a ramp.