cccolor
HEX, RGB & HSL color picker

Using color on the web, whether this is via CSS, HTML or JavaScript, is done using a color code notation like RGB, HSL or HEX. These notations are simply 3 different ways to specify a color, and any of these 3 doesn't give you access to any additional colors. In total, these notations give access to 16,777,216 colors.

RGB

TL;DR → The RGB color notation represents each color channel (red, green and blue) with a value between 0 and 255. The notation looks like this: rgb(44, 233, 77) and opacity can also be specified using RGBA: rgba(44, 233, 77, .25).

The RGB color notation (short for red, green and blue) is really the basis for color on the web currently. Additional notations like HEX and HSL are just different ways of specifying colors in the sRGB color space.

You're likely already familiar with how to specify a color using the RGB color notation, but you may be less familiar with additional syntax for it that has been introduced mainly with the CSS color module level 4. For example, it's now possible to specify the alpha value without using RGBA: rgb(88, 17, 213, .15) and we can also use a notation that omits the commas: rgb(255 186 140) and with that comma-less notation the alpha value can also be passed-in like this: rgb(255 186 140 / .33). These different notations can become especially handy when composing colors using CSS variables.

⟡⟡⟡

HEX

TL;DR → The HEX color notation is a shorthand for RGB and is coded as #RRGGBB, where each color channel is represented with two hexadecimal digits from 0 to F: 00 for 0 and FF for 255. The letters can be capitalized or not, it makes no difference.

The HEX color notation (short for hexadecimal) has perhaps been the most popular way to represent colors on the web and in design tools over the years. It's simply a concise way to represent a RGB notation. The first 2 hexadecimal digits represent the red value, the middle 2 represent the green value and the last two represent the blue value.

For the vast majority of us, it's really difficult to think in a hexadecimal manner (16 digits, from 0 to 9 and from A to F), so when working with HEX color codes most people use tools like color pickers to visually select a color and get its HEX color code value. Still, over time, many designers come to remember certain HEX color value, especially those that are in the grayscale spectrum. Good examples of such grayscale values would be #808080, #4D4D4D and #FAFAFA.

I believe that one of the reasons why HEX has been a popular way to represent colors is due to how short/compact the notation is. Otherwise though, it's most often very difficult to just look at a HEX color code and have a good idea of what color it represents.

HEX shorthand: when both values for each color channel (red, green and blue) are the same, the HEX color code notation can be shortened to just 3 hexadecimal digits. For example, the #88AA33 color can be represented as just #8A3. It's common to use colors like #333, #FFF, #000, which make for a short way to represent grayscale color values.

HEX-8 (#RRGGBBAA): An additional optional set of two hexadecimal digits was introduced for HEX color codes. This extra set of digits represents the alpha value for the color (its level of transparency). For example, #61FAFF7F represents a light blue at 50% opacity. Refer to this CSS Tricks article for more details about the #RRGGBBAA color notation.

⟡⟡⟡

HSL

TL;DR → The HSL color notation (short for Hue, Saturation and Lightness) is a more human-friendly way of specifying colors on the web. The notation looks like this: hsl(325, 100%, 72%), where the Hue is a value between 0 and 360, and the saturation and lightness are values between 0% and 100%. An alpha transparency value can also be provided like this: hsla(325, 100%, 72%, .5)

The HSL color notation (Hue, Saturation and Lightness), is rapidly gaining popularity because it's a color notation that was created with humans in mind and it's much easier to tweak HSL color values and have a good idea what impact it will have on the resulting color.

The Hue represents the base color itself and is a value between 0 and 360 and represents the rotation degree on the hue wheel. On the hue wheel, 0° is red and 360° is red again. Here's a simple hue wheel that illustrates:

The Hue value is perhaps the only value in the HSL color notation that's a bit more difficult to guess, unless you've been working with hue value for a while and have a good mental model of where certain hues are on the wheel.

The 2nd value in the HSL color notation, the Saturation, is the amount of gray in a given color. A saturation value of 0% will result in a completely grayscale color, and a saturation value of 100% will result in a very vibrant color without any gray.

The final value in HSL, the Lightness, is for the amount of white in a color. 0% lightness will always be black and 100% lightness will always be white, no matter the other values. 50% lightness is the base color without any white or black mixed-in.

Just like with the RGB color notation, the CSS Color Module Level 4 introduces a few more syntax options for HSL, like specifying the alpha value without the need for hsla, as in hsl(85, 100%, 85%, .33) or the notation without commas: hsl(85 100% 85%) and hsl(85 100% 85% / .33).

⟡⟡⟡

Looking ahead: LCH, LAB & relative color syntax

Some very neat additions to colors in CSS are coming soon, thanks CSS Color Level 4. Among them are the LCH and LAB color values as well as the relative color syntax.

The LCH and LAB color spaces are new color spaces that will allow us to access colors that are not in the sRGB color space. Modern screens often have the ability to display a much wider range of colors than what's available with sRGB, and both LCH and LAB will allow to access those colors and make our content on the web that much more colorful! 🎨

LCH and LAB also are perceptually uniform, which helps with a problem that can happen with HSL where certain hues appear much lighter or darker to the human eye, and therefore a HSL color value of the same lightness value can appear much different to the eye in terms of lightness. These new color spaces where made especially to be easy for humans to grasp and play with.

The relative color syntax will allow us to transform one color value notation into another, making it seamless to use a HEX color value as part of a HSL notation, for example. This will come in very handy when using CSS variables.

All in all, this is a rather large topic that I won't be able to discuss in depth here, but if you're curious I suggest you read this article by Chris Coyier as well as this article by Lea Verou for a very good overview of what's to come and what will soon be possible with colors in CSS.