Skip to content

Instantly share code, notes, and snippets.

@raphaelschaad

raphaelschaad/colors.html

Last active March 30, 2016 19:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raphaelschaad/3c7fbe3cb71cc6d9d3bd to your computer and use it in GitHub Desktop.
Save raphaelschaad/3c7fbe3cb71cc6d9d3bd to your computer and use it in GitHub Desktop.
Download ZIP
140 standard CSS color names, by color groups: http://www.w3schools.com/colors/colors_groups.asp
Raw
colors.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Colors</title>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>
<script>
"use strict";
var labelSize = 6;
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
textSize(labelSize);
textStyle(BOLD);
noLoop();
}
function draw() {
background("white");
var margin = 8;
var w = 60;
var h = 50;
var y = margin + labelSize;
for (var colorGroup in colorGroups) {
fill("black");
text(colorGroup.toUpperCase(), margin, y - 2);
var colors = colorGroups[colorGroup];
var x = margin;
for (var i = 0; i < colors.length; i++) {
var color = colors[i];
fill(color);
rect(x, y, w, h);
fill("black");
text(color, x, y + h + labelSize);
x += w + margin;
}
y += h + 3*margin;
}
text("«Die Farbe hat mich. Ich brauche nicht nach ihr zu haschen. Sie hat mich für immer, ich weiss das. Das ist der glücklichen Stunde Sinn: ich und die Farbe sind eins. Ich bin Maler.»\n—Paul Klee", margin, y);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
// http://www.w3schools.com/colors/colors_groups.asp minus RebeccaPurple
var colorGroups = {
"Pinks": ["Pink", "LightPink", "HotPink", "DeepPink", "PaleVioletRed", "MediumVioletRed"],
"Purples": ["Lavender", "Thistle", "Plum", "Orchid", "Violet", "Fuchsia", "Magenta", "MediumOrchid", "DarkOrchid", "DarkViolet", "BlueViolet", "DarkMagenta", "Purple", "MediumPurple", "MediumSlateBlue", "SlateBlue", "DarkSlateBlue", "Indigo"],
"Reds": ["LightSalmon", "Salmon", "DarkSalmon", "LightCoral", "IndianRed", "Crimson", "Red", "FireBrick", "DarkRed"],
"Oranges": ["Orange", "DarkOrange", "Coral", "Tomato", "OrangeRed"],
"Yellows": ["Gold", "Yellow", "LightYellow", "LemonChiffon", "LightGoldenRodYellow", "PapayaWhip", "Moccasin", "PeachPuff", "PaleGoldenRod", "Khaki", "DarkKhaki"],
"Greens": ["GreenYellow", "Chartreuse", "LawnGreen", "Lime", "LimeGreen", "PaleGreen", "LightGreen", "MediumSpringGreen", "SpringGreen", "MediumSeaGreen", "SeaGreen", "ForestGreen", "Green", "DarkGreen", "YellowGreen", "OliveDrab", "DarkOliveGreen", "MediumAquaMarine", "DarkSeaGreen", "LightSeaGreen", "DarkCyan", "Teal"],
"Cyans": ["Aqua", "Cyan", "LightCyan", "PaleTurquoise", "Aquamarine", "Turquoise", "MediumTurquoise", "DarkTurquoise"],
"Blue": ["CadetBlue", "SteelBlue", "LightSteelBlue", "LightBlue", "PowderBlue", "LightSkyBlue", "SkyBlue", "CornflowerBlue", "DeepSkyBlue", "DodgerBlue", "RoyalBlue", "Blue", "MediumBlue", "DarkBlue", "Navy", "MidnightBlue"],
"Browns": ["Cornsilk", "BlanchedAlmond", "Bisque", "NavajoWhite", "Wheat", "BurlyWood", "Tan", "RosyBrown", "SandyBrown", "GoldenRod", "DarkGoldenRod", "Peru", "Chocolate", "Olive", "SaddleBrown", "Sienna", "Brown", "Maroon"],
"Whites": ["White", "Snow", "HoneyDew", "MintCream", "Azure", "AliceBlue", "GhostWhite", "WhiteSmoke", "SeaShell", "Beige", "OldLace", "FloralWhite", "Ivory", "AntiqueWhite", "Linen", "LavenderBlush", "MistyRose"],
"Greys": ["Gainsboro", "LightGray", "Silver", "DarkGray", "DimGray", "Gray", "LightSlateGray", "SlateGray", "DarkSlateGray", "Black"]
};
</script>
</body>
</html>
Raw
xcolor-groups.json
{
"Pinks": ["Pink", "LightPink", "HotPink", "DeepPink", "PaleVioletRed", "MediumVioletRed"],
"Purples": ["Lavender", "Thistle", "Plum", "Orchid", "Violet", "Fuchsia", "Magenta", "MediumOrchid", "DarkOrchid", "DarkViolet", "BlueViolet", "DarkMagenta", "Purple", "MediumPurple", "MediumSlateBlue", "SlateBlue", "DarkSlateBlue", "RebeccaPurple", "Indigo"],
"Reds": ["LightSalmon", "Salmon", "DarkSalmon", "LightCoral", "IndianRed", "Crimson", "Red", "FireBrick", "DarkRed"],
"Oranges": ["Orange", "DarkOrange", "Coral", "Tomato", "OrangeRed"],
"Yellows": ["Gold", "Yellow", "LightYellow", "LemonChiffon", "LightGoldenRodYellow", "PapayaWhip", "Moccasin", "PeachPuff", "PaleGoldenRod", "Khaki", "DarkKhaki"],
"Greens": ["GreenYellow", "Chartreuse", "LawnGreen", "Lime", "LimeGreen", "PaleGreen", "LightGreen", "MediumSpringGreen", "SpringGreen", "MediumSeaGreen", "SeaGreen", "ForestGreen", "Green", "DarkGreen", "YellowGreen", "OliveDrab", "DarkOliveGreen", "MediumAquaMarine", "DarkSeaGreen", "LightSeaGreen", "DarkCyan", "Teal"],
"Cyans": ["Aqua", "Cyan", "LightCyan", "PaleTurquoise", "Aquamarine", "Turquoise", "MediumTurquoise", "DarkTurquoise"],
"Blue": ["CadetBlue", "SteelBlue", "LightSteelBlue", "LightBlue", "PowderBlue", "LightSkyBlue", "SkyBlue", "CornflowerBlue", "DeepSkyBlue", "DodgerBlue", "RoyalBlue", "Blue", "MediumBlue", "DarkBlue", "Navy", "MidnightBlue"],
"Browns": ["Cornsilk", "BlanchedAlmond", "Bisque", "NavajoWhite", "Wheat", "BurlyWood", "Tan", "RosyBrown", "SandyBrown", "GoldenRod", "DarkGoldenRod", "Peru", "Chocolate", "Olive", "SaddleBrown", "Sienna", "Brown", "Maroon"],
"Whites": ["White", "Snow", "HoneyDew", "MintCream", "Azure", "AliceBlue", "GhostWhite", "WhiteSmoke", "SeaShell", "Beige", "OldLace", "FloralWhite", "Ivory", "AntiqueWhite", "Linen", "LavenderBlush", "MistyRose"],
"Greys": ["Gainsboro", "LightGray", "Silver", "DarkGray", "DimGray", "Gray", "LightSlateGray", "SlateGray", "DarkSlateGray", "Black"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment