RGB Color Codes and Charts for Logo Palettes

The short answer

RGB is the color model screens use. Every color comes from mixing red, green and blue light, with each channel set from 0 to 255. For a logo palette, RGB codes give exact values for digital use: websites, apps, social media graphics, presentations and on-screen video. An RGB color chart is a visual lookup of swatches with their values. The RGB color wheel arranges those colors by hue so you can plan relationships between them. RGB values describe the logo's colors for screens. They do not, on their own, describe how the logo should print.

How RGB color codes are written

An RGB color is three numbers, one per channel. 0 means no light from that channel and 255 means full intensity. That gives 256 levels per channel and 16,777,216 possible combinations. The same color is usually written in two interchangeable forms: decimal triplets, and a six-digit hexadecimal (hex) code. In hex, each channel becomes two characters from 00 to FF.

Color | RGB decimal | Hex

Black | 0, 0, 0 | #000000

White | 255, 255, 255 | #FFFFFF

Red | 255, 0, 0 | #FF0000

Green | 0, 255, 0 | #00FF00

Blue | 0, 0, 255 | #0000FF

Cyan | 0, 255, 255 | #00FFFF

Magenta | 255, 0, 255 | #FF00FF

Yellow | 255, 255, 0 | #FFFF00

Example mid blue | 43, 108, 176 | #2B6CB0

The last row is an illustrative value, not a reference to any brand. It shows the conversion: 43 becomes 2B, 108 becomes 6C and 176 becomes B0. When equal values are set in all three channels, the result is a neutral gray. Lower numbers give darker grays and higher numbers give lighter ones.

Where RGB values live in a vector logo

In vector artwork, a color is a property of a shape's fill or stroke. It is not baked into pixels. Changing a palette value therefore recolors the path cleanly, at any size. In an SVG file, colors are usually written as hex or CSS-style rgb() values directly on the shapes, as in this simplified example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#2B6CB0"/>
  <path d="M30 50 L70 50" stroke="rgb(255, 255, 255)" stroke-width="6"/>
</svg>

In editors such as Illustrator-style applications, the document color mode (RGB or CMYK) controls how swatch values are stored and displayed. A logo intended mainly for screens is normally built or exported in RGB. Saving named global swatches for each palette color makes later changes consistent across the whole file.

There is one caveat when you pull RGB codes from an existing logo file. A file extension such as .svg, .eps, .ai or .pdf does not prove the artwork inside is made of editable vector paths. These formats can wrap an embedded raster image, and a preview thumbnail is always raster. If the logo is an embedded bitmap, any color picked from it is a pixel sample. Anti-aliasing, compression or scaling may have altered that sample, so it is not a defined fill value. Open the file and confirm the shapes are paths before treating the colors you sample as the official palette.

Using an RGB color chart

An RGB color chart helps you browse candidate colors and copy their codes. Keep two limits in mind:

• The same RGB numbers can look different on different screens. Panel type, brightness, calibration and color profile all vary, so judge final colors on more than one device.
• RGB values are only fully defined relative to a color space. sRGB is the common default for web and general screen use. Wider spaces such as Display P3 interpret the same numbers differently, so record which space your palette assumes.
• A printed RGB chart is a poor reference for screen color. The printer has already converted it to ink.

Using the RGB color wheel to build a palette

The RGB color wheel is built on additive light. Its primaries are red, green and blue, and its secondaries are cyan, magenta and yellow. This differs from the traditional painter's wheel based on red, yellow and blue, so complementary pairs fall in different places. On the RGB wheel, red sits opposite cyan, green opposite magenta, and blue opposite yellow. Palette tools that generate complementary, analogous or triadic schemes from an RGB or HSL model follow this arrangement.

Wheel-based schemes are a starting point, not a test of whether a logo works. Practical checks include:

• Contrast: if the logo includes text, or sits on colored backgrounds, check contrast ratios. WCAG guidance sets 4.5:1 for normal text and 3:1 for large text and meaningful graphical elements.
• Single-color fallback: confirm the mark still reads in one color, and reversed out of a dark background.
• Small sizes: closely related hues can merge at favicon or app-icon sizes.

When RGB is not enough

RGB is the right specification for screen output. Print uses ink. Some RGB colors, especially very saturated greens, blues and oranges, fall outside what typical CMYK printing can reproduce, and an automatic conversion may shift them noticeably. A complete logo palette therefore lists separate values for each output:

• RGB and hex for screens.
• CMYK for process printing.
• A spot color reference, where the brand uses one, for consistent printed color.
• The print values are usually chosen deliberately to match the intended color as closely as possible, rather than taken from a one-click conversion.

Knowing a color code is not permission to use a logo

Brand color codes are often published, and logo files can often be downloaded. Neither fact means you may modify the artwork, recolor it, reuse its fonts or use the trademark. Downloading, editing and using are separate permissions, and they are governed by the brand owner's guidelines and the applicable licenses.

Limits of this overview

This article covers general principles of the RGB model and their use in vector logo palettes. No evidence was available about a specific brand, chart, palette generator or software version. It therefore does not give official color values for any logo, compare particular tools, or report measured color differences between devices or conversions.