CMYK and RGB? HSV and HSL? Introducing the Chromatic Compendium!
Tags: webdev, tutorial, design, explainlikeimfive
Published: 2019-08-03 14:43:40

---
title: CMYK and RGB? HSV and HSL? Introducing the Chromatic Compendium!
published: true
description: Colour usage is a fundamental pillar in all design, and UI designers need to know the jargon that it comes with.
tags: webdev, tutorial, design, explainlikeimfive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gfl25s4shjxn8ciwqxem.jpeg
---

A tome lies on a lectern placed by the north wall in the forgotten cathedral. The little light coming through the window reveals dust particles suspended in the stale air, and the spiderwebs crisscrossing the narrow walls glitter in the predawn gloom. 

**WALK TOWARDS THE LECTERN (y/n)?** y

The dust makes you cough as you make your way through the webbed darkness towards the lectern. As you approach, the title of the tome becomes clear:

THE CHROMATIC COMPENDIUM.
fifth edition, Resel Grun Btel

The letters of the title are illuminated, and seem to glow in the moody room. You notice that there is no dust on the opus. You pause for a bit.

**OPEN THE TOME (y/n)?** n

You hesitate a little, and stare at the tomes prismatic title. for a moment, you think you hear something. Straining your ears, you can hear a slight tinkling, seemingly originating from the compendium. You take a deep breath...

**OPEN THE TOME (y/n)?** y

With both hands, you open the tome... Instantly, light fills the room, blinding you. Even with your shut, burning eyes, you keep striving to open it. The tinkling grows louder, and you start to feel sleepy.

Your hands lose their grip on the book, and you plummet towards the ground. You go right through the dirty tiled floor; and straight into total darkness.

-----

I really hope you had as much fun reading that introduction as I had writing it. I wanted to try something new, while also paying a small homage to the text based adventure games that for some are more immersive than the "4K HDR" stuff we have today.

Now it's time to give you what you came for.

## Colour models: RGB and CMYK.
Simply said, a colour model is a mathematical way of representing a colour. There are two types of colour models: additive and subtractive.

With light, for example a computer display, colours add to each other. 
This is why RGB is an additive colour model. The three primary colours (Red, Blue and Green) work are used to produce all 16 million+ different combinations, constructively. This means that all the primary colours work to make white.

With paper, on the other hand, the different colours remove from each other. The four primary colours (Cyan, Magenta, Yellow and BlacK) are used to produce 10 million possible colours (as each of the primary colours have 100 steps (or grades) ). It's called subtractive as all the colours work to make black.

As you probably noticed, RGB can display more colours than CMYK. That is why some of the colours in a digital photo can often appear faded or dull when printed. This meme illustrates it quite well:

 ![RGB vs CMYK](https://i.pinimg.com/originals/10/57/79/105779e4fac23dec0cda57ca1e3440ef.jpg)

But why exactly is RGB from 0 - 255? Well, as computers are binary, they work in bits and bytes (8 bits). Each colour value is represented with one byte as data to send to the display. One byte can represent 256 different values so 0 - 255 (including 0). So every complete RGB colour takes exactly 3 bytes of memory.


## Understanding hue: HSL and HSV

HSL - __H__ue, __S__aturation, __L__ightness
HSV - __H__ue, __S__aturation, __V__alue

These are alternative representations to RGB. It's a cylindrical model (as in a colour wheel), where all the different hues (pure colours, not tones or shades) are seamlessly blended together. Saturation, then, represents the diameter of our cylinder. It's how intense the hue is; it's "colourfulness". 

![Breakdown of HSV](https://thepracticaldev.s3.amazonaws.com/i/3tffy0gdkf1471xg6mhi.jpeg)

These two models differ in their final variable - Lightness/Value. While Lightness is how white a colour is, Value is how bright it is. This means that 100% Lightness would give pure white, no matter what the variables are, but 100% Value only gives pure white when combined with 0% Saturation. That is the primary difference between HSL and HSV, and it is shown visually below - HSL on the left, HSV on the right.

![HSL vs HSV](https://thepracticaldev.s3.amazonaws.com/i/jhyg1y7ht363lixctesk.png)

Why were they even developed in the first place? Well, while RGB works very well for computers, HSL/HSV are easier to work with for designers and are more natural for the human perception of colour.

## Summary

I hope you enjoyed this quick guide on digital colour representation models, and I want to hear your comments! That's it for now!