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: "Custom color scales"
description: "We learn how to create our own custom color scales and specify their color space."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/q0whucmvzh
codeFolder: course/module_05/lesson_05.06/protected/code/06-data-visualization-basics/end/scales
---

### Custom color scales

Sometimes the built-in color scales don't cut it. Maybe you have specific colors that you want to work in, or you are going for a particular tone with your chart. No worries! We can make our own scales easily using [**d3-interpolate**](https://github.com/d3/d3-interpolate).

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

Let's say that we wanted to represent temperature values with a color, ranging from "cyan" to "red". There are several methods that we could use to interpolate between those two colors, including `d3.interpolateRgb()` and `d3.interpolateHsl()`.

Let's make our own scale, running from "cyan" to "tomato" — all we need to do is pass our starting and ending color as separate parameters to `d3.interpolateHcl()`.

A>We'll talk about the difference between the different color spaces (**rgb**, **hsl**, **hcl**) in the next section.

```javascript
d3.interpolateRgb("cyan", "tomato")
```

That will give us this scale:

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

Our code has been started off with a few different custom scales.

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

If we open up the `draw-scales.js` file, we can test our own custom scales at the bottom. In the `index.html` file, we are importing other JavaScript files that list the built-in scale types and define a `drawColorRange()` function that creates an `<svg>` element with a `linear-gradient`.

We learn how to create our own custom color scales and specify their color space.