Blog

Understanding RGB values for a product catalog

Learn what RGB numbers mean, how to sample catalog colors on screen, and how to keep swatches consistent across web and print workflows.

Megan FosterTools and utilities 4 min read

A product color looks right in one catalog image but different on a website, a second computer, or a printed page. RGB values can help you identify and reuse a color, but they do not guarantee that it will look identical everywhere.

Use the Color Picker to sample a color displayed on your screen and read its RGB numbers. Then check what those numbers describe, and how to handle them in a catalog workflow.

Sample a catalog color

  1. Open the Color Picker in Chrome or Edge on a computer. Its screen-color picking feature works in those browsers. Other browsers may offer a reduced version or none.
  2. Display the catalog image or color swatch at a useful size. If the browser asks you to choose what to share, select the screen or window that shows the color.
  3. Pick a point near the center of a flat, solid-colored area. Avoid its edge, text, a shadow, a highlight, or a textured part of the product image.
  4. Read the RGB result and record it with the product name, variant, and source image. The tool also provides other formats, including HEX and HSL.
  5. Repeat on any other swatches you need to document. Use the same source image and similar display conditions when comparing results.

A screen sample describes the pixel you selected as it is currently displayed. It does not necessarily reveal the original color value stored in the image file, because editing, color management, scaling, and compression can change what you see.

What RGB values mean

Three numbers describe red, green, and blue

RGB stands for red, green, and blue. A typical RGB value has three numbers, one for each color channel. Each number usually ranges from 0 to 255. For example, 230, 45, 30 means a strong red component, with less green and blue.

Screens create colors by combining light from these three channels. A value of 0, 0, 0 is black because all three channels are off. A value of 255, 255, 255 is white because all three are at their maximum. Equal values such as 120, 120, 120 make a shade of gray.

The numbers identify a digital color, not a guaranteed appearance

RGB values are useful for reusing a color in digital catalog artwork, website graphics, or product documentation. They are not a direct measurement of how a person will see the color. Display brightness, color profiles, screen technology, and viewing conditions can all affect its appearance.

If two screens show the same RGB numbers but the color looks different, that does not automatically mean one set of numbers is wrong. The screens may be displaying color differently. For more on choosing between RGB, HEX, and HSL, see HEX vs. RGB vs. HSL: which format should you use?

Print may use a different color system

Catalog images prepared for print may be converted from RGB to CMYK, a color model based on printing inks. The paper, ink, printer, and color profile affect the result. Some bright screen colors cannot be reproduced exactly with standard printing inks, so a printed proof may look less vivid than the screen version.

How to fix inconsistent catalog colors

  1. Choose one source of truth. Pick the approved product image, swatch, or brand file as the reference. Do not copy a color from a screenshot if you can use the original artwork or its documented values.
  2. Sample a flat area. Product photos have reflections, shadows, gradients, and surface texture. These change pixel values across the object. If you need a catalog color specification, sample a solid swatch instead of a reflective area in a photo.
  3. Keep display adjustments consistent. Night Light on Windows 11 is under Settings › System › Display › Night light. On a Mac, check System Settings › Displays for Night Shift, True Tone, and the selected color profile. These features can change how a color looks while you inspect it.
  4. Check the profile used for the artwork. A color profile tells compatible software how to interpret color values. If the same image looks different in two applications, check their color-management settings and use the profile specified for the catalog project.
  5. Keep RGB and print specifications separate. Record the RGB value for digital use, and ask the designer or printer which print profile or CMYK values the job requires. Do not assume that copying RGB numbers into a print workflow will preserve the appearance.
  6. Compare a proof under consistent light. If the final catalog is printed, review a proof on the intended paper under neutral, steady lighting. A screen preview alone cannot confirm the printed color.

Use RGB values consistently in a catalog

For each product color, keep the value, format, source, and intended use together. For example, note that a value is RGB for a web swatch, rather than leaving three numbers without labels. If a catalog has both web and print artwork, store the approved digital and print specifications separately.

RGB values are most useful when everyone is working from the same color source and format. A sampled value can help you match a displayed swatch, but it cannot correct a poorly calibrated display or make a printed color identical to a screen.