먼셀 표색계

<div class="wrap">
  <div class="head"><b id="notation">5R</b><span class="cap">Value ↓ · Chroma →</span></div>
  <div class="grid" id="grid"></div>
</div>

.wrap{width:min(400px,90vmin);display:grid;gap:8px;justify-items:center}
.head{display:flex;justify-content:space-between;align-items:baseline;width:100%}
.head b{font:800 clamp(14px,3.6vmin,18px)/1 ui-monospace,monospace;color:var(--fg)}
.head .cap{font:600 clamp(8px,2.2vmin,10px)/1 system-ui;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(6,clamp(13px,8.4vmin,36px));grid-auto-rows:clamp(13px,8.4vmin,36px);gap:3px;justify-content:center}
.grid i{display:block;width:100%;height:100%;border-radius:4px;border:1px solid var(--line)}

var HUE_NAMES = ['R', 'YR', 'Y', 'GY', 'G', 'BG', 'B', 'PB', 'P', 'RP'];
var HUE_DEG = [0, 30, 60, 100, 140, 180, 220, 260, 300, 330];
var VALUES = [8, 7, 6, 5, 4, 3, 2];
var CHROMAS = [2, 4, 6, 8, 10, 12];
var hueIdx = 0;
var notation = document.getElementById('notation'), grid = document.getElementById('grid');
var ROWS = VALUES.length, COLS = CHROMAS.length;
grid.innerHTML = Array.from({ length: ROWS * COLS }).map(function (_, i) { return '<i id="g' + i + '"></i>'; }).join('');
var cells = Array.from({ length: ROWS * COLS }).map(function (_, i) { return document.getElementById('g' + i); });
function render() {
  var h = HUE_DEG[hueIdx];
  VALUES.forEach(function (v, r) {
    var l = v * 10;
    CHROMAS.forEach(function (c, cIdx) {
      var s = Math.min(100, c * 8);
      cells[r * COLS + cIdx].style.background = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
    });
  });
  notation.textContent = '5' + HUE_NAMES[hueIdx];
}
render();
setInterval(function () { hueIdx = (hueIdx + 1) % HUE_NAMES.length; render(); }, 2200);