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 scales"
description: "Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/h86z0582ly
codeFolder: course/module_05/lesson_05.05/protected/code/06-data-visualization-basics/end/scales
---

# Colors

One of the hardest parts of creating charts is choosing colors. The wrong colors can make a chart unappealing, ineffective, and, worst of all, impossible to read. This section will give you a good framework for choosing colors, important facts about human perception, and simple tips.

# Color scales

When choosing a color scale, you first want to identify its purpose. Going back to what we know about data types, there are three basic use cases:

1.  Representing a category
2.  Representing a continuous metric
3.  Representing a diverging metric

<CodeSandboxEmbed
  src="//codesandbox.io/s/e27br?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/index.html"
  style={{width: '100%', height: '35em'}}
/>

Let's dive deeper into each of these.

### 1. Representing a category

The first two data types we talked about (**binary** and **nominal**) will be best represented with a categorical color scheme.

Since our metric values don't have a natural order, we don't want to use a color scheme that has a natural order (like white to black).

d3 has built-in color schemes in its [**d3-scale-chromatic**](https://github.com/d3/d3-scale-chromatic) library.

![color scales - categorical](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_05/lesson_05.05/public/images/7-data-visualization-design/scales-categorical.png)

These **categorical** color schemes have been carefully designed to have enough contrast between colors. Each of these schemes is an array of colors — for example, to use the first scale in this list, we would access each color at its index in `d3.schemeCategory10`.

A>For **categorical** color schemes, it's helpful for each color to have a different descriptive name. For example, there might be two colors that could be described as "blue", which can be confusing to talk about.

#### 2. Representing a continuous metric

Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3.