Quick.Work

Do you know that CSS spec has a list of predefined color names? why do we want to use color name instead using a color value to define a color for our website? because it is easier to remember a name than to remember RGB values such as using hexacode #ffffff (white), #ff0000 (red), etc., or using number like rgb(50,100,150) or hsl(359, 50%, 50%).

When designing a website often some non-tech people are involved such as advertiser, marketer, business, etc. sometimes they want to request to create something with a specific color or request to change a color and often they don't know or don't remember what is the RGB value of a color they want, sometimes web developer or web designer have to show them a color palette or gradient template so they can choose the color.

I have some requests from a client to change a color to another and because the client is not sitting next to me so I have difficulty to know what is the exact color the guy wants, previously I have to tell the guy to send me a screenshot so I can get the exact color and convert the color to RGB value, it is troublesome and I decided to create a CSS color name template and ask the guy to choose and tell me the color name, it is much faster and easier for all of us.

Below is the list of CSS color names, displayed and sorted by WebAIM luminance values. It is recommended to use a good contrast color between text color and background color, in here the text color is either white or black, the logic is to compare the contrast values of both white and black colors with the specified color, if 'contrast value with white' is higher than 'contrast value with black' then will use white color for text color, else will use black color for text color, basically it means that if the specified color is a 'bright' color then we use 'dark' text color but if it is a 'dark' color then we use 'bright' text color. Please see WebAIM for more detail, for every CSS color name below I add a gradient at the end using the 'flipped' RGB color to make higher contrast.

Are you wondering why many web creator (developers and designers) use RGB value to define a color for web's UI element? these are a few possible answers

• Web creator already use it when they start learning, so it has become a habit.
• Not all colors have name, there are 24bit colors available in CSS which means a total of 16,777,216 colors.
• Their color selection tool (such as Photoshop) only use RGB value (hexacode or number), it doesn't use CSS color names.
• Web creator want to display dynamic changing color like color animation or color gradient which must use additional programming logic and need to use RGB values.

Do you need to see the gradient colors of 2 colors? if so then please use this simple tool to see the gradient color and the MIDDLE color, to use this simple tool please type-in 2 colors, 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, 0.7)'
• HSL or HSLA format, eg: 'hsl(127, 50%, 100%)' or 'hsla(127, 70%, 45%, 0.4)'

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 = computedStyleColor.substr(computedStyleColor.indexOf('(') + 1);
  colors = colors.substr(0, colors.length - 1); // remove ')', 
  
  // convert to array
  colors = colors.split(',').map(value => parseInt(value));
  if(colors.length > 3) {
    // rgba(..) has 4 elements, so remove the last element (alpha channel)
    colors.splice(3, 1);
  }

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

  return colors;
}  

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