Last active
December 9, 2024 21:20
-
Star
(208)
You must be signed in to star a gist -
Fork
(44)
You must be signed in to fork a gist
-
-
Save bobspace/2712980 to your computer and use it in GitHub Desktop.
All of the CSS Color names in a big javascript object.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // CSS Color Names | |
| // Compiled by @bobspace. | |
| // | |
| // A javascript object containing all of the color names listed in the CSS Spec. | |
| // This used to be a big array, but the hex values are useful too, so now it's an object. | |
| // If you need the names as an array use Object.keys, but you already knew that! | |
| // | |
| // The full list can be found here: https://www.w3schools.com/cssref/css_colors.asp | |
| // Use it as you please, 'cuz you can't, like, own a color, man. | |
| const CSS_COLOR_NAMES = { | |
| 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', | |
| DarkGrey: '#A9A9A9', | |
| DarkGreen: '#006400', | |
| 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', | |
| Grey: '#808080', | |
| Green: '#008000', | |
| GreenYellow: '#ADFF2F', | |
| 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', | |
| LightGrey: '#D3D3D3', | |
| LightGreen: '#90EE90', | |
| 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', | |
| Turquoise: '#40E0D0', | |
| Violet: '#EE82EE', | |
| Wheat: '#F5DEB3', | |
| White: '#FFFFFF', | |
| WhiteSmoke: '#F5F5F5', | |
| Yellow: '#FFFF00', | |
| YellowGreen: '#9ACD32', | |
| }; |
Just what I needed, thank you @bobspace !!
jsut in case someone instrested into hexcodes:
f0f8ff,faebd7,00ffff,7fffd4,f0ffff,f5f5dc,ffe4c4,000000,ffebcd,0000ff,8a2be2,a52a2a,deb887,5f9ea0,7fff00,d2691e,ff7f50,6495ed,fff8dc,dc143c,00ffff,00008b,008b8b,b8860b,a9a9a9,006400,bdb76b,8b008b,556b2f,ff8c00,9932cc,8b0000,e9967a,8fbc8f,483d8b,2f4f4f,00ced1,9400d3,ff1493,00bfff,696969,1e90ff,d19275,b22222,fffaf0,228b22,ff00ff,dcdcdc,f8f8ff,ffd700,daa520,808080,008000,adff2f,f0fff0,ff69b4,cd5c5c,4b0082,fffff0,f0e68c,e6e6fa,fff0f5,7cfc00,fffacd,add8e6,f08080,e0ffff,fafad2,d3d3d3,90ee90,ffb6c1,ffa07a,20b2aa,87cefa,8470ff,778899,b0c4de,ffffe0,00ff00,32cd32,faf0e6,ff00ff,800000,66cdaa,0000cd,ba55d3,9370d8,3cb371,7b68ee,00fa9a,48d1cc,c71585,191970,f5fffa,ffe4e1,ffe4b5,ffdead,000080,fdf5e6,808000,6b8e23,ffa500,ff4500,da70d6,eee8aa,98fb98,afeeee,d87093,ffefd5,ffdab9,cd853f,ffc0cb,dda0dd,b0e0e6,800080,ff0000,bc8f8f,4169e1,8b4513,fa8072,f4a460,2e8b57,fff5ee,a0522d,c0c0c0,87ceeb,6a5acd,708090,fffafa,00ff7f,4682b4,d2b48c,008080,d8bfd8,ff6347,40e0d0,ee82ee,d02090,f5deb3,ffffff,f5f5f5,ffff00,9acd32
or Array with names and hex codes:
"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",
"darkkhaki" => "bdb76b",
"darkmagenta" => "8b008b",
"darkolivegreen" => "556b2f",
"darkorange" => "ff8c00",
"darkorchid" => "9932cc",
"darkred" => "8b0000",
"darksalmon" => "e9967a",
"darkseagreen" => "8fbc8f",
"darkslateblue" => "483d8b",
"darkslategray" => "2f4f4f",
"darkturquoise" => "00ced1",
"darkviolet" => "9400d3",
"deeppink" => "ff1493",
"deepskyblue" => "00bfff",
"dimgray" => "696969",
"dodgerblue" => "1e90ff",
"feldspar" => "d19275",
"firebrick" => "b22222",
"floralwhite" => "fffaf0",
"forestgreen" => "228b22",
"fuchsia" => "ff00ff",
"gainsboro" => "dcdcdc",
"ghostwhite" => "f8f8ff",
"gold" => "ffd700",
"goldenrod" => "daa520",
"gray" => "808080",
"green" => "008000",
"greenyellow" => "adff2f",
"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",
"lightgrey" => "d3d3d3",
"lightgreen" => "90ee90",
"lightpink" => "ffb6c1",
"lightsalmon" => "ffa07a",
"lightseagreen" => "20b2aa",
"lightskyblue" => "87cefa",
"lightslateblue" => "8470ff",
"lightslategray" => "778899",
"lightsteelblue" => "b0c4de",
"lightyellow" => "ffffe0",
"lime" => "00ff00",
"limegreen" => "32cd32",
"linen" => "faf0e6",
"magenta" => "ff00ff",
"maroon" => "800000",
"mediumaquamarine" => "66cdaa",
"mediumblue" => "0000cd",
"mediumorchid" => "ba55d3",
"mediumpurple" => "9370d8",
"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" => "d87093",
"papayawhip" => "ffefd5",
"peachpuff" => "ffdab9",
"peru" => "cd853f",
"pink" => "ffc0cb",
"plum" => "dda0dd",
"powderblue" => "b0e0e6",
"purple" => "800080",
"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",
"snow" => "fffafa",
"springgreen" => "00ff7f",
"steelblue" => "4682b4",
"tan" => "d2b48c",
"teal" => "008080",
"thistle" => "d8bfd8",
"tomato" => "ff6347",
"turquoise" => "40e0d0",
"violet" => "ee82ee",
"violetred" => "d02090",
"wheat" => "f5deb3",
"white" => "ffffff",
"whitesmoke" => "f5f5f5",
"yellow" => "ffff00",
"yellowgreen" => "9acd32",
```
Thanks a lot!
thanks 🙏
Legend
Thank you :)
awesome, thanks!
+1
Thanks!!!
Thx to @yuseferi for suggesting to add values. Should have done that ages ago! The latest version has a fresh scrape of the W3Schools list, with values.
thanks man @bobspace !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Dude, you are the man. This is exactly what I was looking for.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello All,
I am new to Javascript, I have gone past the initial stage. I am trying out some simple JS projects to improve my knowledge and I want to create a simple app that will allow me to display different colors by clicking a button. I plan on doing this by using an array. I want to display the actual colors, not the hex codes.
I would be forever grateful if anyone can come to my aid.
Thanks.