| 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)
| 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; | |
| } | |
| .color { | |
| float: left; | |
| padding: 3px 5px; | |
| margin: 2px 5px; | |
| font-family: Helvetica; | |
| border-radius: 3px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| function contrast(a, b){ | |
| var sorted = [luminance(a), luminance(b)].sort(); | |
| var dark = sorted[0], light = sorted[1]; | |
| return (light + 0.05) / (dark + 0.05); | |
| } | |
| function luminance(color){ | |
| var rgb = d3.rgb(color); | |
| var r = rgb.r/255; | |
| var g = rgb.g/255; | |
| var b = rgb.b/255; | |
| var R = (r <= 0.03928) ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4); | |
| var G = (g <= 0.03928) ? g/12.92 : Math.pow((g+0.055)/1.055, 2.4); | |
| var B = (b <= 0.03928) ? b/12.92 : Math.pow((b+0.055)/1.055, 2.4); | |
| var L = 0.2126 * R + 0.7152 * G + 0.0722 * B; | |
| return L; | |
| } | |
| var display = d3.select("body"); | |
| d3.csv("colors.csv", function(err, colors) { | |
| var cdivs = display.selectAll("div.color") | |
| .data(colors) | |
| cdivs.enter() | |
| .append("div").classed("color", true); | |
| cdivs.text(function(d) { | |
| return d.color.toLowerCase() | |
| }) | |
| .style({ | |
| "background-color": function(d) { return d.color }, | |
| color: function(d) { | |
| var bgColor = d.color; | |
| var contrastBlack = contrast("black", bgColor); | |
| var contrastWhite = contrast("white", bgColor); | |
| if(contrastBlack > contrastWhite) { | |
| return "black" | |
| } else { | |
| return "white" | |
| } | |
| } | |
| }) | |
| }) | |
| </script> | |
| </body> |