Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active January 13, 2022 23:00
Embed
What would you like to do?
SVG named colours grouped.
license: mit

This is an example of the range of available named colours that can be used in d3.js. In this example I have used colour groupings that keep similar colours together. These are not quite all the available colours, but there's only a few missing.

Advice can be found on-line that not all browsers will render them correctly. I have tested with Chrome and Firefox and found them suitably visible.

These are used as references and described in the book D3 Tips and Tricks.

We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
colour
Pink
LightPink
HotPink
DeepPink
PaleVioletRed
MediumVioletRed
LightSalmon
Salmon
DarkSalmon
LightCoral
IndianRed
Crimson
FireBrick
DarkRed
Red
OrangeRed
Tomato
Coral
DarkOrange
Orange
Yellow
LightYellow
LemonChiffon
LightGoldenrodYellow
PapayaWhip
Moccasin
PeachPuff
PaleGoldenrod
Khaki
DarkKhaki
Gold
Cornsilk
BlanchedAlmond
Bisque
NavajoWhite
Wheat
BurlyWood
Tan
RosyBrown
SandyBrown
Goldenrod
DarkGoldenrod
Peru
Chocolate
SaddleBrown
Sienna
Brown
Maroon
DarkOliveGreen
Olive
OliveDrab
YellowGreen
LimeGreen
Lime
LawnGreen
Chartreuse
GreenYellow
SpringGreen
MediumSpringGreen
LightGreen
PaleGreen
DarkSeaGreen
MediumSeaGreen
SeaGreen
ForestGreen
Green
DarkGreen
MediumAquamarine
Aqua
Cyan
LightCyan
PaleTurquoise
Aquamarine
Turquoise
MediumTurquoise
DarkTurquoise
LightSeaGreen
CadetBlue
DarkCyan
Teal
LightSteelBlue
PowderBlue
LightBlue
SkyBlue
LightSkyBlue
DeepSkyBlue
DodgerBlue
CornflowerBlue
SteelBlue
RoyalBlue
Blue
MediumBlue
DarkBlue
Navy
MidnightBlue
Lavender
Thistle
Plum
Violet
Orchid
Fuchsia
Magenta
MediumOrchid
MediumPurple
BlueViolet
DarkViolet
DarkOrchid
DarkMagenta
Purple
Indigo
DarkSlateBlue
SlateBlue
MediumSlateBlue
White
Snow
Honeydew
MintCream
Azure
AliceBlue
GhostWhite
WhiteSmoke
Seashell
Beige
OldLace
FloralWhite
Ivory
AntiqueWhite
Linen
LavenderBlush
MistyRose
Gainsboro
LightGray
Silver
DarkGray
Gray
DimGray
LightSlateGray
SlateGray
DarkSlateGray
Black
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colours Page</title>
<style>
.bs-sidebar .nav > .active > ul {
display: block;
margin-bottom: 8px;
}
text.shadow {
stroke: white;
stroke-width: 2.3px;
opacity: 0.5;
}
</style>
</head>
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var width = 174;
var height = 32;
var border = 10;
var container = d3.select("body");
d3.csv("colours2.csv", function(error, data) {
// **************** Individual colours *********************
data.forEach(function(d) {
// create the SVG area for the rectangle
svgArea = container.append("svg")
.attr("width", width + (2*border))
.attr("height", height + (2*border));
// Add in the rectangle
svgArea.append("rect")
.attr("transform", "translate("+border+","+border+")")
.attr("height", height)
.attr("width", width)
.style("fill", d.colour)
.attr("rx", 5)
.attr("ry", 5);
// Add in the white background for the label
svgArea.append("text")
.attr("transform",
"translate("+(border+(width/2))+","+(border+10)+")")
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.style("fill", "black")
.style("font-weight", "bold")
.attr("class", "shadow")
.text(d.colour);
// Add in the label
svgArea.append("text")
.attr("transform",
"translate("+(border+(width/2))+","+(border+10)+")")
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.style("fill", "black")
.style("font-weight", "bold")
.text(d.colour);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment