5

Is there a way to programmatically generate a list of all named CSS colors supported by the browser via JavaScript? (.e.g. Red, Green, AliceBlue etc.)

Note: I'm not asking for a pre-compiled list, I'm looking for something more akin to document.body.style, which returns an object with all css properties supported by the browser.

Minifyre
  • 510
  • 2
  • 5
  • 17
  • you can generate them all, with rgb. 0 to 255. rgb(0,1,3) – Void Spirit Oct 05 '18 at 18:33
  • There is no list. – epascarello Oct 05 '18 at 18:34
  • @epascarello Isn't it accurate to say any list which lists all [X11 color names](https://en.wikipedia.org/wiki/X11_color_names) is the complete list? – rmn Oct 05 '18 at 18:46
  • @Minifyre I understand why a list won't work, but does a [plugin](http://chir.ag/projects/name-that-color) which utilises that list work? Like you pass it a hex, and it tries naming that color. – rmn Oct 05 '18 at 18:50
  • 1
    @rmn The OP wants a list generated from JavaScript code, not a 3rd party list. The OP could take a pre compiled list and run it and see if the color name, matches the hex code, but still not want they want, but probably the best thing the OP can get. – epascarello Oct 05 '18 at 19:21
  • 4
    The list of recognized color names must be somewhere in the browser's code, but AFAIK there's nothing that makes it available to JS. – Barmar Oct 05 '18 at 20:00
  • 1
    Here's a lead from the chromium repo https://github.com/chromium/chromium/blob/2ca8c5037021c9d2ecc00b787d58a31ed8fc8bcb/third_party/google_input_tools/third_party/closure_library/closure/goog/color/names.js – Aaron Bell Nov 07 '20 at 08:22

2 Answers2

1

I guess the closed you can get is starting from a pre-compiled color name list and check if the browser supports the color. You can assign the color with

div.stlye.backgroundColor = '';
div.style.backgroundColor = potentialColor;

and retrieve the actual color information with

var actualColorString = window.getComputedStyle(div).background;

If the assigned color is not valid (or black), the color string starts with

rgba(0, 0, 0, 0)

Otherwise it is a known css color name.

Here is some jsfiddle to demonstrate the color check:

https://jsfiddle.net/tc8f5pgy/4/

I used this method to create a Color enum for my project:

https://github.com/stefaneidelloth/treezjs/blob/master/src/components/color/color.js

And here is part of the code as a backup for the jsfiddle:

<div id='color-element'></div>

//source of color names: https://simple.wikipedia.org/wiki/List_of_colors

const colorNames = [
    'Amaranth',
    //...
];

//another source of color names: https://gist.github.com/bobspace/2712980
const cssColorNames = [ 
    "AliceBlue", 
    "AntiqueWhite",
    //...
];

//another source of color names: https://chir.ag/projects/ntc/ntc.js
var extendedColors =  [
    ["000000", "Black"],
    ["000080", "Navy Blue"],
    //...
];

