Fonction Javascript pour convertir les noms de couleurs en codes hexagonaux

Question

Existe-t-il une fonction intégrée permettant de convertir le nom d'une couleur en sa représentation hexadécimale ? Par exemple, je veux passer 'white' et recevoir '#FFFFFF'. Je veux vraiment éviter de coder toutes les centaines de si moi-même :)

Answer 1

Voici une solution universelle qui fait exactement ce que vous voulez dans tous les navigateurs et qui est 100% programmatique, adieu le tableau statique géant de noms et de valeurs hexagonales !

// 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);    

Une explication plus complète et un exemple concret sont disponibles ici : http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/

Answer 2

Vous devrez vous appuyer sur getComputedStyle(...) .

Exemple d'utilisation 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.
};

Et pour convertir "rgb(R, G, B)" en #RRGGBB, vous pouvez utiliser :

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();
}

Answer 3

En s'appuyant sur Réponse de Greg y compris la version grise/gris

ajout d'un drapeau permettant de passer les chaînes non résolues

disponible en tant que gist colorhelpersforcanvas.js

String.prototype.colorNameToHex = function (returnUnresolved) { // color list from https://stackoverflow.com/q/1573053/731179  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;
};

quelques cas de test :

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) 

en bonus, voici mon cas d'utilisation pour une conversion de chaîne de couleur en chaîne de couleur avec alpha :

fonctionne avec n'importe quel Couleur définie par css y compris : rgba, rgb, r%g%b%, #rgb, #rrggbb, hsl, hsla

principalement utile pour dessiner avec alpha/opacité/transparence sur un élément HTML5 canvas avec des chaînes de couleurs transmises

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;
};

test :

console.log("orange".setAlpha(0.3));

Answer 4

Télécharger et inclure le w3color.js de w3school .

alors dans votre script vous pouvez utiliser n'importe laquelle des fonctions suivantes :

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()

Answer 5

Exécutez l'extrait pour voir avec quelle facilité "n'importe quel" Couleur CSS valide (HSL, noms, hexagone, couleurs système*, etc.) peuvent être converties en valeurs R/G/B à l'aide de n'importe quel élément que vous avez sous la main.

* Entrer une valeur de background et vous obtiendrez la couleur d'arrière-plan de votre bureau Windows (dans Firefox, en tout cas).

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>