| 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.
| 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> |
