What Do 0 to 255 Mean in RGB? The Basics of Web Colors

When you see a value such as rgb(0 102 204) in a website’s styles, what do its numbers mean? In RGB, 0 to 255 is not a single rating for how light or dark a color looks. Each number describes one component of red, green, or blue. Once you understand the order and the meaning of the values, you can identify exactly which component has changed. This article compares a base blue with a second blue made by increasing only its red component.

Zero means none of that component; 255 is its maximum value

RGB stands for Red, Green, and Blue. In a common eight-bit RGB representation, each component has 256 possible integer values, from 0 through 255. Zero means that component contributes none of its value, while 255 is the maximum. The CSS (Cascading Style Sheets, which controls webpage appearance) rgb() function lists red first, then green, then blue.

For example, rgb(0 0 0) produces black ■#000000, and rgb(255 255 255) produces white ■#FFFFFF. Giving all three components the same value, as in rgb(128 128 128), produces neutral gray ■#808080. Although 128 is roughly halfway through the numeric range, this does not mean the gray looks halfway between black and white in perceived brightness.

The value rgb(0 102 204) describes blue ■#0066CC, with red 0, green 102, and blue 204. If you change only red from 0 to 51, rgb(51 102 204) produces a different blue ■#3366CC. Green and blue remain unchanged, but the extra red alters the color’s appearance. The sum of the three numbers alone cannot tell you what a color will look like.

Web design example: change only red from 0 to 51

To compare the values, imagine a small color-study card. Use pale blue-gray ■#F8FAFC for the page background and white ■#FFFFFF for the card. Set its heading in dark blue-gray ■#1F2937, supporting text in slate ■#475569, and the card border in blue-gray ■#64748B. These neutral colors keep attention on the two sample colors.

The card shows the original blue ■#0066CC alongside the version with more red ■#3366CC. Both samples have white ■#FFFFFF labels spelling out “R=0” or “R=51” and the unchanged green and blue values. The numbers are visible alongside the colors, so the distinction does not depend on recognizing the hues. Changing one component at a time is also easier to track than adjusting all three together.

Here is a copyable example using HTML (HyperText Markup Language, which describes webpage content and structure) and CSS. The rgb() values are written with spaces between the three components, using the modern CSS syntax.

<div class="rgb-value-page">
  <section class="rgb-value-card" aria-label="Compare red components in RGB">
    <h3>How the red component changes the color</h3>
    <p>Green 102 and blue 204 remain unchanged.</p>
    <div class="rgb-value-sample">
      Base color: R=0, G=102, B=204
    </div>
    <div class="rgb-value-sample rgb-value-sample--red51">
      Adjusted color: R=51, G=102, B=204
    </div>
  </section>
</div>

.rgb-value-page {
  padding: 24px;
  background-color: rgb(248 250 252);
}
.rgb-value-card {
  padding: 20px;
  border: 2px solid rgb(100 116 139);
  border-radius: 10px;
  background-color: rgb(255 255 255);
  color: rgb(31 41 55);
}
.rgb-value-card h3 { margin-top: 0; }
.rgb-value-card p { color: rgb(71 85 105); }
.rgb-value-sample {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  background-color: rgb(0 102 204);
  color: rgb(255 255 255);
  font-weight: 700;
}
.rgb-value-sample--red51 {
  background-color: rgb(51 102 204);
}

White text ■#FFFFFF on the base blue ■#0066CC has a contrast ratio of approximately 5.57:1. On the adjusted blue ■#3366CC, it is about 5.37:1. Contrast ratio measures the relative brightness difference between a pair of colors. Dark heading text against the white card is about 14.68:1, and supporting slate text against white is about 7.58:1. The card’s blue-gray border contrasts with its white surface at about 4.76:1 and with the pale outer background at about 4.55:1.

A value of 128 is not a 50% perceived-brightness guarantee

RGB values describe color components, not whether text can be read. For example, gray ■#808080 on white ■#FFFFFF has a contrast ratio of approximately 3.95:1. Do not assume that a channel value of 128 makes a color suitable for normal-sized text. The actual foreground and background must be assessed together.

Under the Web Content Accessibility Guidelines (WCAG) 2.2, normal-sized text generally requires a contrast ratio of at least 4.5:1. The white labels on both blue backgrounds in this example exceed that threshold; the gray-on-white pair does not. The white card and its pale outer background contrast at only about 1.05:1, so use a visible border or another structural cue where the boundary matters. Essential non-text boundaries should also be checked against adjacent colors.

CSS also allows percentages in rgb(), and you can specify transparency with an additional value after a slash. Transparent colors blend with their background, so evaluate the resulting appearance rather than judging the RGB numbers in isolation.

HueRoll displays the RGB values of a selected color, but it does not accept RGB values as direct input. You can adjust colors using HEX (hexadecimal color codes beginning with #) or the color picker. The tool checks the selected color’s contrast against white and black only; it does not automatically compare arbitrary pairs or assess WCAG conformance. Use the component numbers to understand the color, then verify the actual combinations in the finished interface.