Passion & Opportunity ? continue : break

How to convert CSS color name to RGB value?
Written: 2019-03-04 09:42:55 Last update: 2019-08-22 16:53:29

Do you know that CSS spec has a list of predefined color names? why do we want to use color name instead using color number to define color? well, your answer is as good as mine, I don't have the exact answer too but if I am to guess then I think there are 2 mindsets of web UI developers, those developers who love to set color using numbers such as #112233 or rgb(50,100,150) or hsl(359, 50%, 50%) most probably feel easier to remember number instead of name and also maybe they want to use a logic to dynamically change the color using numbers, and there are those developers who love to use name to define color maybe because it is easier for them to remember names than numbers and obviously with using name is easier to imagine than calculating the number to image the color.

As of this article is written, there are 140 predefined CSS color names, these color names may be increased in the future, this article displays a list of the color names and their actual color to make web designer can pick the color easily, before we see the color name list on the bottom, below is a simple tool to MIX 2 colors.

Sometime I need to see the gradient result of 2 colors, so created this simple tool to see the gradient color and the MIDDLE color, to use this simple tool please type-in 2 CSS color values, which could be either:

  • CSS Color Names (see all CSS color name list below), eg: 'crimson', 'violet', 'blue', etc. (no space in name)
  • Hexa value in 3 or 6 characters, eg: '#cab', '#899812'
  • RGB or RGBA format, eg: 'rgb(100, 100, 127)', 'rgba(100, 255, 0, 70)'

Color 1

Parse result:

RGB color:
hex: # =
Red:
Green:
Blue:

Color 2

Parse result:

RGB color
hex: # =
Red:
Green:
Blue:

Gradient color from 'Color 1' to 'Color 2'


Middle color, Hex: # =

Red:
Green:
Blue:

All known CSS color names, sorted by RGB values, the background color is the CSS color but the text color is the 'contrast' color (black/white), for the calculation see WebAIM, the ending gradient is the 'flipped' RGB color to make higher contrast.



Below is the Javascript to convert CSS color names to an RGB value.

function getRGBFromComputedStyleColor(colorName) {
  // to use window.getComputedStyle(element), the element must be existed in DOM tree
  // so create a dummy invisible element

  const id = 'temp-element-for-color-testing';

  // check if element existed or not
  let ele = document.getElementById(id);
  if(ele == null) {
    // not exist, so create it
    ele = document.createElement('div');
    ele.style.display = 'none'; // not visible
    ele.id = id; // set id for next use

    // add to body
    document.body.appendChild(ele);
  }

  // set color name
  ele.style.color = colorName;
  
  // get computed style
  let computedStyleColor = window.getComputedStyle(ele).color;

  let colors = null;

  const rgb_signature = 'rgb('; // make sure not 'rgba('
  if(computedStyleColor.startsWith(rgb_signature)) {
    colors = computedStyleColor.substr(rgb_signature.length).split(',').map(function(value) { return parseInt(value); });
  }

  //console.log('getRGBFromComputedStyleColor(' + colorName + '): ' + computedStyleColor);

  return colors;
}  

Hopefully this can help you to choose color easily for your next web design, cheers~