Data Viz Hacks (Advanced): Creating Your Own Line Gradient

Introduction

Quadrigram has over 15 built-in color schemes. These range from Primary (12 colors), Secondary (6 colors), Monochrome, Sempahone, and Heat. You can find these color presets in the styles panel of your chart where it says “scale of colors” right above fill color of each item.

Color Presets

These default colors are quick and great way for making your visualizations really shine and stand out. But did you know you could create your own color schemes? The process is a bit tricky but if having the right “eye-candy” is important then this post just might be for you.

Step 1: Choosing Your Color

If there is a color scheme you would like to work with that is not listed in the color preset, then determining what color you want to use is the first step. Check out our post on color  for some great resources when choosing your color.

For this exercise, I want to create a line gradient in Lime. I’m going to head over to Adobe Color CC for reference. The monochrome default works for creating the line gradient for this exercise.

Color Lime

You can play around to see which one works best. The great thing about it is that you can stylize it to whatever looks best for you. It doesn’t have to follow a specific rule or pattern.

Color Lime

Step 2: Open up a New Document in Excel Spreadsheet

Because we are going to be manually adding these codes to a spreadsheet, we need to create open up a new document in excel. Create a new document in excel or any other spreadsheet processor.

Excel

For creating a line gradient, you only need One Column with Two Rows.

In the first column on the first row type the following: id

This is the identifier which will help the editor identify the data in the spreadsheet.

In the first column of the second row you type in you’re the RGB values for the line gradient.

For example, the built-in color preset has the value in the second row as:

linear-gradient(90deg,rgba(26,35,126,1) 0%,rgba(84,36,148,1) 14%,rgba(142,36,170,1) 29%,rgba(199,59,126,1) 43%,rgba(254,149,68,1) 57%,rgba(253,216,53,1) 71%,rgba(252,233,152,1) 86%,rgba(250,250,250,1) 100%)

You can just copy and paste this code to your excel spreadsheet and manually change the RGB codes to your needs.

The R is Red Value, G is Green Value, B is Blue Value. The percentage is the gradient of the color which you can specify by changing the percentage values.

A means Alpha and is left at 1.

Step 3: Add RGB codes to Second Row

I have eight different degrees of intensity that I want for my line gradient specified by:

  1. 0%
  2. 14%
  3. 29%
  4. 43%
  5. 57%
  6. 71%
  7. 86%
  8. 100%

For my line gradient I want the darkest tone to be represented by 0% and the lightest tone of Lime to be represented by 100%. This is because color populates from left to right and want highest values to be shown with the strongest shades of lime.

I already have my color codes obtained from Adobe Color CC. So it should look something like this:

  1. 0%: rgba(102, 168, 15,1)
  2. 14%: rgba(130, 201, 30,1)
  3. 29%: rgba(148, 216, 45,1)
  4. 43%: rgba(169, 227, 75,1)
  5. 57%: rgba(192, 235, 117,1)
  6. 71%: rgba(216, 245, 162,1)
  7. 86%: rgba(233,250,200,1)
  8. 100%: rgba(244,252,277,1)

Now we have our values for the Color Line Gradient for Lime.  

Our document in excel spreadsheet should have:

The first column in the first row: id

The first column in the second row:

linear-gradient(90deg,rgba(102, 168, 15,1) 0%,rgba(130, 201, 30,1) 14%, rgba(148, 216, 45,1) 29%,rgba(169, 227, 75,1) 43%,rgba(192, 235, 117,1) 57%,rgba(216, 245, 162,1) 71%,rgba(233,250,200,1) 86%,rgba(244,252,277,1) 100%)

This may seem a little daunting and complicated but this is basically it. If you have this nailed, you can create any line-gradient or color combination you desire.

Data Visualization

The great thing about this technique is that you can continue adding as many line gradients as you want as long as they are in the first column. You can play around with different colors and see what color combination best matches your data story. Once you have it you can drag it from your data station to your chart.

Thanks for reading! We are always looking to improve so write to us on our community if you have any questions or let us know what you think with some feedback!

Leave a Reply