Last active
April 24, 2024 13:34
-
-
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', | |
| }; |
Made it more readable and switched declaration to const because I am a professional.
You are a legend. Thank you for this.
Oh man, thank you so much! Save me a lot of time! :D
Great!
Thank You
Sweet! Thanks!
God Bless You.
Thank you - just what I was looking for!
Thank you
Thank you! You rock, I mean it
Thank you, exactly what I needed.
Just wanted to add a thank you!!
Very handy, exactly what I was looking for! Thanks so much!
Thanks
Nice, immediately gave a star
thanks
Absolute king.
This is inspiring me to create some sort of website that provides ready-made arrays of different values as strings, for when I don't really want to think up and type 50 different names, or colors, or places.
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.
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
@Elizabeth-Bridgeman updated! Thanks for suggesting!