Comparing RGB, HSL, HEX and CMYK, and where they fall short for design

In the following sections, we will demonstrate each color model using the color #99CC00. This interactive example will help illustrate how the RGB, CMYK, HSL, and HEX model color and how they can be used to manipulate it.

RGB was designed for monitor technology, and it excels for that job. However, color matching was not part of that design. Its designed for light emission, and thus, defies traditional artistic understanding of color combination. For example, mixing red and green in RYB produces brown, but in RGB, it produces yellow.

The RGB color model operates on a scale of 0 to 255 for each color channel – red, green, and blue. This scale determines the intensity of each color, with 0 representing no color (black) and 255 the full intensity of the color. This amounts to 16.7 million possible colors.

Working with RGB can be very counter-intuitive and it does not produce harmonious results. Linear RGB (lRGB), which deals with the light intensity linearly, offers a more realistic approach to how light and color interact, but is still challenging to apply.

CMYK (Cyan, Magenta, Yellow, Black) is the cornerstone of print design, operating on the principle of subtractive color mixing. It's fundamentally different from RGB and HSL/HSV, which are additive color models.

Unlike RGB's additive nature, CMYK starts with white (i.e. a sheet of paper with no ink) and subtracts brightness to create color. Its scale typically ranges from 0% to 100% for each ink, going from no ink usage to the full saturation of the color.

Adjusting these sliders can cause erratic changes as they are operating in the RGB color space. CMYK is not optimal for digital design due to its limited brightness compared to RGB, which can make your prints appear faded. When preparing your files for print, you may want to enter custom values for CMYK into your graphic editor, rather than rely on it for RGB to CMYK conversion.

HSL was created as an intuitive alternative to work with RGB. It breaks down color into three dimensions: Hue, Saturation, and Lightness. This approach aligns more with how humans perceive color and make it easier to operate.

The scales for Hue range from 0° to 360°, representing the color spectrum, while Saturation and Lightness are measured from 0% to 100%. This scale technically amounts to 3.6 million possible colors — far less than RGB — unless the software accepts decimal values.

However, HSL has a huge problem with uniformity: adjusting the Saturation or Lightness in consistent amounts doesn't produce consistent color changes.

For example, here we have a monochromatic scheme based on hsl(200, 6, 31), where the Lightness value is altered by ~8% in each step. The first row displays the raw HSL colors, while the second row presents a set of color-corrected variations:

For obvious examples of color scaling issues, try , or .

Note: HSV is similar to HSL, with the same limitations, and only a slight twist in how in how it represents color values.

HEX color codes, a staple in web and graphic design, are just a hexadecimal representation of RGB values.

The hexidecimal comprises of three pairs of two characters, with each pair representing the value of the Red, Green, and Blue channels in hexadecimal format, ranging from 00 to FF (equivalent to 0 to 255).

While these color formats are essential for digital design, their invention was never intended for color matching or design. Emerging color models and more advanced systems like LAB and HCL, which we'll cover soon, offer more nuanced approaches, capturing the full spectrum of human vision and ensuring better color consistency.