ColorFinderscolour instruments

RGB color picker

RGB color picker

Drive the red, green and blue channels directly and watch every other notation follow.

rgb(52, 152, 219)#3498db

Each channel is one byte: 0 means that light is off, 255 means it is at full strength. This colour is 20% red, 60% green and 86% blue, at 53% lightness.

All notations

  • HEX#3498db
  • RGBrgb(52, 152, 219)
  • RGBArgba(52, 152, 219, 1)
  • HSLhsl(204, 70%, 53%)
  • HSLAhsla(204, 70%, 53%, 1)
  • HSVhsv(204, 76%, 86%)
  • CMYKcmyk(76%, 31%, 0%, 14%)approx
  • LABlab(60.16 -6.1 -42.23)approx
  • CSSrgb(52 152 219)

Closest CSS keyword: steelblue approximate: #4682b4 is 12.81 ΔE away, so it is not the same colour

Tints and shades

The same hue and saturation mixed toward white and toward black. Useful for hover states, borders and disabled variants that still read as the same colour.

Harmonies

Sets built by rotating the hue. They are a starting point, not a rule. The proportions you use them in matter more than the angles.

Complementary

Opposite hues. Highest contrast pairing, good for a single accent.

Analogous

Neighbouring hues. Calm, low-tension schemes.

Triadic

Three hues evenly spaced. Balanced and lively.

Tetradic

Two complementary pairs. Needs one dominant colour to work.

Split complementary

The complement, split in two. Contrast without the clash.

Monochromatic

One hue at five lightnesses.

How the three channels combine

Every pixel on the screen you are reading this on is three separate light sources: one red, one green, one blue, packed close enough that your eye cannot resolve them individually. The RGB numbers say how hard each of the three is being driven.

Because they add, the arithmetic is easy to reason about. Red and green together make yellow, green and blue make cyan, and red and blue make magenta. All three equal makes a neutral grey whose brightness is that shared number, and all three at 255 makes white.

Why the scale is not perceptually even

Doubling the number does not double the apparent brightness. sRGB stores values through a transfer curve (roughly a power of 2.2) that spends more of the available numbers on dark tones, where the eye is more sensitive to small differences. It is an efficient use of eight bits, but it means channel arithmetic can surprise you.

The clearest example is a 50% grey. Halfway along the scale is 128, but the grey that actually looks halfway between black and white is closer to 186. Contrast calculations have to undo the curve before they compare anything, which is exactly what the contrast checker does.

Alpha

A fourth number turns rgb() into rgba(), from 0 for invisible to 1 for solid. Alpha is not part of the colour: it says how much of what is behind should show through. Two colours can only be compared for contrast after alpha has been resolved against a real background.

Frequently asked questions

Why does mixing red, green and blue make white?

Because a screen emits light rather than reflecting it. Each pixel has three tiny light sources and your eye adds them together, so all three at full strength reads as white. Paint does the opposite: it absorbs light, so mixing pigments moves toward black.

Why 0 to 255?

One byte holds 256 distinct values, and one byte per channel was the practical choice when the format was settled. Three channels of eight bits gives 16,777,216 combinations, which is about as many as an average person can distinguish.

Why does 128 not look like the middle of the scale?

Because the numbers are not proportional to perceived brightness. sRGB applies a transfer curve, so mid-grey to the eye sits nearer 186 than 128. It is also why averaging two colours channel by channel can produce a muddier result than you expected.

Is RGB the same as sRGB?

Not quite. RGB describes the model: three channels. sRGB is a specific definition of what those numbers mean: which exact red, green and blue, and which transfer curve. Values on this page are sRGB, which is what browsers assume unless told otherwise.

Read the guide

  • HEX vs RGB vs HSLThree ways of writing the same colour. What each notation is good at, and when to reach for which.
  • What is a HEX color code?Reading a hex code by eye, the shorthand form, the alpha byte, and the arithmetic underneath.