When the colors returned from the server are not easily interpretable (such as Amber), you may need to include some basic CSS. I have placed it within the <head> section for your convenience, but feel free to transfer it to an external CSS file, especially if there are numerous colors.
If you have the ability to modify the markup, simply add the color provided by the server as a class on that particular cell.
<html>
<head>
<style>
.Amber { background: #ffbf00; }
.Green { background: #008000; }
.Red { background: #f00; }
</style>
</head>
<body>
<table>
<tr>
<th>Risk Category</th>
</tr>
<tr>
<td class="Amber" colspan="1">Amber</td>
</tr>
</table>
</body>
</html>
If modifying the markup is not possible for any reason, you will need to iterate through the table cells using JavaScript and assign classes accordingly. You can get started with something like this:
var cells = document.querySelectorAll('td');
for( i = 0; i < cells.length; i++ ){
text = cells[i].innerText || cells[i].textContent;
cells[i].className = text;
}
To bring everything together, here's a code snippet demonstrating how to dynamically add classes to the cells based on the color retrieved from the server using JavaScript.
var cells = document.querySelectorAll('td');
for( i = 0; i < cells.length; i++ ){
text = cells[i].innerText || cells[i].textContent;
cells[i].className = text;
}
.Amber { background: #ffbf00; }
.Green { background: #008000; }
.Red { background: #f00; }
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Risk Category</th>
</tr>
<tr>
<td colspan="1">Amber</td>
</tr>
<tr>
<td colspan="1">Green</td>
</tr>
<tr>
<td colspan="1">Red</td>
</tr>
</table>
</body>
</html>