Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Color spaces"
description: "We learn about three color spaces (rgb, hsl, and hcl) and the pros and cons of each."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/qir7up7p2y
---

# 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`.

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