This video is available to students only

Color spaces

We learn about three color spaces (rgb, hsl, and hcl) and the pros and cons of each.

Creating our own colors#

Colors can be represented in various formats, each with different strengths. But creating our own colors requires care and the color space we use affects how well our chart can be interpreted.

Below, we're going to look at three color spaces:

  • rgb

  • hsl and

  • hcl

While rgb is generally the most familiar, there are good reasons to use hcl when we're programmatically creating color scales. Read on to find out why.

keywords#

In our chart code, we've used a lot of keywords which map to specific, solid colors. For example, we made our histogram bars cornflowerblue. Color keywords are great because they are easy to remember and mirror the way we refer to colors in natural language.

currentColor

Most color keywords are ways we would describe a color in English, but there is one handy special case: currentColor. currentColor will set the CSS property to the current color property. This is great for controlling one-color charts from outside a charting component. For example, we could make a line chart component whose stroke is currentColor. This way, we could easily create multiple line charts with different line colors, just by setting the color higher up in the DOM.

transparent

Another useful color keyword is transparent. This is great when creating invisible SVG elements that still capture mouse events, such as the listening rect we used to capture mouse movement in Module 5.

When creating data visualizations, we'll often need to manipulate colors. In this case, we can't use the color keywords because there is no way to make cornflowerblue 10% darker. In order to manipulate our colors, we'll need to learn about color spaces.

rgb#

The color space you're most likely to come across when developing for the web is rgb. rgb colors are composed of three values:

r: red

g: green

b: blue

For each of these values, a higher number uses more of the specified color. Then these values are combined to create one color.

This is essentially how LCD screens work: each pixel is made up of a red, green, and blue light. The values are combined in an additive fashion, starting at black and moving towards white with higher values. This may be counter-intuitive to anyone who's used paint on paper, where more paint = a darker color. For example, rgb(0,0,0) represents black and rgb(255,255,255) represents white.

There is another optional value for all of the color spaces we'll talk about:

a: alpha

The alpha value sets the opacity of the color — a color with an alpha value of 0 will be transparent. If the alpha value isn't specified, the color will be fully opaque.

rgb can be expressed in two formats. The first, functional notation, starts with rgb and lists each color value, in order, within parentheses. Each value will be within a range from 0 to 255. If we wanted to specify an alpha value, we would switch the prefix to rgba.

 

This page is a preview of Fullstack D3 Masterclass

No discussions yet