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

La solution de Cravates converti en TypeScript :

export const getHexColorFromLiteral = (
  colorStr:
    | 'aliceblue'
    | 'antiquewhite'
    | 'aqua'
    | 'aquamarine'
    | 'azure'
    | 'beige'
    | 'bisque'
    | 'black'
    | 'blanchedalmond'
    | 'blue'
    | 'blueviolet'
    | 'brown'
    | 'burlywood'
    | 'cadetblue'
    | 'chartreuse'
    | 'chocolate'
    | 'coral'
    | 'cornflowerblue'
    | 'cornsilk'
    | 'crimson'
    | 'cyan'
    | 'darkblue'
    | 'darkcyan'
    | 'darkgoldenrod'
    | 'darkgray'
    | 'darkgreen'
    | 'darkkhaki'
    | 'darkmagenta'
    | 'darkolivegreen'
    | 'darkorange'
    | 'darkorchid'
    | 'darkred'
    | 'darksalmon'
    | 'darkseagreen'
    | 'darkslateblue'
    | 'darkslategray'
    | 'darkturquoise'
    | 'darkviolet'
    | 'deeppink'
    | 'deepskyblue'
    | 'dimgray'
    | 'dodgerblue'
    | 'firebrick'
    | 'floralwhite'
    | 'forestgreen'
    | 'fuchsia'
    | 'gainsboro'
    | 'ghostwhite'
    | 'gold'
    | 'goldenrod'
    | 'gray'
    | 'green'
    | 'greenyellow'
    | 'honeydew'
    | 'hotpink'
    | 'indianred'
    | 'indigo'
    | 'ivory'
    | 'khaki'
    | 'lavender'
    | 'lavenderblush'
    | 'lawngreen'
    | 'lemonchiffon'
    | 'lightblue'
    | 'lightcoral'
    | 'lightcyan'
    | 'lightgoldenrodyellow'
    | 'lightgray'
    | 'lightgreen'
    | 'lightpink'
    | 'lightsalmon'
    | 'lightseagreen'
    | 'lightskyblue'
    | 'lightslategray'
    | 'lightsteelblue'
    | 'lightyellow'
    | 'lime'
    | 'limegreen'
    | 'linen'
    | 'magenta'
    | 'maroon'
    | 'mediumaquamarine'
    | 'mediumblue'
    | 'mediumorchid'
    | 'mediumpurple'
    | 'mediumseagreen'
    | 'mediumslateblue'
    | 'mediumspringgreen'
    | 'mediumturquoise'
    | 'mediumvioletred'
    | 'midnightblue'
    | 'mintcream'
    | 'mistyrose'
    | 'moccasin'
    | 'navajowhite'
    | 'navy'
    | 'oldlace'
    | 'olive'
    | 'olivedrab'
    | 'orange'
    | 'orangered'
    | 'orchid'
    | 'palegoldenrod'
    | 'palegreen'
    | 'paleturquoise'
    | 'palevioletred'
    | 'papayawhip'
    | 'peachpuff'
    | 'peru'
    | 'pink'
    | 'plum'
    | 'powderblue'
    | 'purple'
    | 'rebeccapurple'
    | 'red'
    | 'rosybrown'
    | 'royalblue'
    | 'saddlebrown'
    | 'salmon'
    | 'sandybrown'
    | 'seagreen'
    | 'seashell'
    | 'sienna'
    | 'silver'
    | 'skyblue'
    | 'slateblue'
    | 'slategray'
    | 'snow'
    | 'springgreen'
    | 'steelblue'
    | 'tan'
    | 'teal'
    | 'thistle'
    | 'tomato'
    | 'turquoise'
    | 'violet'
    | 'wheat'
    | 'white'
    | 'whitesmoke'
    | 'yellow'
    | 'yellowgreen'
) => {
    const div = document.createElement('div')
    div.style.color = colorStr
    document.body.appendChild(div)

    const computedColor = window.getComputedStyle(div).color
    const matchResult = computedColor.match(/\d+/g)
    if (matchResult !== null) {
        const colors = matchResult.map((a) => parseInt(a, 10))

        document.body.removeChild(div)
        return colors.length >= 3
            ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)
            : false
    }

    return false
}

Answer 2

Avec Firefox 94, vous obtenez la couleur rgb lorsqu'elle est associée à un nom de couleur. Mais il faut d'abord injecter l'élément factice dans la page.

// Vanilla and jQuery

console.clear();

var 
  colors = ['cyan', 'magenta', 'yellow']
  dummy     = {},
  colorObj  = {},
  rgbString = '',
  rgb2hex   = function(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
  }
;

$(colors).each(function(i, color) {
  dummy = $('<b style="background-color:' + color + '"></b>');
  // inject the dummy
  $('body').append(dummy);
  // get the rgb color 
  rgbString = dummy.css('background-color');
  // build an object with 'color name', 'rgb color' and 'hex color'
  colorObj[i] = [color, rgbString, rgb2hex(rgbString)]; 
  // delete the dummy 
  dummy.remove();  
});

