Understanding HEX, RGB, and CMYK Color Codes

Published August 31, 2026 · By the Shipirox team

Color codes make it possible to reproduce the same visual color across websites, design software, social-media graphics, presentations, packaging, and printed materials. But not every color format is designed for the same purpose. HEX and RGB are mainly used for screens, while CMYK is used for print. Understanding the difference helps you choose the right values for each project and avoid unpleasant color surprises.

A brand color might look perfect on a monitor and still appear different on a printed flyer, menu, label, or business card. This does not necessarily mean someone made a mistake. Screens create color with light, while printers create color with ink. These are different systems, with different limits. This guide explains how HEX, RGB, and CMYK work, when to use each one, and how to build a more consistent workflow for digital and print design.

Why color codes matter

When you say a color is “green,” “blue,” or “orange,” there are thousands of possible shades. A color code removes uncertainty. It gives a designer, developer, printer, or marketing team an exact value to work from. Instead of asking for a “dark forest green,” you can provide a HEX value such as #4F7A58 or an RGB value such as rgb(79, 122, 88).

Color codes are especially important for brand consistency. Your logo, website buttons, product pages, email templates, social graphics, ads, and printed packaging should use approved values rather than close guesses. Small differences may seem unimportant in isolation, but they can make a brand feel less organized when they appear repeatedly across different channels.

HEX: the common format for web design

HEX stands for hexadecimal. A HEX color code starts with a # symbol and usually contains six characters, such as #4F7A58. The six characters are divided into three pairs. The first pair represents red, the second represents green, and the third represents blue.

Each pair ranges from 00 to FF. In ordinary decimal numbers, this is equivalent to a range from 0 to 255. For example, #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #FFFFFF is white because red, green, and blue are all at their maximum intensity.

HEX values are popular because they are compact and easy to copy. You can use them in CSS, WordPress, Elementor, Figma, Canva, Photoshop, and most other design tools. When a developer asks for a website color, HEX is often the most convenient format to provide.

RGB: color made with screen light

RGB stands for red, green, and blue. Digital screens create colors by combining these three types of light. RGB values are written as three numbers from 0 to 255, such as rgb(79, 122, 88).

The first number controls red, the second controls green, and the third controls blue. A value of rgb(255, 0, 0) is red because only the red channel is active. A value of rgb(255, 255, 255) is white because all three channels are at maximum brightness. A value of rgb(0, 0, 0) is black because no light is emitted.

HEX and RGB can describe the same screen color. For example, #4F7A58 and rgb(79, 122, 88) represent the same green. The difference is only the notation. HEX uses hexadecimal pairs, while RGB uses ordinary numbers.

RGB is particularly useful when you need transparency in CSS or design software. Modern CSS can include an alpha value, such as rgb(79 122 88 / 60%). This creates a semi-transparent version of the color, which is useful for overlays, shadows, tinted backgrounds, and layered hero images.

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(79 122 88 / 60%);
}

CMYK: colors for ink and paper

CMYK stands for cyan, magenta, yellow, and key black. It is used for commercial printing because printers create color by placing ink on paper rather than emitting light. CMYK values are commonly written as percentages, such as C: 35, M: 0, Y: 28, K: 52.

CMYK is a subtractive color model. White paper reflects light, and each layer of ink absorbs some light. Adding more ink generally makes the printed result darker. This is different from RGB, which is additive: adding more red, green, and blue light makes the screen color brighter.

The K in CMYK stands for key black. Black ink is included because combining cyan, magenta, and yellow inks does not usually create a deep, clean black on paper. Using black ink also improves text sharpness and can reduce the amount of colored ink needed for dark areas.

Why the same color can look different in print

Monitors and phones can display bright colors using light. Paper cannot emit light, and printing inks have a smaller range of colors than many screens. This means some bright RGB or HEX colors cannot be reproduced exactly in CMYK. A vivid neon green, intense electric blue, or glowing orange on a monitor may look softer, darker, or less saturated after printing.

Paper also changes the result. Uncoated paper absorbs more ink and can make colors look softer or more muted. Glossy paper often makes colors look more saturated. The printer, ink profile, finishing method, and viewing light all affect the final appearance.

