Вот HTML код https://text-host.ru/tsveta-ral-v-html-i-js
К таблице можно приделать заголовок:
<thead> <tr>
<th style="height: 1.2em;">Жёлтые тона</th><th style="height: 1.2em;">Оранжевые тона</th><th style="height: 1.2em;">Красные тона</th><th style="height: 1.2em;">Фиолетовые тона</th><th style="height: 1.2em;">Синие тона</th><th style="height: 1.2em;">Зелёные тона</th><th style="height: 1.2em;">Серые тона</th><th style="height: 1.2em;">Коричневые тона</th><th style="height: 1.2em;">Чёрные и белые тона</th> </tr></thead>
Таблица была сгенерирована таблицей в гугл-диске, таблицу генерации кода выгрузил в файл https://wdfiles.ru/MPnz (что бы лишний раз не палить свой email, если влом от нулей чистить файл, то наверно могу передать копию через сосиску), не знаю будет ли она работать у вас после загрузки.
Код JavaScript под таблицей цветов:
<div id='color-info' style='display: none;'>
<a name='color-info-block'></a>
<hr id='simple-line'>
<div id='color-name' style='font-size: 24px;'></div>
<div id='large-color-box' style='height: 50vh; cursor: pointer; position: relative;' onclick='window.location.href = "#ral";'>
<div id="up-arrow" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px;">⬆️</div>
</div>
<div id='color-name-duplicate' style='font-size: 24px;'></div> <!-- Дублирование названия цвета под большим прямоугольником-->
<hr id='simple-line-2'>
</div>
<script>
let isFirstClick = true;
function showColor(colorCode, colorName) {
if (isFirstClick) {
document.getElementById('simple-line').style.display = 'block';
document.getElementById('simple-line-2').style.display = 'block';
isFirstClick = false;
}
document.getElementById('color-name').innerHTML = colorName;
document.getElementById('color-name-duplicate').innerHTML = colorName; // Установка названия цвета под большим прямоугольником
document.getElementById('large-color-box').style.backgroundColor = colorCode;
document.getElementById('color-info').style.display = 'block';
}
</script>
Может кому то пригодиться. Поскольку используется таблица, то вёрстка адаптивная.
Чуть не забыл, над таблицей следует разместить метку #ral