console.dir(colorObj);

Si vous avez besoin d'un tableau contenant les 140 noms de couleurs

colors = [
  'aliceblue',
  'antiquewhite',
  'aqua',
  'aquamarine',
  'azure',
  'beige',
  'bisque',
  'black',
  'blanchedalmond',
  'blue',
  'blueviolet',
  'brown',
  'burlywood',
  'cadetblue',
  'chartreuse',
  'chocolate',
  'coral',
  'cornflowerblue',
  'cornsilk',
  'crimson',
  'cyan',
  'darkblue',
  'darkcyan',
  'darkgoldenrod',
  'darkgray',
  'darkgreen',
  'darkkhaki',
  'darkmagenta',
  'darkolivegreen',
  'darkorange',
  'darkorchid',
  'darkred',
  'darksalmon',
  'darkseagreen',
  'darkslateblue',
  'darkslategray',
  'darkturquoise',
  'darkviolet',
  'deeppink',
  'deepskyblue',
  'dimgray',
  'dodgerblue',
  'firebrick',
  'floralwhite',
  'forestgreen',
  'fuchsia',
  'gainsboro',
  'ghostwhite',
  'gold',
  'goldenrod',
  'gray',
  'green',
  'greenyellow',
  'honeydew',
  'hotpink',
  'indianred',
  'indigo',
  'ivory',
  'khaki',
  'lavender',
  'lavenderblush',
  'lawngreen',
  'lemonchiffon',
  'lightblue',
  'lightcoral',
  'lightcyan',
  'lightgoldenrodyellow',
  'lightgray',
  'lightgreen',
  'lightpink',
  'lightsalmon',
  'lightseagreen',
  'lightskyblue',
  'lightslategray',
  'lightsteelblue',
  'lightyellow',
  'lime',
  'limegreen',
  'linen',
  'magenta',
  'maroon',
  'mediumaquamarine',
  'mediumblue',
  'mediumorchid',
  'mediumpurple',
  'mediumseagreen',
  'mediumslateblue',
  'mediumspringgreen',
  'mediumturquoise',
  'mediumvioletred',
  'midnightblue',
  'mintcream',
  'mistyrose',
  'moccasin',
  'navajowhite',
  'navy',
  'oldlace',
  'olive',
  'olivedrab',
  'orange',
  'orangered',
  'orchid',
  'palegoldenrod',
  'palegreen',
  'paleturquoise',
  'palevioletred',
  'papayawhip',
  'peachpuff',
  'peru',
  'pink',
  'plum',
  'powderblue',
  'purple',
  'red',
  'rosybrown',
  'royalblue',
  'saddlebrown',
  'salmon',
  'sandybrown',
  'seagreen',
  'seashell',
  'sienna',
  'silver',
  'skyblue',
  'slateblue',
  'slategray',
  'snow',
  'springgreen',
  'steelblue',
  'tan',
  'teal',
  'thistle',
  'tomato',
  'turquoise',
  'violet',
  'wheat',
  'white',
  'whitesmoke',
  'yellow',
  'yellowgreen'
]

Answer 3

Ce n'est pas intégré, pour autant que je sache. Ce serait une sorte de hack, mais je pense que vous pourriez créer une div invisible, définir sa propriété d'arrière-plan CSS à la couleur nommée, puis utiliser JS pour obtenir la couleur d'arrière-plan de la div, puis supprimer la div.

Answer 4

polyfill getComputedStyle IE8 si nécessaire

var rgbToHex = function(r, g, b) {
    return "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1);
};

var d = document.createElement('div');
d.style.color = 'white';
window.document.body.appendChild(d);
var parts = (window.getComputedStyle(d).color || '').match(/\d+/g);
var f = function(n) { return parseInt(n, 10); };
window.document.body.removeChild(d);
var hex = rgbToHex(f(parts[0]), f(parts[1]), f(parts[2]));

//"#ffffff"

Answer 5

Cette fonction demande une couleur nommée et renvoie une valeur hexadécimale de la couleur. Si la couleur nommée n'est pas supportée (exemple "whyte"), elle renvoie une couleur noire par défaut, mais sur la console, vous pouvez trouver un avertissement : Couleur nommée non supportée : ${couleur nommée}

const namedColorToHex = namedColor => {
    const html = document.querySelector("html");
    const originalColor = html.style.color;
    html.style.color = namedColor;
    const rgbFormatBgColor = window.getComputedStyle(html).color;
    if (namedColor !== "black" && rgbFormatBgColor === "rgb(0, 0, 0)") {
        console.warn(`Not supported named color: ${namedColor}`);
    }
    html.style.color = originalColor;
    const regEx = /(\d+)/g;
    const result = rgbFormatBgColor.match(regEx);
    let hexColor = `#`;
    result.forEach(value => {
        let hex = Number(value).toString(16);
        if (hex.length === 1) {
            hex = `0${hex}`;
        }
        hexColor += hex;
    });
    return hexColor;
};