For this reason, a simple online conversion from HEX to CMYK should be treated as an estimate. If the color is important for packaging, product labels, menus, posters, or high-volume print work, ask the printer for the correct color profile and request a proof before approving production.

When should you use each format?

For most website projects, HEX is the simplest format to save and share. Use RGB when transparency or direct channel values are useful. Use CMYK only for print-ready work or when a printer asks for it. Do not assume a CMYK value is needed for a website, and do not assume a HEX code is enough for a print production file.

How to convert colors between formats

Most design tools can convert between HEX, RGB, and CMYK automatically. You can enter a HEX value in a color picker and view its RGB equivalent. In print-focused software, you can convert a document from RGB to CMYK using a selected color profile.

However, conversion is not always visually perfect. Converting between HEX and RGB is straightforward because they describe the same RGB screen color. Converting from RGB to CMYK involves moving from a screen color space to an ink color space, so the resulting printed color may not look identical.

When accuracy matters, work with a printer or production designer. They can recommend the right CMYK profile for the print method and paper, adjust out-of-gamut colors, and provide a proof that shows the likely final output. For highly controlled brand colors, a spot-color system may also be considered.

Use image colors in digital and print projects

You can use an image as a starting point for any color project. Upload a product photo, moodboard, artwork, nature image, or campaign visual to the free Shipirox color palette extractor to find its dominant colors as HEX and RGB values. This is useful when you want a website, social post, or presentation to match the images it contains.

For example, a product image may reveal cream, deep green, warm clay, and dark charcoal. These can become your digital colors for website backgrounds, navigation, buttons, and text. If the same product needs printed packaging or a brochure, use the digital palette as the design direction, then create approved CMYK values with your printer.

Store the digital version of a palette in CSS variables for consistent website use:

:root {
  --color-background: #F6F1E8;
  --color-primary: #4F7A58;
  --color-accent: #D98A2B;
  --color-text: #25241F;
}

For a detailed explanation of extracting colors from images, see our guide on how to extract a color palette from any image.

Keep color choices accessible on screens

HEX and RGB colors used on a website also need to be readable. A color may be accurate to your brand or image, but it can still be difficult to see as text or a button label. Light beige, pale yellow, soft pink, and muted green often work well as backgrounds but may not offer enough contrast for small text.

For normal body text, a contrast ratio of at least 4.5:1 is a common WCAG AA target. Large text can use 3:1. Test your body copy, headings, links, buttons, form labels, icons, and navigation. If a brand color does not pass contrast, use it for a background or decorative element and create a darker related shade for readable text. Learn more in our color contrast and accessibility guide.

Document colors in your brand guide

A clear brand guide should contain the right values for the right use. For a digital-only brand, HEX and RGB may be enough. For a business that also produces printed materials, add CMYK values and clear notes about the print profile or printer requirements.

Include the intended role of each color as well. For example, identify which color is used for the logo, main buttons, background surfaces, long-form text, and promotional accents. This prevents inconsistency when different team members create web pages, social content, packaging, or print files.

Common mistakes to avoid

• Sending HEX codes directly to a printer. HEX is a screen format. Ask for the printer’s preferred CMYK profile and proofing process.
• Expecting screen and print colors to match perfectly. Screens use emitted light, while print uses ink on paper, so differences are normal.
• Using RGB images in final print files without checking them. Convert and review the document in the correct print workflow before production.
• Using low-contrast brand colors for text. A beautiful screen color may still be difficult to read without enough contrast.
• Saving only one type of color value. A complete digital-and-print brand guide should include HEX, RGB, and printer-approved CMYK references.
• Skipping a physical proof. For important packaging, labels, menus, or large runs, a proof is the best way to review actual output.

Use the right color system for the job

HEX, RGB, and CMYK are not competing formats. Each one is useful in the environment it was designed for. HEX is compact and practical for websites. RGB represents the light-based colors used on screens. CMYK is the print-oriented model used when colors are produced with ink on paper or packaging.

Use HEX and RGB for your digital work, then use printer-approved CMYK values for physical production. Keep all approved values in a clear brand guide, test digital contrast for readability, and request proofs when print color matters. With this approach, your colors can remain more consistent wherever customers encounter your brand.