logo标签列表

将颜色名称转换为十六进制代码的JavaScript函数

javascriptcolors
105

是否有内置函数可以将颜色名称转换为十六进制表示法？ 比如，我想传入“白色”并接收“#FFFFFF”。我真的想避免自己编写所有的if语句 :)

16个回答
140
不行，但是你可以使用这里的列表来创建一个。像这样：
function colourNameToHex(colour)
{
    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"};

    if (typeof colours[colour.toLowerCase()] != 'undefined')
        return colours[colour.toLowerCase()];

    return false;
}
9
复制/粘贴/搜索/替换 - Greg
7
不是要打击任何人的回答，但正如我在提交的答案中提到的那样，在所有浏览器中，有一种通过编程方式从命名颜色获取 HEX 和 RGB 值的方法，而不需要像这样拥有一个巨大的表格。Stack 上的人们通常不会往下读吗？ - csuwldcat
7
对于"gray"和"grey"的两种拼写，你还需要以下这些。其他颜色似乎已经包含在内了，基于我的视觉比较结果。"darkgrey":"#a9a9a9", "darkslategrey":"#2f4f4f","dimgrey":"#696969","grey":"#808080","lightgray":"#d3d3d3","lightslategrey""#778899","slategrey":"#708090"。 - user984003
1
这个简单的解决方案比使用getComputedStyle和canvas的花哨解决方案更好，因为有一个重要的原因：你可以将其他颜色名称映射到十六进制值。例如，我们有一个服装零售客户喜欢使用主要颜色的营销名称，如“向日葵黄”等，所有这些名称都映射回黄色，所以要将其转换为颜色样本，我们只需要添加黄色的同义词。一旦查找表设置好了，就不需要维护，所以不确定为什么有些人认为维护是这个解决方案的问题。 - thdoan
3
这个回答已经过时了（而且在我看来，手动创建一个大数组不值得这么多点赞）。一个更好的解决方案（不需要在添加新颜色时更新）是下面来自@JayB的答案。请点击链接查看。 - ashleedawg
显示剩余7条评论
81
@dlauzon建议我将我的评论转换为答案。谢谢你的建议！以下是答案 :)
function standardize_color(str){
    var ctx = document.createElement('canvas').getContext('2d');
    ctx.fillStyle = str;
    return ctx.fillStyle;
}


function standardize_color(str){
    var ctx = document.createElement("canvas").getContext("2d");
    ctx.fillStyle = str;
    return ctx.fillStyle;
}

document.getElementById("myspan1").innerHTML = standardize_color("red");
document.getElementById("myspan2").innerHTML = standardize_color("PeachPuff");
document.getElementById("myspan3").innerHTML = standardize_color("PaleGoldenRod"); 
document.getElementById("myspan4").innerHTML = standardize_color("RGB(123,234,142)"); 
document.getElementById("myspan5").innerHTML = standardize_color("HSL(284,6%,49%)");
span { font-weight:800; }
The color named "Red" has a code of: <span id="myspan1">(requires js)</span>.<br>
 ...and color "PeachPuff"'s code is: <span id="myspan2">(requires js)</span>.<br>
 ...and "PaleGoldenRod" is: <span id="myspan3">(requires js)</span>.<br><br>
 
It works with "RGB(123,234,142)" too: <span id="myspan4">(needs js)</span>  
and therefore with: "HSL(284,6%,49%)", which is: <span id="myspan5">(requires js)
</span>.  Handy!

4
一定是众多答案中最好的答案。 - Tofandel
1
确实是最佳答案。请注意，传递无效的颜色将给您默认的填充颜色（＃000000）。 - Aximili
它实际上返回什么？ - chovy
1
这适用于命名颜色，rgb、hsl和hwb表示法，但不适用于lch、oklch、lab或oklab。有人知道这是否是预期行为吗？ - Holzchopf
有时候我会遇到返回rgba()的情况。（Google Chrome，Windows） - undefined
67

这会给您RGB值 - 您应该能够很容易地进行十六进制转换。

d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB 
window.getComputedStyle(d).color

获取元素计算样式的功能不是所有浏览器都支持。

IE9+，截至2014/08/20的所有常青浏览器（http://caniuse.com/#feat=getcomputedstyle） - Seth Flowers
10
请注意，这会将一个元素添加到您的 <body> 中；在检查其颜色后，您应该将其删除。 - Nate
4
您甚至不需要将元素附加到文档中以检查其样式，从而避免了这个问题。 - Félix Saparelli
6
在 Chrome 中，节点必须在 DOM 中才能从 getComputedStyle 中获取任何东西。否则，颜色属性为空字符串（""）。 - Norman Breau
2
可以确认在Chrome上需要使用appendChild。另外请注意：如果提供了无效的颜色字符串，它只会继承自document.body的颜色。 - Lea Rosema
显示剩余2条评论
49

