Brand Color Codes: HEX, RGB, CMYK and Spot Colors

Brand colors often get written down as one value, like #1E6FEB. That value only describes the color on a screen. Print needs its own values, and when the color can’t be allowed to drift, you specify it by swatch number.

The table below shows which notation to use for each medium. The sections after it explain how HEX, RGB, CMYK and spot colors (DIC, PANTONE) differ, how to record colors in your guidelines, and how to check whether a color works as a text color.

How should a brand color be written for each medium?

What is the difference between HEX and RGB?

They’re two notations for the same color. A screen makes color by mixing red, green and blue light at different intensities. RGB writes each intensity as a number from 0 to 255, in red, green, blue order. HEX writes the same three numbers in base 16, two digits each, run together after a #.

In #DFF000, for example, red is DF (223), green is F0 (240) and blue is 00 (0), so the RGB value is rgb(223, 240, 0).

• When each channel’s two digits match (FF, CC, 00 and so on), you can shorten the value to three digits: #FC0 is the same as #FFCC00.
• Case doesn’t matter. Pick upper or lower case for your guidelines and use it throughout.
• Web color is defined in the sRGB color space, and both HEX and RGB describe screen colors within it.

Which one you use depends on the tool. Web work usually takes HEX; slide software and design tools often ask for RGB, and many tools have fields for both. You get the same color either way.

What is CMYK, and why can’t RGB be converted to it exactly?

CMYK describes a color as percentages of four inks: cyan, magenta, yellow and black. A screen adds light to make color. Print works the other way round: ink goes on paper, and the color you see is the light the paper reflects.

As a result, screens and print can reproduce different ranges of color (different gamuts). A vivid yellow-green or blue on screen may be out of reach for CMYK and print duller. Paper (coated or matte) and printing conditions also affect the result. Commercial printers in Japan widely use Japan Color profiles.

CMYK values from a formula are only a rough guide

There is a mechanical way to get CMYK from RGB: K = 1 − max(R, G, B) ÷ 255, C = (1 − R÷255 − K) ÷ (1 − K), with M and Y worked out the same way as C. For Acme’s main color, rgb(30, 111, 235), that gives C87 M53 Y0 K8.

The formula doesn’t account for gamut or paper, and the values that actually go to press are adjusted for the printer’s conditions. So don’t rely on conversion: decide RGB and CMYK separately from the start and record both.

When should you use a spot color (DIC or PANTONE)?

A spot color is an ink mixed in advance and printed as a single color. CMYK builds a color from four inks; with a spot color, the same number means the same ink, so the color drifts far less. Paper and ink thickness still affect how it looks.

• DIC: numbers from DIC Corporation’s DIC Color Guide, widely used in Japanese printing.
• PANTONE: swatch numbers from Pantone, a US company, often specified for international work. Each number has a paper suffix (C for coated, U for uncoated), so write it in full, for example “PANTONE 286 C”.

Reach for a spot color in these cases:

• A corporate color that has to stay tightly consistent
• Fluorescents, gold or silver, which CMYK can’t produce
• A vivid color that CMYK would dull

Each spot color adds a printing plate, which costs more. Short runs such as business cards are often printed in CMYK as an approximation, so list both the spot color number and its nearest CMYK values in your guidelines. Then either kind of job is covered.

How should colors be written in the guidelines?

In real guidelines, the CMYK column holds the values agreed with the printer. The figure here is the rough formula value.

• Name each color so people can refer to it easily when sharing.
• State its role: main, secondary, background or text.
• Use one format throughout. HEX in upper case with a #, RGB as comma-separated numbers from 0 to 255, CMYK as percentages.
• Keep screen and print values apart. For screens, HEX and RGB (sRGB). For print, CMYK, plus a spot color number if you use one.

How MediaKit™ handles colors

MediaKit™’s color section shows each color’s name with its HEX and RGB values for screens, and clicking a value copies it to the clipboard. If you want to publish CMYK or spot color numbers as well, add them as text in your guidelines overview. The upload guide walks through the steps.

Can a brand color be used as a text color?

Text readability is measured by the contrast ratio between the text and its background. WCAG 2.x, the international web accessibility standard, requires at level AA a ratio of 4.5 : 1 or more for normal-size text and 3 : 1 for large text (about 24px and up, or about 19px and up in bold).

The ratio is calculated from each color’s relative luminance: (lighter luminance + 0.05) ÷ (darker luminance + 0.05). A contrast checker does the math for you from two colors, so there’s no need to memorize it.

#DFF000 is one of the brand colors registered in Creators Team Inc.’s kit. As text on white it fails, so use it on black or as a background color. If your guidelines say for each color which backgrounds it can sit on as text, you avoid low-contrast mistakes.

WCAG has no contrast requirement for text that is part of a logo (a logotype). This section is about brand colors used for ordinary text, not about the logo itself.

Common mistakes and how to fix them

For the overall structure of brand guidelines, see How to Write Brand Guidelines: Six Essentials. For choosing logo file formats, see Logo File Formats: SVG, PNG, PDF and AI.