Помощь с таблицей

[nonameii3ii]

Есть вот такая таблица,которая выводит на екран рандомные цвета,вопрос как можно сделать чтобы внутри клетки был цвет(на фоне),и написано было расшифровку например:фон синий и написано #f0f8fff.Вот demo: https://codepen.io/eva-rosalene/pen/NWXLmva

function getRandomColor() {
  const r = String(Math.round(255 * Math.random())).padStart(2, '0');
  const g = String(Math.round(255 * Math.random())).padStart(2, '0');
  const b = String(Math.round(255 * Math.random())).padStart(2, '0');
  return `#${r}${g}${b}`;
}
 
document.write('<table class="main"><tbody>');
for (let i = 0; i < 10; ++i) {
  document.write('<tr>');
  for (let j = 0; j < 10; ++j) {
    document.write(`<td bgcolor="${getRandomColor()}"></td>`)
  }
  document.write('</tr>');
}
document.write('</table></tbody>')

.main td {
  width: 20px;
  height: 20px;
}

[BDA]

На темном фоне есть проблемы с читаемостью:

function getRandomColor() {
  const r = Math.round(255 * Math.random()).toString(16).padStart(2, '0');
  const g = Math.round(255 * Math.random()).toString(16).padStart(2, '0');
  const b = Math.round(255 * Math.random()).toString(16).padStart(2, '0');
  return `#${r}${g}${b}`;
}

document.write('<table class="main"><tbody>');
for (let i = 0; i < 10; ++i) {
  document.write('<tr>');
  for (let j = 0; j < 10; ++j) {
    const color = getRandomColor();
    document.write(`<td bgcolor="${color}">${color}</td>`)
  }
  document.write('</tr>');
}
document.write('</table></tbody>')

[nonameii3ii]

Спасибо большое за быструю помощь)