All Named CSS Colors

all-named-css-colors.markdown

All Named CSS Colors

Shows all named CSS colors, with a few special features. Covered in complete detail on my site

• color keywords are drawn from a JSON array, which may be useful
• script demonstrates looping through a JSON array, determining luminosity and contrast, and generating elements with insertAdjacentHTML
• alternative English spellings of colors are included, together with rebeccapurple and transparent. (Note that transparent is not technically a named color, and its alpha hex value - #00000000 - is not yet supported in most browsers (browsers currently map transparent to rgba(0,0,0,0), but the hex value has been used for consistency).
• demonstrates even distribution of last-children in a flexbox layout using media queries

A Pen by Dudley Storey on CodePen.

License.

index.html

<div id="colorlist"></div>

script.js

var cssColors = {  
  "aliceblue": "#f0f8ff",
  "antiquewhite": "#faebd7",
  "aqua": "#00ffff",
  "aquamarine": "#7fffd4",
  "azure": "#f0ffff",
  "beige": "#f5f5dc",
  "bisque": "#ffe4c4",
  "black": "#000000",
  "blanchedalmond": "#ffebcd",
  "blue": "#0000ff",
  "blueviolet": "#8a2be2",
  "brown": "#a52a2a",
  "burlywood": "#deb887",
  "cadetblue": "#5f9ea0",
  "chartreuse": "#7fff00",
  "chocolate": "#d2691e",
  "coral": "#ff7f50",
  "cornflowerblue": "#6495ed",
  "cornsilk": "#fff8dc",
  "crimson": "#dc143c",
  "cyan": "#00ffff",
  "darkblue": "#00008b",
  "darkcyan": "#008b8b",
  "darkgoldenrod": "#b8860b",
  "darkgray": "#a9a9a9",
  "darkgreen": "#006400",
  "darkgrey": "#a9a9a9",
  "darkkhaki": "#bdb76b",
  "darkmagenta": "#8b008b",
  "darkolivegreen": "#556b2f",
  "darkorange": "#ff8c00",
  "darkorchid": "#9932cc",
  "darkred": "#8b0000",
  "darksalmon": "#e9967a",
  "darkseagreen": "#8fbc8f",
  "darkslateblue": "#483d8b",
  "darkslategray": "#2f4f4f",
  "darkslategrey": "#2f4f4f",
  "darkturquoise": "#00ced1",
  "darkviolet": "#9400d3",
  "deeppink": "#ff1493",
  "deepskyblue": "#00bfff",
  "dimgray": "#696969",
  "dimgrey": "#696969",
  "dodgerblue": "#1e90ff",
  "firebrick": "#b22222",
  "floralwhite": "#fffaf0",
  "forestgreen": "#228b22",
  "fuchsia": "#ff00ff",
  "gainsboro": "#dcdcdc",
  "ghostwhite": "#f8f8ff",
  "gold": "#ffd700",
  "goldenrod": "#daa520",
  "gray": "#808080",
  "green": "#008000",
  "greenyellow": "#adff2f",
  "grey": "#808080",
  "honeydew": "#f0fff0",
  "hotpink": "#ff69b4",
  "indianred": "#cd5c5c",
  "indigo": "#4b0082",
  "ivory": "#fffff0",
  "khaki": "#f0e68c",
  "lavender": "#e6e6fa",
  "lavenderblush": "#fff0f5",
  "lawngreen": "#7cfc00",
  "lemonchiffon": "#fffacd",
  "lightblue": "#add8e6",
  "lightcoral": "#f08080",
  "lightcyan": "#e0ffff",
  "lightgoldenrodyellow": "#fafad2",
  "lightgray": "#d3d3d3",
  "lightgreen": "#90ee90",
  "lightgrey": "#d3d3d3",
  "lightpink": "#ffb6c1",
  "lightsalmon": "#ffa07a",
  "lightseagreen": "#20b2aa",
  "lightskyblue": "#87cefa",
  "lightslategray": "#778899",
  "lightslategrey": "#778899",
  "lightsteelblue": "#b0c4de",
  "lightyellow": "#ffffe0",
  "lime": "#00ff00",
  "limegreen": "#32cd32",
  "linen": "#faf0e6",
  "magenta": "#ff00ff",
  "maroon": "#800000",
  "mediumaquamarine": "#66cdaa",
  "mediumblue": "#0000cd",
  "mediumorchid": "#ba55d3",
  "mediumpurple": "#9370db",
  "mediumseagreen": "#3cb371",
  "mediumslateblue": "#7b68ee",
  "mediumspringgreen": "#00fa9a",
  "mediumturquoise": "#48d1cc",
  "mediumvioletred": "#c71585",
  "midnightblue": "#191970",
  "mintcream": "#f5fffa",
  "mistyrose": "#ffe4e1",
  "moccasin": "#ffe4b5",
  "navajowhite": "#ffdead",
  "navy": "#000080",
  "oldlace": "#fdf5e6",
  "olive": "#808000",
  "olivedrab": "#6b8e23",
  "orange": "#ffa500",
  "orangered": "#ff4500",
  "orchid": "#da70d6",
  "palegoldenrod": "#eee8aa",
  "palegreen": "#98fb98",
  "paleturquoise": "#afeeee",
  "palevioletred": "#db7093",
  "papayawhip": "#ffefd5",
  "peachpuff": "#ffdab9",
  "peru": "#cd853f",
  "pink": "#ffc0cb",
  "plum": "#dda0dd",
  "powderblue": "#b0e0e6",
  "purple": "#800080",
  "rebeccapurple": "#663399",
  "red": "#ff0000",
  "rosybrown": "#bc8f8f",
  "royalblue": "#4169e1",
  "saddlebrown": "#8b4513",
  "salmon": "#fa8072",
  "sandybrown": "#f4a460",
  "seagreen": "#2e8b57",
  "seashell": "#fff5ee",
  "sienna": "#a0522d",
  "silver": "#c0c0c0",
  "skyblue": "#87ceeb",
  "slateblue": "#6a5acd",
  "slategray": "#708090",
  "slategrey": "#708090",
  "snow": "#fffafa",
  "springgreen": "#00ff7f",
  "steelblue": "#4682b4",
  "tan": "#d2b48c",
  "teal": "#008080",
  "thistle": "#d8bfd8",
  "tomato": "#ff6347",
  "transparent": "#00000000",
  "turquoise": "#40e0d0",
  "violet": "#ee82ee",
  "wheat": "#f5deb3",
  "white": "#ffffff",
  "whitesmoke": "#f5f5f5",
  "yellow": "#ffff00",
  "yellowgreen": "#9acd32"
}

function convertAndContrast(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	if (result !== null) {
		var r = parseInt(result[1], 16),
		g = parseInt(result[2], 16),
		b = parseInt(result[3], 16);
    
		luminosity = 
			0.2126 * Math.pow((r/255),gamma) + 
			0.7152 * Math.pow((g/255),gamma) + 
			0.0722 * Math.pow((b/255), gamma);
		return luminosity;
	}
}

var colorlist = document.getElementById("colorlist");

for (var key in cssColors) {
  if (cssColors.hasOwnProperty(key)) {
   var colorName = key,
   colorHex = cssColors[key],
   gamma = 2.2,
   contrastRatio = "",
   luminosity = convertAndContrast(colorHex);
   if (luminosity < 0.3) { contrastRatio = ";color:#fff"; }
   colorlist.insertAdjacentHTML("beforeend", "<div style=background-color:"+colorName + contrastRatio + ">"+colorName+"<span>"+colorHex+"</span></div>");
  }
}

style.scss

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
* {
  box-sizing: border-box; 
}
body { 
  margin: 0;
  font-family: Raleway;
  font-size: 1.3rem;
  line-height: 1.7;
}
#colorlist {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-end;
}
#colorlist div { 
  padding: 3rem 1rem;
  text-align: center;
  flex: 0 0 10%;
}
#colorlist div span {
  display: block;
  font-family: Inconsolata;
  font-size: 1.2rem;
}
@media all and (max-width: 2388px) {
	#colorlist div { 
    flex: 0 0 11.111111111%;
	}
}
@media all and (max-width: 2388px) {
	#colorlist div { 
		flex: 0 0 12.5%;
	}
	#colorlist div:nth-last-child(-n+5) {
		flex: 0 0 20%;
	}
}
@media all and (max-width: 1915px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 14.285714286%;
	}
	#colorlist div:nth-last-child(-n+2) {
		flex: 0 0 50%;
	}
}
@media all and (max-width: 1680px) {
	#colorlist div { 
		flex: 0 0 16.666666667%;
	}
	#colorlist div:nth-last-child(-n+5) {
		flex: 0 0 20%;
	}
}
@media all and (max-width: 1444px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 20%;
	}
	#colorlist div:nth-last-child(-n+4) {
		flex: 0 0 25%;
	}
}
@media all and (max-width: 1200px) {
	#colorlist div:nth-last-child(-n+4) {
		flex: 0 0 20%;
	}
}
@media all and (max-width: 1155px) {
	#colorlist div:nth-last-child(-n+2) {
		flex: 0 0 50%;
	}
}	
@media all and (max-width: 1100px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 25%;
	}
	#colorlist div:last-child { 
		flex: 0 0 100%;
	}
}
@media all and (max-width: 965px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 33.333333%;
	}
	#colorlist div:nth-last-child(-n+2) {
		flex: 0 0 50%;
	}
}
@media all and (max-width: 726px) {
	#colorlist div:nth-last-child(-n+3) { 
		flex: 0 0 33.333333%;
	}
}

@media all and (max-width: 700px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 50%;
	}
	#colorlist div:last-child {
		flex: 0 0 100%;
	}
}
@media all and (max-width: 490px) {
	#colorlist div, #colorlist div:nth-last-child(-n+5) { 
		flex: 0 0 100%;
	}
}