function camelize(str) { //source: https://stackoverflow.com

/questions/2970525/converting-any-string-into-camel-case
  var camelString= str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
  return camelString.replace(/\//g,'').replace(/-/g,'').replace(/'/g,'');
}

function rgba2hex(orig) { //source: https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function handleActualColor(name, rgbaColorString){
  var hexColorString = rgba2hex(rgbaColorString);
  var output = "Color." + name + " = new Color('"+ name +"','#"+ hexColorString + "');"
  console.log(output);
}

var potentialColorSet = new Set();
for(var colorName of colorNames){
  potentialColorSet.add(camelize(colorName));
}
for(var colorName of cssColorNames){
  potentialColorSet.add(camelize(colorName));
}
for(var entry of extendedColors){
 var colorName = entry[1];
 potentialColorSet.add(camelize(colorName));
}

var potentialColors = Array.from(potentialColorSet).sort();

var div = document.getElementById('color-element');



for(var potentialColor of potentialColors){
  div.style.backgroundColor = '';
  div.style.backgroundColor = potentialColor;
  var actualColorString = window.getComputedStyle(div).background;  
  var endIndex = actualColorString.indexOf(')');
  var rgbaColorString = actualColorString.substring(0, endIndex+1);
  if(rgbaColorString !== 'rgba(0, 0, 0, 0)'){
    handleActualColor(potentialColor, rgbaColorString);
    if(potentialColor == 'screaminGreen'){
        throw new Error('foo');
    }
  }
  if(potentialColor.toLowerCase() === 'black'){
    handleActualColor(potentialColor, rgbaColorString);
  }
  
  
}
Stefan
  • 10,010
  • 7
  • 61
  • 117
0

I came up with this list of colors you might use for TEXT or Backgrounds

Just call them by names i.e: <div class="black_bg silver_text"></div>

.black_text{color:#000000;}.black_bg{background-color:#000000;} 
.silver_text{color:#c0c0c0;}.silver_bg{background-color:#c0c0c0;}   
.gray_text{color:#808080;}.gray_bg{background-color:#808080;}   
.white_text{color:#ffffff;}.white_bg{background-color:#ffffff;} 
.maroon_text{color:#800000;}.maroon_bg{background-color:#800000;}   
.red_text{color:#ff0000;}.red_bg{background-color:#ff0000;} 
.purple_text{color:#800080;}.purple_bg{background-color:#800080;}   
.fuchsia_text{color:#ff00ff;}.fuchsia_bg{background-color:#ff00ff;} 
.green_text{color:#008000;}.green_bg{background-color:#008000;} 
.lime_text{color:#00ff00;}.lime_bg{background-color:#00ff00;}   
.olive_text{color:#808000;}.olive_bg{background-color:#808000;} 
.yellow_text{color:#ffff00;}.yellow_bg{background-color:#ffff00;}   
.navy_text{color:#000080;}.navy_bg{background-color:#000080;}   
.blue_text{color:#0000ff;}.blue_bg{background-color:#0000ff;}   
.teal_text{color:#008080;}.teal_bg{background-color:#008080;}   
.aqua_text{color:#00ffff;}.aqua_bg{background-color:#00ffff;}   
.orange_text{color:#ffa500;}.orange_bg{background-color:#ffa500;}
.aliceblue_text{color:#f0f8ff;}.aliceblue_bg{background-color:#f0f8ff;} 
.antiquewhite_text{color:#faebd7;}.antiquewhite_bg{background-color:#faebd7;}   
.aquamarine_text{color:#7fffd4;}.aquamarine_bg{background-color:#7fffd4;}   
.azure_text{color:#f0ffff;}.azure_bg{background-color:#f0ffff;} 
.beige_text{color:#f5f5dc;}.beige_bg{background-color:#f5f5dc;} 
.bisque_text{color:#ffe4c4;}.bisque_bg{background-color:#ffe4c4;}   
.blanchedalmond_text{color:#ffebcd;}.blanchedalmond_bg{background-color:#ffebcd;}   
.blueviolet_text{color:#8a2be2;}.blueviolet_bg{background-color:#8a2be2;}   
.brown_text{color:#a52a2a;}.brown_bg{background-color:#a52a2a;} 
.burlywood_text{color:#deb887;}.burlywood_bg{background-color:#deb887;} 
.cadetblue_text{color:#5f9ea0;}.cadetblue_bg{background-color:#5f9ea0;} 
.chartreuse_text{color:#7fff00;}.chartreuse_bg{background-color:#7fff00;}   
.chocolate_text{color:#d2691e;}.chocolate_bg{background-color:#d2691e;} 
.coral_text{color:#ff7f50;}.coral_bg{background-color:#ff7f50;} 
.cornflowerblue_text{color:#6495ed;}.cornflowerblue_bg{background-color:#6495ed;}   
.cornsilk_text{color:#fff8dc;}.cornsilk_bg{background-color:#fff8dc;}   
.crimson_text{color:#dc143c;}.crimson_bg{background-color:#dc143c;} 
.darkblue_text{color:#00008b;}.darkblue_bg{background-color:#00008b;}   
.darkcyan_text{color:#008b8b;}.darkcyan_bg{background-color:#008b8b;}   
.darkgoldenrod_text{color:#b8860b;}.darkgoldenrod_bg{background-color:#b8860b;} 
.darkgray_text{color:#a9a9a9;}.darkgray_bg{background-color:#a9a9a9;}   
.darkgreen_text{color:#006400;}.darkgreen_bg{background-color:#006400;} 
.darkgrey_text{color:#a9a9a9;}.darkgrey_bg{background-color:#a9a9a9;}   
.darkkhaki_text{color:#bdb76b;}.darkkhaki_bg{background-color:#bdb76b;} 
.darkmagenta_text{color:#8b008b;}.darkmagenta_bg{background-color:#8b008b;} 
.darkolivegreen_text{color:#556b2f;}.darkolivegreen_bg{background-color:#556b2f;}   
.darkorange_text{color:#ff8c00;}.darkorange_bg{background-color:#ff8c00;}   
.darkorchid_text{color:#9932cc;}.darkorchid_bg{background-color:#9932cc;}   
.darkred_text{color:#8b0000;}.darkred_bg{background-color:#8b0000;} 
.darksalmon_text{color:#e9967a;}.darksalmon_bg{background-color:#e9967a;}   
.darkseagreen_text{color:#8fbc8f;}.darkseagreen_bg{background-color:#8fbc8f;}   
.darkslateblue_text{color:#483d8b;}.darkslateblue_bg{background-color:#483d8b;} 
.darkslategray_text{color:#2f4f4f;}.darkslategray_bg{background-color:#2f4f4f;} 
.darkslategrey_text{color:#2f4f4f;}.darkslategrey_bg{background-color:#2f4f4f;} 
.darkturquoise_text{color:#00ced1;}.darkturquoise_bg{background-color:#00ced1;} 
.darkviolet_text{color:#9400d3;}.darkviolet_bg{background-color:#9400d3;}   
.deeppink_text{color:#ff1493;}.deeppink_bg{background-color:#ff1493;}   
.deepskyblue_text{color:#00bfff;}.deepskyblue_bg{background-color:#00bfff;} 
.dimgray_text{color:#696969;}.dimgray_bg{background-color:#696969;} 
.dimgrey_text{color:#696969;}.dimgrey_bg{background-color:#696969;} 
.dodgerblue_text{color:#1e90ff;}.dodgerblue_bg{background-color:#1e90ff;}   
.firebrick_text{color:#b22222;}.firebrick_bg{background-color:#b22222;} 
.floralwhite_text{color:#fffaf0;}.floralwhite_bg{background-color:#fffaf0;} 
.forestgreen_text{color:#228b22;}.forestgreen_bg{background-color:#228b22;} 
.gainsboro_text{color:#dcdcdc;}.gainsboro_bg{background-color:#dcdcdc;} 
.ghostwhite_text{color:#f8f8ff;}.ghostwhite_bg{background-color:#f8f8ff;}   
.gold_text{color:#ffd700;}.gold_bg{background-color:#ffd700;}   
.goldenrod_text{color:#daa520;}.goldenrod_bg{background-color:#daa520;} 
.greenyellow_text{color:#adff2f;}.greenyellow_bg{background-color:#adff2f;} 
.grey_text{color:#808080;}.grey_bg{background-color:#808080;}   
.honeydew_text{color:#f0fff0;}.honeydew_bg{background-color:#f0fff0;}   
.hotpink_text{color:#ff69b4;}.hotpink_bg{background-color:#ff69b4;} 
.indianred_text{color:#cd5c5c;}.indianred_bg{background-color:#cd5c5c;} 
.indigo_text{color:#4b0082;}.indigo_bg{background-color:#4b0082;}   
.ivory_text{color:#fffff0;}.ivory_bg{background-color:#fffff0;} 
.khaki_text{color:#f0e68c;}.khaki_bg{background-color:#f0e68c;} 
.lavender_text{color:#e6e6fa;}.lavender_bg{background-color:#e6e6fa;}   
.lavenderblush_text{color:#fff0f5;}.lavenderblush_bg{background-color:#fff0f5;} 
.lawngreen_text{color:#7cfc00;}.lawngreen_bg{background-color:#7cfc00;} 
.lemonchiffon_text{color:#fffacd;}.lemonchiffon_bg{background-color:#fffacd;}   
.lightblue_text{color:#add8e6;}.lightblue_bg{background-color:#add8e6;} 
.lightcoral_text{color:#f08080;}.lightcoral_bg{background-color:#f08080;}   
.lightcyan_text{color:#e0ffff;}.lightcyan_bg{background-color:#e0ffff;}
ErickBest
  • 4,586
  • 5
  • 31
  • 43