JavaScript Function to Convert Color Names to Hex Codes

Javascript function to convert color names to hex codes

No, but using the list here you could create one. Something like this:

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

Get color name by HEX or RGB

You can use Name that Color.

Example:

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let is_exact_match = result[2]; // false           : True if exact color match

---

There is also a variation of Name that Color that includes additional parameters:

http://www.color-blindness.com/color-name-hue-tool/js/ntc.js

Example:

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let shade_value = result[2];    // #0000ff         : RGB value of shade of closest match
let shade_name = result[3];     // Blue            : Color name of shade of closest match
let is_exact_match = result[4]; // false           : True if exact color match

Create a hexadecimal colour based on a string with JavaScript

Just porting over the Java from Compute hex color code for an arbitrary string to Javascript:

function hashCode(str) { // java String#hashCode
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
} 

function intToRGB(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
}

To convert you would do:

intToRGB(hashCode(your_string))

RGB to hex and hex to RGB

Note: both versions of rgbToHex expect integer values for r, g and b, so you'll need to do your own rounding if you have non-integer values.

The following will do to the RGB to hex conversion and add any required zero padding:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

How to get hex color value rather than RGB value?

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

(Source)

how can I convert string to hex color with javascript

OK, assuming you don't have any specific colours I have done this using a random colour generator function.

What you can do is loop your list of names, and for each new name store a new colour values in a dictionary. You can then check this dictionary for names you have already used and get that same colour.

For example:

Assuming your html is simply as follows:

<ul></ul>

You can use this javascript:

var names = [
    "Bill", "Joe", "Oliver", "Joe", "George", "Bill", "George", "John"];
var currentAssignments = {};

for (var i = 0; i < names.length; i++) {
    var name = names[i];
    var colour = currentAssignments[name];
    if (!colour) {
        colour = GetRandomColour();
        currentAssignments[name] = colour;
    }
    var li = $("<li>").html(name).css("color", colour);
    $("ul").append(li);
}

function GetRandomColour() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

Here is a working example

---

Alternatively, if you have a predefined array of colours (and assuming you are sure you have enough unique colours to cater for all names) you could do this:

var colours = ["#F00", "#0F0", "#00F"];

and replace the GetRandomColour() function as follows:

function GetRandomColour() {
    return colours.pop();
}

Here is an example

RGB to Color Name Mapping (Approximate Color Mapping)

I am not sure if it is the best way, but if I ever had to do something like this, I think I would first convert these hex values to hsl.

Then you would have to check for saturation and luminance in order to find grays and add more granularity in your findings.

Here is a rough proof of concept using only 6 base colors and with a stolen code from an older question to do this hex => hsl conversion.

inp.oninput = e => {  if (!inp.checkValidity()) return;  var val = inp.value;  if (val.length !== 3 && val.length !== 6) return;  var color = hexToName(inp.value);  if (color) {    inp.style.backgroundColor = '#' + val;    log.textContent = color;  }}

function hexToName(hex) {  // first get hsl correspondance  var hsl = hexToHsl(hex);  if(!hsl){    return;  }  // get the base color  var color = getColorName(hsl[0] * 360);  // check saturation and luminosity  // needs more granularity, left as an exercise for the reader  if (hsl[1] < .5) {    return hsl[2] <= .5 ? hsl[2] === 0? 'black' : 'darkgray' : hsl[2] === 1 ? 'white': 'gray';  }  return hsl[2] <= .5 ? color : 'light' + color;}function getColorName(hue) {  // here you will need more work:  // we use fixed distance for this simple demo  var names = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta'];  var angles = [0, 60, 120, 180, 240, 300];  var match = angles.filter(a =>    a - 60 <= hue && a + 60 > hue  )[0] || 0;  return names[angles.indexOf(match)];}// shamelessly stolen from https://stackoverflow.com/a/3732187/3702797function hexToHsl(hex) {  if (hex.length === 3) {    hex = hex.split('').map(c => c.repeat(2)).join('');  }  if (hex.length !== 6) {    return;  }  var r = parseInt(hex[0] + hex[1], 16);  var g = parseInt(hex[2] + hex[3], 16);  var b = parseInt(hex[4] + hex[5], 16);
  r /= 255, g /= 255, b /= 255;  var max = Math.max(r, g, b),    min = Math.min(r, g, b);  var h, s, l = (max + min) / 2;
  if (max == min) {    h = s = 0; // achromatic  } else {    var d = max - min;    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);    switch (max) {      case r:        h = (g - b) / d + (g < b ? 6 : 0);        break;      case g:        h = (b - r) / d + 2;        break;      case b:        h = (r - g) / d + 4;        break;    }    h /= 6;  }
  return [h, s, l];}

#<input id="inp" type="text" pattern="[0-9a-fA-F]+"><pre id="log"><pre>

---

Related Topics