web safe color by javascript

Question

enter image description here

I want to show a table with all web safe color with its value by using javascript. My function does not work well. First, it jumps to another page, and I don't know how to show the color value

function display() {

    document.write("<table><tr>");   

var hexarr = new Array("00", "33", "66", "99", "CC", "FF"); 
var currcolor = "#";  

for(red=0; red<6; red++){ 
  for(green=0; green<6; green++){ 
    for(blue=0; blue<6; blue++){ 
      currcolor = "#" + hexarr[red] + hexarr[blue] + hexarr[green]; 
      document.write("<td bgcolor=" + currcolor + " title=" + currcolor + " 
height=100></td>"); 
    } 
    document.write("</tr><tr>"); 
  } 
} 

document.write("</tr></table>");



}

You might want to look at this [discussion on `document.write`](https://stackoverflow.com/a/27531116/1243641) and its alternatives. Your looping looks fine, but that way of writing content has fallen out of fashion for some pretty good reasons. — Scott Sauyet, Mar 17 '19 at 01:14

score 1 · Accepted Answer · answered Mar 17 '19 at 04:39

Wow old school all round.

Don't use document.write. Its designed to create the markup on the fly and is very inefficient.

You can create a table using table = document.createElement("table") and add rows with row = table.insertRow() and add cells to rows with cell = row.insertCell(). When the table is complete add it to the document with document.body.appendChild(table) or to a containing element tableContainer.appendChild(table)

To create an arrays, use array literals. Eg hex = ["00", "33", "66", "99", "Cc", "Ff"]

To add the color as text in the table cells you just set the cells textContent property. However as you have a large range of colors you will need to ensure that the color of the text does not match the color of the background.

You can do this by adding the red green and blue values. If they add to under a threshold set the text color to white, else to black. Best to use a bold font. eg "arial black"

The example bumps the rgb values for the text color test to account for human perceptual color sensitivity (its a rough estimate)

function webSaveColorTable() {    
    const table = document.createElement("table");
    const hex = [0, 0x33, 0x66, 0x99, 0xCC, 0xFF];
    const toHex = val => val.toString(16).toUpperCase().padStart(2,"0");
    const width = 100, height = 55;
    for (const red of hex) {
       for (const green of hex) {
           const row = table.insertRow();
           for (const blue of hex) {
               const colBg = "#" + toHex(red) + toHex(green) + toHex(blue);
               const c = Object.assign(row.insertCell(), {textContent: colBg, width, height});
               Object.assign(c.style, {
                   backgroundColor: colBg,
                   color: red * 0.2 + green * 0.7 + blue * 0.1 > 128 ? "#000" : "#fff"
               });
           }
        }
     }
    document.body.appendChild(table);
} 

webSaveColorTable();

body {
   font-family: arial black;
}
td {
   text-align: center;
}

web safe color by javascript

1 Answers1