| license: mit |
I wanted a programmatically friendly list of the HTML named colors found here: https://en.wikipedia.org/wiki/Web_colors
Built with blockbuilder.org
forked from enjalot's block: HTML Color Names (Relative Lightness)
forked from enjalot's block: HTML Color Names (Relative Lightness)
forked from anonymous's block: HTML Color Names (Relative Lightness, linear color space)
| color | |
| Pink | |
| LightPink | |
| HotPink | |
| DeepPink | |
| PaleVioletRed | |
| MediumVioletRed | |
| LightSalmon | |
| Salmon | |
| DarkSalmon | |
| LightCoral | |
| IndianRed | |
| Crimson | |
| FireBrick | |
| DarkRed | |
| Red | |
| OrangeRed | |
| Tomato | |
| Coral | |
| DarkOrange | |
| Orange | |
| Yellow | |
| 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 | |
| RebeccaPurple | |
| SlateBlue | |
| MediumSlateBlue | |
| White | |
| Snow | |
| Honeydew | |
| MintCream | |
| Azure | |
| AliceBlue | |
| GhostWhite | |
| WhiteSmoke | |
| Seashell | |
| Beige | |
| OldLace | |
| FloralWhite | |
| Ivory | |
| AntiqueWhite | |
| Linen | |
| LavenderBlush | |
| MistyRose | |
| Gainsboro | |
| LightGrey | |
| Silver | |
| DarkGray | |
| Gray | |
| DimGray | |
| LightSlateGray | |
| SlateGray | |
| DarkSlateGray | |
| Black |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { | |
| margin:0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| padding: 10px; | |
| } | |
| section { | |
| clear: both; | |
| } | |
| .color { | |
| float: left; | |
| padding: 3px 5px; | |
| margin: 2px 5px; | |
| font-family: Helvetica; | |
| border-radius: 3px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <label>Threshold: <input type="range" min="0" max="1" value="0.5" step="0.01" oninput="redraw(this.value)"></label> | |
| <section></section> | |
| <script> | |
| function gammaToLinear(x) { | |
| x /= 255; | |
| if (x <= 0.03928) { | |
| return x / 12.92; | |
| } else { | |
| return ((x + 0.055) / 1.055)**2.4; | |
| } | |
| } | |
| function redraw(threshold) { | |
| console.log(threshold) | |
| cdivs.style({ | |
| "background-color": function(d) { return d.color }, | |
| color: function(d) { | |
| var rgb = d3.rgb(d.color); | |
| var L2 = 0.2126 * gammaToLinear(rgb.r) + 0.7152 * gammaToLinear(rgb.g) + 0.0722 * gammaToLinear(rgb.b) | |
| if(L2 >= threshold) { | |
| return "black" | |
| } else { | |
| return "white" | |
| } | |
| } | |
| }) | |
| } | |
| var display = d3.select("section"); | |
| var cdivs; | |
| d3.csv("colors.csv", function(err, colors) { | |
| cdivs = display.selectAll("div.color") | |
| .data(colors) | |
| cdivs.enter() | |
| .append("div").classed("color", true); | |
| cdivs.text(function(d) { | |
| return d.color.toLowerCase() | |
| }); | |
| redraw(0.5); | |
| }) | |
| </script> | |
| </body> |