Color Modes

Your constantly-updated definition of Color Modes and collection of topical content and literature

What are Color Modes?

Color modes are the settings designers use to show colors consistently across devices and materials. Commonly used modes are LAB, RGB, CMYK, index, grayscale and bitmap, which differ in quality and file size. Designers pick modes to optimize images and ensure these appear identically across media for brand consistency.

“The main function of color should be to serve expression.”

— Henri Matisse

Learn about the intricate properties of color here.

Show Hide video transcript
  1. Transcript loading...

Achieving Color Consistency and More in Screen and Print

The designs we create appear on many devices and materials, and how we manipulate color greatly depends on the medium we use. This is due to differences in color spaces (i.e., the specific organization of colors), and the two processes for producing color, namely:

  • Additive – involving the blending of light. We “create” white by mixing all the colors at full intensity; black is the total absence of color.

  • Subtractive – involving the mixing of physical substances (e.g., ink, paint). Each dot/splotch covers the medium (e.g., paper). A classic example of mixing all paint colors is that curious dark grey-brown hue.

You may have seen how printed-out colors can look different from those on-screen. This phenomenon happens because the printer’s colors (using the subtractive process) didn’t replicate the screen’s (using the additive). Such inconsistencies can be easy to correct if you choose the right color mode (e.g.):

  • LAB

  • RGB

  • CMYK

  • Index

  • Greyscale

  • Bitmap

Image comparing lab, rgb, cmyk, index, greyscale and bitmap color modes

Illustration comparing LAB (Infinite Colors), RGB (Millions of Colors), CMYK (4 Printed Colors), Index (256 Colors), Greyscale (256 Shades of Grays) and Bitmap (2 Colors).
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

How to Pick the Right Mode for the Context

LAB – Also called CIELab, this mode is based on how humans perceive color. It comprises one channel for lightness (L, ranging from the values 0–100) and two for color (A—the Green-Red Axis channel—and B, the Blue-Yellow Axis channel, ranging from +127 to -128). LAB color is device-independent, making it easy to achieve exactly the same color across different types of media so your (e.g.) digital logo appears identically on a mug, banner, etc. However, LAB’s large file sizes can delay load times. 

Uses:

  • Branded Products (e.g., T-shirts, banners)

  • Color Reference

  • Photography

  • Improving images with a natural and vibrant look

Illustration depicting the lab color mode

The LAB color mode, shown in graph form.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

RGB – This color mode uses the additive process. It comprises Red, Green and Blue hues that combine to create extensive color variations. RGB exists exclusively in digital formats (e.g., mobile screens). Although RGB is present across most electronic devices, the color elements vary across systems and models. So, an image can display differently on-screen from brand to brand. 

Uses:

  • Web & App Design

  • Digital Design

  • Social Media

  • Online Advertisements

Illustration depicting the rgb color mode

The RGB color mode — think of monitors.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

CMYK – This subtractive color mode comprises Cyan, Magenta, Yellow and Key (Black), which combine to produce a range of hues. This four-color process works for most printers. Printed images are essentially a series of layered four-color dots (measured in dots per inch) that create different hues and gradations. Although CMYK is a standard color model, the exact range of colors represented can vary, depending on the press and printing conditions. 

Uses:

  • Stationery (e.g., business cards)

  • Advertising (e.g., posters, flyers, brochures)

  • Product Packaging

Tip – Use CMYK mode when preparing an image to be printed with process colors, as image conversion from RGB to CMYK creates a color separation. If you start with an RGB image, it’s best to edit first in RGB and then convert to CMYK afterwards.  

Illustration depicting the cmyk color mode

The CMYK color mode — think of printers.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Index – This mode produces 8‑bit image files with up to 256 colors. Like RGB, this color mode is exclusively for digital formats, on-screen. When you convert an image to index color, a color table gets built to store and index the image’s colors. If a color in the original image doesn’t appear in the table, the software chooses the closest one or uses a dither effect to simulate the color. 

Uses:

  • Websites

  • Digital Presentations

  • Mobile Applications

While its color palette is limited, index color can reduce file size yet maintain the desired visual quality for digital presentations, websites and mobile applications. So, this mode is ideal for image optimization. For extensive editing, it’s best to convert temporarily to RGB mode.

Illustration depicting the index color mode

The Index color mode.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Greyscale – This black-and-white-looking mode actually comprises various shades of grey within an image. You can use it in print and digital formats. In digital, each image pixel has a value ranging from 0 (black) to 255 (white). In print, the values range from 0% (white) to 100% (black), representing the amount of black ink used.

Uses: 

  • Digital formats, to express a certain tone in your designs 

  • Print formats, to lower costs and minimize ink usage

Illustration depicting the greyscale color mode

The Greyscale color mode.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Bitmap – A.k.a. line art, this mode comprises black and white pixels, with no colors or shades of grey. In digital formats, black and white values represent an image’s pixels, while black ink dots and the white of the paper represent the overall image in print formats.

Uses:

  • Print and digital formats, to create a line drawing or hand-drawn sketch, or make vintage effects.

While jagged-edged on-screen, bitmap images usually print smoothly with high resolution.

Illustration depicting the bitmap color mode

The Bitmap color mode.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Learn More about Color Modes

Take our Visual Design course: https://www.interaction-design.org/courses/visual-design-the-ultimate-guide

Read helpful insights and tips: https://uxplanet.org/the-best-color-palette-generators-in-2021-dfe530a6c0b0

Find some advanced insights here: https://medium.com/eightshapes-llc/light-dark-9f8ea42c9081

Literature on Color Modes

Here’s the entire UX literature on Color Modes by the Interaction Design Foundation, collated in one place:

Learn more about Color Modes

Take a deep dive into Color Modes with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All Literature

Please check the value and try again.