编辑：我稍微整理了一下，并制作了一个gist和演示。基本方法仍然相同。

对于我来说，“向DOM添加元素并检查其计算样式”的方法似乎有点复杂——您需要添加它并检查它，记得将其删除，并且您正在更改DOM只是为了计算颜色，这会导致回流吗？因此，这里提供了一种基于临时（且从未呈现）<canvas>的解决方案：

function colorToRGBA(color) {
    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
    // color must be a valid canvas fillStyle. This will cover most anything
    // you'd want to use.
    // Examples:
    // colorToRGBA('red')  # [255, 0, 0, 255]
    // colorToRGBA('#f00') # [255, 0, 0, 255]
    var cvs, ctx;
    cvs = document.createElement('canvas');
    cvs.height = 1;
    cvs.width = 1;
    ctx = cvs.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

function byteToHex(num) {
    // Turns a number (0-255) into a 2-character hex number (00-ff)
    return ('0'+num.toString(16)).slice(-2);
}

function colorToHex(color) {
    // Convert any CSS color to a hex representation
    // Examples:
    // colorToHex('red')            # '#ff0000'
    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
    var rgba, hex;
    rgba = colorToRGBA(color);
    hex = [0,1,2].map(
        function(idx) { return byteToHex(rgba[idx]); }
        ).join('');
    return "#"+hex;
}
请注意，这使您可以使用任何有效的画布 fillStyle，因此如果您想从图像中创建一个1像素的图案，它也会告诉您该图案的颜色。
我已在相当现代的IE、Chrome、Safari和Firefox版本中进行了测试。
7
function standardize_color(str){ // 创建一个canvas元素并获取其2D上下文 var ctx = document.createElement('canvas').getContext('2d'); // 设置上下文的填充颜色为传入的参数str ctx.fillStyle = str; // 返回设置后的填充颜色 return ctx.fillStyle; } - JayB
1
太棒了！我不确定我是否更喜欢它；使用“ctx.fillStyle将颜色归一化为rbga”的技巧，您无法放置渐变或图案。我想这回答了OP的问题，但它的灵活性有些降低。 - Nate
@JayB 上面的回答是整个问题线程中最短且可行的答案（您应该将其记录为单独的答案以增加可见性）。 - dlauzon
1
它甚至符合规范：https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle - Nate
28

这里的函数是让浏览器来为您计算它

function getHexColor(colorStr) {
    var a = document.createElement('div');
    a.style.color = colorStr;
    var colors = window.getComputedStyle( document.body.appendChild(a) ).color.match(/\d+/g).map(function(a){ return parseInt(a,10); });
    document.body.removeChild(a);
    return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
}
getHexColor('teal') // returns #008080

逐行解释：

  • 创建html元素
  • 设置颜色
  • 从刚添加到body（因此已呈现）的元素获取rgb代码，过滤数字并将每个数字转换为整数。
  • 删除我们刚创建的html元素
  • 使用zyklus代码返回HEX代码（有关详细信息，请参见致谢部分）

感谢zyklus提供的rgb转hex代码

1
一行代码将 RGB(A) 转换为 #Hex： var colors = '#'+window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function(a,i){ return i>2 ? '' : ('0'+parseInt(a,10).toString(16)).substr(-2); }).join(''); - oriadam
14

这里是一个通用解决方案，完全以编程方式在所有浏览器中实现了您想要的功能，再见巨大的静态名称和十六进制值表格！

// Here is the solution tied together as a native String native extension using 
// MooTools, though you can implement the same thing in whatever framework you prefer:

(function(String){

var valueMatch = {
        'rgb(0,0,0)': { 'black': ' ', 'rgb(0,0,0)': ' ' },
        'rgba(0,0,0,0)': { 'transparent': ' ', 'rgba(0,0,0,0)': ' ' },
        '#ffffff': { 'transparent': ' ' },
        'transparent': { 'transparent': ' ' }
    },
    colorFromProbe = function(color){
        color = color.toString();
        if(!color.match(/^#.+$|^[^0-9]+$/)) return color;
        var probe = ($('moo_color_probe') || new Element('textarea', {
                'id': 'moo_color_probe',
                'styles': {
                    'display': 'none',
                    'color': 'transparent'
                }
            }).inject(document.body, 'after'));
        try{ probe.setStyle('color', color) } catch(e){ return color } //IE throws an error instead of defaulting the style to some color or transparent when the value is unrecognized
        var computed = (Browser.ie) ? ieColorToHex(probe) : (Browser.opera) ? probe.style.color : probe.getComputedStyle('color'),
            match = valueMatch[computed.replace(/ /g, '')];
        probe.setStyle('color', 'transparent');
        if((!Browser.ie || Browser.ie9) && color == 'transparent' && (match && match['transparent'])) return 'rgba(0, 0, 0, 0)';
        return (computed == 'transparent' || match && !match[color.replace(/ /g, '')]) ? color : computed;
    },
    ieColorToHex = function(probe){ // Special IE mojo, thanks to Dean Edwards for the inspiration, his code used a pop-up window to test the color, I found you can simply use a textarea instead ;)
        var value = probe.set('value', '').createTextRange().queryCommandValue("ForeColor");
        value = (((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16)).toString(16);
        return "#000000".slice(0, 7 - value.length) + value;
    };

    String.implement({
        colorToRgb: function(){
            var color = colorFromProbe(this);
            return (color.charAt(0) == '#') ? color.hexToRgb() : color;
        },
        colorToHex: function(){
            var color = colorFromProbe(this);
            return (color.test('rgb')) ? color.rgbToHex() : color;
        }
    });

})(String);

这里有一个更完整的解释和实时示例: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/

1
+1 程序化的方法。不过我无法使用它，因为这是一种昂贵的解决颜色的方式，如果我需要解决一百个值，它将无法平稳运行 - 对于这种情况，“糟糕”的查找列表效果要好得多，尽管维护起来确实很麻烦 :) - Andrey
1
安德烈，我可以向你保证，这甚至不像使用任何JS框架进行样式动画那样昂贵。使用动画时，您需要在给定时间内多次设置多个样式以使某些属性动画化。这实际上与此类操作并没有太大区别，因此为几百种颜色找到值非常容易，没有明显的性能影响。 - csuwldcat
1
@csuwldcat：我远远不认为在IE中使用可怕的黑客比使用大型查找表更可取。肯定会有性能损失，并且它使得创建颜色名称的反向查找变得不可能，这也可能很有用。尽管如此，+1，我没有想到使用TextRange和queryCommandValue()。 - Tim Down
@csuwldcat：在我的机器上进行简单测试，使用查找表来解析颜色比通过DOM解析快20到50倍，具体取决于浏览器。 - Tim Down
3
@csuwldcat说：所有的都是真的，在我们之间，我们已经相当全面地讨论了这个问题。我认为我的主要观点是两种方法都是有效的，而哪一种更可取取决于具体的情况，而你的评论似乎表明你认为编程解决方案本质上更优越。 - Tim Down
显示剩余3条评论
6
你需要依靠getComputedStyle(...)。 getComputedStyle的使用示例：
function convertToHexColor(englishColor) {

    // create a temporary div. 
    var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
    var computedStyle = window.getComputedStyle(div[0]);

    // get computed color.
    var computedColor = computedStyle.backgroundColor;

    // cleanup temporary div.
    div.remove();

    // done.
    return computedColor;

    // The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};

将"rgb(R, G, B)"转换为#RRGGBB，您可以使用以下方法：

function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.              
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#" 
        + (r + 0x10000).toString(16).substring(3).toUpperCase() 
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}
@pimvdb 取决于您需要多频繁地映射颜色。您可以始终将相同的div保留在DOM中，以此方式节省一些时间--然后其余时间花费在两个css调用上（其中一个可能会重新排序到计算样式调用）。 - DuckMaestro
我不相信jQuery可以做到这一点，我刚刚查看了它们的源代码，在其中没有包含执行所需逻辑的部分。您能否提供一个jsFiddle链接，展示您如何使用jQuery设置命名颜色并返回十六进制值？ - csuwldcat
@csuwldcat 感谢您的评论。我的先前代码示例停止工作了 - 我现在不确定为什么它最初能够工作。无论如何，我已经发布了新的代码，并且这里是一个 jsFiddle：http://jsfiddle.net/GRsCr/32/. - DuckMaestro
1
顺带一提，您不需要将十六进制值转换为大写形式。 - Nate
3

在Greg的答案的基础上进行改进，包括灰色/灰度版本

新增：传递未解决字符串的标志

可作为gist colorhelpersforcanvas.js使用

String.prototype.colorNameToHex = function (returnUnresolved) { // color list from https://dev59.com/23I_5IYBdhLWcg3wAd82  with added gray/gray
    var hexRGB, definedColorNames = {"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", "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", "darkgrey": "#a9a9a9", "darkslategrey": "#2f4f4f", "dimgrey": "#696969", "grey": "#808080", "lightgray": "#d3d3d3", "lightslategrey": "#778899", "slategrey": "#708090"};
    if (definedColorNames[this.toLowerCase()] !== undefined) {
        hexRGB = definedColorNames[this.toLowerCase()];
        // to keep unresolved strings set flag returnUnresolved to true
    } else {if (returnUnresolved) {hexRGB = this; } else {hexRGB = undefined; } }
    return hexRGB;
};

一些测试案例：
console.log("black".colorNameToHex());                //returns #000000
console.log("rgba(100,100,0,0.7)".colorNameToHex());  //returns undefined 
console.log("rgba(100,100,0,0.7)".colorNameToHex(1)); //returns rgba(100,100,0,0.7)

作为奖励，这是我将颜色字符串转换为带有alpha通道的颜色字符串的用例：
适用于任何CSS定义的颜色，包括：rgba、rgb、r%g%b%、#rgb、#rrggbb、hsl、hsla
在使用传递的颜色字符串绘制带有alpha/不透明度/透明度的HTML5画布元素时非常有用。
String.prototype.setAlpha = function (alpha) {
    // change alpha of color string in any css color space
    // intended for use in canvas/svg
    // currently implemented:
    // css defined colors               > rgba
    // rgba, rgb, r%g%b%, #rgb, #rrggbb > rgba
    // hsl, hsla                        > hsla
    // unresolved                       > as is
    //
    // If no alpha is passed its is set to 1 or keeps the value in rgba/hsla

    // kill whitespace split at "(", ")", ","
    var i, hex, c = this.replace(/\s/g, '').split(/[\(\),]/);
    function extractHex(string) {
        if (string.charAt(0) === "#") {  // detect hex strings
            hex = string.replace(/#/g, '');
            string = "hex";
        } else {hex = undefined; }
        return string;
    }
    extractHex(c[0]);
    if (["rgba", "rgb", "hsla", "hsl", "hex"].indexOf(c[0]) === -1) {
        c[0] = extractHex(c[0].colorNameToHex(1)); // detect defined color names
    }
    switch (c[0]) {
    case "rgba":
        if (alpha === undefined) {alpha = c[4]; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "rgb":
        if (alpha === undefined) {alpha = 1; }
        //  if colors are in percentage values
        for  (i = 1; i <= 3; i = i + 1) {
            if (c[i].charAt(c[i].length - 1) === "%") {
                c[i] = Math.round(c[i].replace(/%/g, '') * 2.55);
            }
        }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsl":
        if (alpha === undefined) {alpha = 1; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsla":
        if (alpha === undefined) {alpha = c[4]; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hex":
        if (alpha === undefined) {alpha = 1; }
        if (hex.length === 3) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(0), 16);
            c[2] = parseInt(hex.charAt(1) + hex.charAt(1), 16);
            c[3] = parseInt(hex.charAt(2) + hex.charAt(2), 16);
        } else if (hex.length === 6) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(1), 16);
            c[2] = parseInt(hex.charAt(2) + hex.charAt(3), 16);
            c[3] = parseInt(hex.charAt(4) + hex.charAt(5), 16);
        } else {break; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    default: c = this; break;
    }
    return c;
};

测试：

console.log("orange".setAlpha(0.3));
请勿扩展原始对象，因为这会大大降低性能。 - Jack G
3

下载并包含来自w3school的w3color.js。

然后在您的脚本中，您可以使用以下任何一个函数：

let c = w3color("violet");
c.darker(n)
c.desaturate(n)
c.isDark(n)
c.lighter(n)
c.saturate(n)
c.toCmyk()
c.toCmykString()
c.toCmykStringDecimal()
c.toHexString()
c.toHsl()
c.toHslString()
c.toHslStringDecimal()
c.toHslaString()
c.toHwb()
c.toHwbString()
c.toHwbStringDecimal()
c.toHwbaString()
c.toName()
c.toNcol()
c.toNcolString()
c.toNcolStringDecimal()
c.toNcolaString()
c.toRgb()
c.toRgbString()
c.toRgbaString()
2
运行代码段，看看如何轻松地将“任何”有效的CSS颜色（HSL、名称、十六进制、系统颜色*等）转换为使用您拥有的任何元素的R/G/B值。

*Enter a value of background and you'll get your Windows Desktop background color (in Firefox, anyways). 

go();
function go() {
  clr.style.backgroundColor = document.getElementById('txt').value;
  document.getElementById('rgb').innerHTML = window.getComputedStyle(clr).backgroundColor;
}
* { margin:0; box-sizing:border-box; font-family:verdana; overflow:hidden; }
#txt,#rgb,#clr { height:30vh; width:97vw; padding:5vmin; margin:2vmin; font-size:13vh; border:1vmin solid; text-align:center; vertical-align:middle;}
#txt{margin-bottom:0;}
<input type='text' id='txt' onkeyup='go()' value='chartreuse' placeholder='Enter any css color . . .' autofocus>
<div id='clr'></div>
<div id='rgb'></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接