Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Viridis Color Palette Generator

Viridis Color Palette Generator

A simple tool for extracting discrete color palette values from the viridis collection of color palettes.

<!DOCTYPE html>
<title>Viridis Palette Generator</title>
<link rel="stylesheet" href="" />
body {
max-width: 800px;
margin: 0 auto;
p {
font-height: 1rem;
line-height: 1.3rem;
input {
width: 50px;
#preview {
width: 270px;
height: 10px;
margin-top: 10px;
#levels {
margin-top: 20px;
div.level {
width: 100%;
height: 75px;
display: block;
margin-bottom: 1rem;
div.level div {
display: inline-block;
div.block {
height: 100%;
width: 75px;
<body style="font-family: sans-serif;">
<h1>Viridis Color Palette Generator</h1>
The <a href="">matplotlib colormaps</a> introduced in 2015 are widely popular, with implementations of the palettes in <a href="">R</a>, <a href="">D3js</a>, and others. Popular for good reason, the palettes are colorblind-friendly, retain representational clarity in greyscale, and are generally aesthetically pleasing.
This tool provides a convenience wrapper around D3js's viridis implementation for use in data visualization tools with manual color value specification (e.g., Microsoft Excel, ArcGIS, and Tableau to name a few). To begin, select the number of categories and the color palette you'd like to use.
<label for="groups">Categories: </label>
<input type="number" id="groups" value="5" min="2" max="256">
<label for="palette">Palette: </label>
<select name="palette" id="palette">
<option value="v">viridis</option>
<option value="i">inferno</option>
<option value="m">magma</option>
<option value="p">plasma</option>
<!-- <button id="generate">Generate</button> -->
<div id="preview"></div>
<div id="levels"></div>
<script src=""></script>
<script>'input').on('change', function() {
});'input').on('keyup', function() {
});'select').on('change', function() {
function generatePalette() {
var n = parseInt("#groups").property("value"));
if (n > 256) {
n = 256;"#groups").property("value", 256);
var p ="#palette").property("value");
// Interpolation Scale Proxy
var paletteProxy = function(_l) {
switch (p) {
case "v":
return d3.interpolateViridis(_l);
case "i":
return d3.interpolateInferno(_l);
case "m":
return d3.interpolateMagma(_l);
case "p":
return d3.interpolatePlasma(_l);
// Update the preview
var gradient = "linear-gradient(to right, " +
paletteProxy(1.0) + ", " +
paletteProxy(0.5) + ", " +
paletteProxy(0.0) + "" +
")";"#preview").style("background", gradient);"#preview").style("background", gradient);
// Update the value-levels
var data = [];
d3.range(0, 1 + 1/(n - 1), 1/(n - 1))
.slice(0, n)
.map(function(l) {
var r, g, b, hex;
hex = paletteProxy(l);
r = parseInt(hex.slice(1, 3), 16);
g = parseInt(hex.slice(3, 5), 16);
b = parseInt(hex.slice(5, 7), 16);
var obj = {
"background": hex,
"rgb": [r, g, b]
.classed("level", true)
.classed("block", true)
.style("background-color", function(d) {return d.background;})
.select(function() {return this.parentNode})
var rgb = "rgb(" + d.rgb.join(", ") + ")";
var hex = d.background;
return rgb + "<br><br>" + hex}
.style("position", "absolute")
.style("padding-top", "1rem")
.style("padding-left", "1rem");
<script type="text/javascript">

This comment has been minimized.

Copy link

@jjmcsorley jjmcsorley commented Jul 28, 2019

Thanks for sharing this!


This comment has been minimized.

Copy link

@jacobtfisher jacobtfisher commented Jul 11, 2020

Thanks for sharing! Super useful.


This comment has been minimized.

Copy link

@hauselin hauselin commented Aug 16, 2020

Very useful! Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment