DEV Community

Cover image for CMYK and RGB? HSV and HSL? Introducing the Chromatic Compendium!
Raheem
Raheem

Posted on

7

CMYK and RGB? HSV and HSL? Introducing the Chromatic Compendium!

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

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 - Hue, Saturation, Lightness
HSV - Hue, Saturation, Value

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

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

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!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay