极客教程JavaScript 如何将颜色名称转换为Hexcode
给定一个颜色名称，任务是获取该颜色名称的HexCode。以下是使用JavaScript的一些技巧：
方法1
- 将所有可能的颜色名称及其对应的HexCode存储在JavaScript对象中。
- 将给定的颜色名称与颜色对象列表进行比较，如果找到匹配项，则返回相应的HexCode，如果找不到匹配项，则返回false。
颜色名称： 只需在”var colours”的内部进行复制粘贴。
"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"，"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"，"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"，"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"，"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"
示例： 此示例实现了上述方法。
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
Type Valid Color:
<input id="input" type="text" />
<br><br>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG_DOWN">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"Type color and click on the button.";
function convert(color) {
var colours = {
// Pase here the colors list
};
if (typeof colours[color.toLowerCase()] != 'undefined')
return colours[color.toLowerCase()];
return false;
}
function gfg_Run() {
color = document.getElementById('input').value;
el_up.style.color = color;
el_down.innerHTML = "The RGB value of " + color
+ " is " + convert(color);
}
</script>
</body>
输出：
方法2
- 首先从用户获取有效的颜色名称。
- 将该颜色设置为
DIV元素的 CSS颜色属性 。 -
使用 window.getComputedStyle(element).color属性 来返回颜色的RGB值。
- 调用convert()用户定义的函数并使用RGB值作为参数。
- 使用match()方法选择红色、绿色和蓝色的值。RGB的值以数组的形式存储。
- 调用hexCode()函数将RGB值转换为十六进制代码。
- slice()方法获取字符串的部分并返回提取的部分的新字符串。toString()方法将数字转换为字符串。
- 参考链接将RGB转换为HexValue。
示例2： 这个示例使用上述的方法。
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
Type Valid Color:
<input id="input" type="text" />
<br><br>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG_DOWN">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Type color and click on the button.";
function getVal(color) {
// Setting the text color
// of el_up element.
el_up.style.color = color;
}
function convert(rgb) {
rgb = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/);
function hexCode(i) {
// Take the last 2 characters and convert
// them to Hexadecimal.
return ("0" + parseInt(i).toString(16)).slice(-2);
}
return "#" + hexCode(rgb[1]) + hexCode(rgb[2])
+ hexCode(rgb[3]);
}
function gfg_Run() {
// Taking the input
var color = document.getElementById('input').value;
getVal(color);
// Getting the Color in RGB format
var rgb = window.getComputedStyle(el_up).color;
el_down.innerHTML = "The HexCode value of "
+ color +" is "+ convert(rgb);
}
</script>
</body>
输出：
