A quick recap of colour models for JavaScript programmers
RGB, HSL, HSV, HEX & converting between colour models
At this point there are probably thousands of articles on colour models. So why am I writing this post? In part to formulate my thoughts on the topic and confirm I have some understanding. The second reason, learning how to publish my first article!
RGB — Red, Green, Blue
RGB colour is represented using three channels: red, green and blue. Each channel has a depth of 8 bits (2⁸ = 256), with the depth of all channels being 24 bits. You will often see it represented as: rgb(x, x, x), with x being an integer between 0 to 255 (Percentages also work).
- Black: rgb(0, 0, 0)
- White: rgb(255, 255, 255)
- Red: rgb(255, 0, 0)
RGBA is the same philosophy as RBG but with a fourth channel called Alpha, enabling transparency. You will often see it represented as: rgba(x, x, x, z), with z being a float between 0.0 to 1.0.
- Red, visible: rgba(255, 0, 0, 1)
- Red, 50% visible: rgba(255, 0, 0, 0.5)
- Red, invisible: rgba(255, 0, 0, 0)
HSL — Hue, Saturation, Lightness
HSL colour is represented using three channels: hue, saturation and lightness (for some reason I always think of luminance). You will often see it represented as: hsl(x, y, y), with x being an integer between 0 to 360, and y being an integer percentage between 0% to 100%.
- Black: hsl(anything, anything%, 0%)
- White: hsl(anything, anything%, 100%)
- Red: hsl(0, 100%, 50%)
Fun fact: Microsoft Paint scales the Saturation and Luminance; y being an integer between 0 to 240.
HSLA is the same philosophy as HSL but with a fourth channel called Alpha, enabling transparency. You will often see it represented as: hsla(x, y, y, z), with z being a float between 0.0 to 1.0.
- Red, visible: hsla(0, 100%, 50%, 1)
- Red, 50% visible: hsla(0, 100%, 50%, 0.5)
- Red, invisible: hsla(0, 100%, 50%, 0)
HSV — Hue, Saturation, Value
HSV colour is represented using three channels: hue, saturation and value. You will often see it represented as: hsv(x, y, y), with x being an integer between 0 to 360, and y being an integer percentage between 0% to 100%. HSV also goes by the name HSB: hue, saturation and brightness.
- Black: hsv(anything, anything%, 0%)
- White: hsv(anything, 0%, 100%)
- Red: hsv(0, 100%, 100%)
HSVA is the same philosophy as HSV but with a fourth channel called Alpha, enabling transparency. You will often see it represented as: hsva(x, y, y, z), with z being a float between 0.0 to 1.0.
- Red, visible: hsva(0, 100%, 100%, 1)
- Red, 50% visible: hsva(0, 100%, 100%, 0.5)
- Red, invisible: hsva(0, 100%, 100%, 0)
HEX — #000000
HEX is essentially RGB, but with values converted to hexadecimal (with a hash symbol in front). As an example, 255 = binary 1111 1111 = #FF.
- Black: #000000
- White: #FFFFFF
- Red: #FF0000
HEXA is apparently thing, although I’ve never used it myself. Again, a fourth channel called Alpha is appended, enabling transparency.
Converting between colour models
At some point your will need to convert between colour models. Unfortunately for all involved, modifying hue is a common requirement for colour centric programs, with RGB being the preferred output notation. As an example, intuitive colour pickers are best implemented using HSV (can you spot the hue bar in the image below).
Most people call upon a pre-built library to do the math. For those with a fondness of vanilla JavaScript like myself, you will need to create your own (read: copy someone else). To summarise the conversions:
- RGB <–> HEX = Easy
- RGB <–> HSL = Difficult
- RGB <–> HSV = Difficult
- HSL <–> HSV = Slightly less difficult
There are a few notable conversion algorithms, but those from CSS-Tricks appear to be the simplest to understand. https://css-tricks.com/converting-color-spaces-in-javascript/
If you’re looking for an efficient algorithm have a look at this wikipedia artice: https://en.wikipedia.org/wiki/HSL_and_HSV#Color_conversion_formulae
Summary
You may notice an omission: CMYK. This color model relates to the printing process; less relevant for programmers but hugely important if you are designing for printed applications.
Although this article only briefly covers colour models, it will provide a good stepping point into future topics surrounding design and colour manipulation.
I intend to capture my exploration of elegant web design and vanilla JavaScript using these posts, with the hope these learnings can help others. It also appears to be my first step into casual journalism. Wish me luck!
For an in depth look at colour models CSS-Tricks has a great article here.
https://css-tricks.com/nerds-guide-color-web/
Resources
https://www.w3schools.com/html/html_colors_rgb.asp
https://www.w3schools.com/html/html_colors_hsl.asp
https://www.w3schools.com/html/html_colors_hex.asp
https://www.w3schools.com/colors/colors_cmyk.asp
https://css-tricks.com/nerds-guide-color-web/
https://css-tricks.com/8-digit-hex-codes/
https://css-tricks.com/converting-color-spaces-in-javascript/
https://en.wikipedia.org/wiki/HSL_and_HSV#Color_conversion_formulae
Images
https://commons.wikimedia.org/wiki/User:Datumizer
https://www.google.com/search?q=Colour%20picker
