Advanced Color Theory
Go Beyond the Color Wheel:
CIELAB and Advanced Color Models
Coming Soon
Monochromatic Color Schemes:
Tips, Examples, and Applications
Coming Soon
Making Colors "Pop" with Chevreul’s
Law of Simultaneous Contrast
Coming Soon
How to mix colors and
create beautiful gradients
Coming Soon
Contrast and Accessibility
Utilizing WCAG to improve text readability and contrast
Coming Soon
Creating accessible designs for people with color vision deficiencies
Coming Soon
How popular is Dark Mode, and
is it actually useful?
Coming Soon
Color for Brand, Web and UI Design
Creating effective color palettes
for UI/UX design
Coming Soon
Color in typography and text hierarchy
Coming Soon
Color Theory for Data Visualization Design
Coming Soon
Easy to Replicate Techniques
for Visual Appeal
Coming Soon
Biology, Psychology and Emotion
The impact of color on user
experience and behavior
Coming Soon
Understanding color trends
and how they affect design
Coming Soon
How biology and evolution
influence our perception of color
Coming Soon
Meanings of Color
Across Different Cultures
Coming Soon
Debates and Opinions
Why Perfect Color Matching
Just Isn't Possible
Coming Soon
Are black and white colors, and
should they be used in design?
Coming Soon
Global color survey: insights and trends
Coming Soon

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


These color formats are fundamental for digital design, but they were never intended for color matching.

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: Made for the Screen

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.
rgb(153,204,0)
153
204
0
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: The Print Counterpart

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.
cmyk(25,0,100,20)
25
0
100
20
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: User-Friendly but Barely

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.
hsl(75deg 100% 40%)
75
100
40
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.

What about HEX Codes?

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).
99CC00
99
=>
RED 153/255
CC
=>
GREEN 204/255
00
=>
BLUE 0/255

Conclusion: Limited for Design

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.
Table of Contents
Advanced Color Theory
Go Beyond the Color Wheel:
CIELAB and Advanced Color Models
Coming Soon
Monochromatic Color Schemes:
Tips, Examples, and Applications
Coming Soon
Making Colors "Pop" with Chevreul’s
Law of Simultaneous Contrast
Coming Soon
How to mix colors and
create beautiful gradients
Coming Soon
Contrast and Accessibility
Utilizing WCAG to improve text readability and contrast
Coming Soon
Creating accessible designs for people with color vision deficiencies
Coming Soon
How popular is Dark Mode, and
is it actually useful?
Coming Soon
Color for Brand, Web and UI Design
Creating effective color palettes
for UI/UX design
Coming Soon
Color in typography and text hierarchy
Coming Soon
Color Theory for Data Visualization Design
Coming Soon
Easy to Replicate Techniques
for Visual Appeal
Coming Soon
Biology, Psychology and Emotion
The impact of color on user
experience and behavior
Coming Soon
Understanding color trends
and how they affect design
Coming Soon
How biology and evolution
influence our perception of color
Coming Soon
Meanings of Color
Across Different Cultures
Coming Soon
Debates and Opinions
Why Perfect Color Matching
Just Isn't Possible
Coming Soon
Are black and white colors, and
should they be used in design?
Coming Soon
Global color survey: insights and trends
Coming Soon