보석 톤

<div class="wrap">
  <div class="sws" id="sws"></div>
  <div class="card" id="card">
    <b id="gname">EMERALD</b>
    <span id="ghex">#1c8c5e</span>
  </div>
</div>

.wrap{width:min(440px,92%);display:grid;gap:clamp(12px,3.2vmin,20px);justify-items:center}
.sws{display:flex;gap:clamp(6px,1.8vmin,10px)}
.sws i{display:block;width:clamp(20px,6vmin,30px);height:clamp(20px,6vmin,30px);border-radius:7px;border:1px solid rgba(255,255,255,.15);transition:transform .3s,outline-color .3s;outline:2px solid transparent;outline-offset:2px}
.card{padding:clamp(10px,2.8vmin,16px) clamp(18px,4.6vmin,26px);border-radius:14px;background:#14141c;display:grid;gap:4px;justify-items:center;transition:box-shadow .4s}
.card b{font:800 clamp(13px,3.4vmin,16px)/1 system-ui;letter-spacing:.06em;color:#f4f4f6}
.card span{font:700 clamp(9px,2.4vmin,11px)/1 ui-monospace,monospace;color:#9a9aa6}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  var k = function (n) { return (n + h / 30) % 12; };
  var a = s * Math.min(l, 1 - l);
  var f = function (n) { return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
  var hex = function (x) { return Math.round(x * 255).toString(16).padStart(2, '0'); };
  return '#' + hex(f(0)) + hex(f(8)) + hex(f(4));
}
var GEMS = [{ name: 'EMERALD', h: 150 }, { name: 'SAPPHIRE', h: 215 }, { name: 'RUBY', h: 350 }, { name: 'AMETHYST', h: 275 }, { name: 'TOPAZ', h: 40 }];
var S = 75, L = 35, active = 0;
var sws = document.getElementById('sws');
sws.innerHTML = GEMS.map(function (_, i) { return '<i id="c' + i + '"></i>'; }).join('');
var cells = GEMS.map(function (_, i) { return document.getElementById('c' + i); });
var hexes = GEMS.map(function (g) { return hslToHex(g.h, S, L); });
var gname = document.getElementById('gname'), ghex = document.getElementById('ghex'), card = document.getElementById('card');
function render() {
  cells.forEach(function (el, i) {
    el.style.background = hexes[i];
    el.style.outlineColor = i === active ? hexes[i] : 'transparent';
    el.style.transform = i === active ? 'scale(1.15)' : 'scale(1)';
  });
  gname.textContent = GEMS[active].name;
  ghex.textContent = hexes[active];
  card.style.boxShadow = '0 0 0 1px ' + hexes[active] + '55, 0 16px 34px ' + hexes[active] + '3a';
}
render();
setInterval(function () { active = (active + 1) % GEMS.length; render(); }, 2000);