Guide
RGB Colors Explained
RGB is how screens make color: every pixel mixes red, green and blue light. Each channel runs from 0 to 255, so rgb(65, 105, 225) is a strong blue with some red and green mixed in.
How RGB works
A screen pixel is made of tiny red, green and blue lights. Turning each one up or down changes the color you see. This is called additive color, because adding more light makes the result brighter: all three at full strength give white, and all three off give black.
| Mix | Result | Value |
|---|---|---|
| Red only | Red | rgb(255, 0, 0) |
| Green only | Green (lime) | rgb(0, 255, 0) |
| Blue only | Blue | rgb(0, 0, 255) |
| Red + green | Yellow | rgb(255, 255, 0) |
| Green + blue | Cyan | rgb(0, 255, 255) |
| Red + blue | Magenta | rgb(255, 0, 255) |
| All three, full | White | rgb(255, 255, 255) |
| All three, off | Black | rgb(0, 0, 0) |
Reading an RGB value
Each of the three numbers runs from 0 to 255, which is 256 levels per channel and 16,777,216 colors in total. A few quick rules help you read a value at a glance:
- Equal numbers make a gray.
rgb(128, 128, 128)is mid-gray. Lower numbers are darker and higher numbers are lighter. - The largest number is the dominant hue. In
rgb(65, 105, 225)blue is by far the largest, so the color is blue. - The gap between the largest and smallest number sets the saturation. A small gap looks muted or gray. A big gap looks vivid.
To see a value in other formats, paste it into the RGB to HEX converter or the RGB to HSL converter.
RGB in CSS
CSS accepts several spellings of the same color. All five lines below describe royal blue, and the last two add transparency:
color: rgb(65, 105, 225);
color: rgb(65 105 225);
color: rgb(25.5% 41.2% 88.2%);
color: rgb(65 105 225 / 50%);
color: rgba(65, 105, 225, 0.5);The space-separated form with a slash for alpha is the modern syntax. The older comma form and rgba() still work everywhere, so you do not need to rewrite existing style sheets. Percentages use the same scale, with 100% meaning 255, so they need a decimal or two to land on the exact same color.
Mixing colors with RGB
Averaging two RGB colors gives a quick midpoint. Red rgb(255, 0, 0) and blue rgb(0, 0, 255) average to rgb(128, 0, 128), a purple (#800080). The color mixer does this for any pair and any mix ratio.
It is not the same as mixing paint. Painters expect blue and yellow to make green, but averaging blue rgb(0, 0, 255) and yellow rgb(255, 255, 0) gives a plain mid-gray, rgb(128, 128, 128), because the two colors cancel each other out. Light and pigment behave differently.
RGB numbers are not brightness
Human eyes are most sensitive to green and least sensitive to blue. That is why accessibility formulas weight the channels unequally: relative luminance counts red at about 21%, green at about 72% and blue at about 7%. The result is that two colors with the same top channel value can look very different. Full green rgb(0, 255, 0) has just 1.37:1 contrast with white, while full blue rgb(0, 0, 255) has 8.59:1. When text must be readable, measure it with the contrast checker instead of guessing from the numbers. The contrast guide explains the formula.
sRGB and wide-gamut screens
Unless told otherwise, browsers treat RGB values as sRGB, the standard color space for the web. Some newer screens can show more saturated colors than sRGB allows, and CSS has a color() function for those. Everything on this site uses ordinary sRGB, so the values you copy here will match what other web tools expect.
Printing uses a different model. If your color is headed for paper, read CMYK Colors Explained.