JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace.js"></script>

<script type="module" defer>
  import Color from "https://colorjs.io/dist/color.js";

    const fg_lightness = document.getElementById('fg_lightness');
    const fg_chroma = document.getElementById('fg_chroma');
    const fg_hue = document.getElementById('fg_hue');
    const bg_hue = document.getElementById('bg_hue');
    const bg_saturation = document.getElementById('bg_saturation');
    const bg_lightness = document.getElementById('bg_lightness');
    const rec2020 = document.getElementById('rec2020');
    const p3 = document.getElementById('p3');
    const srgb = document.getElementById('srgb');
    const oklch = document.getElementById('oklch');
    const lch = document.getElementById('lch');
    const apca = document.getElementById('apca');
    const wcag = document.getElementById('wcag');
    const oklab_diff = document.getElementById('oklab_diff');
    const lab_diff = document.getElementById('lab_diff');
    const oklab_ratio = document.getElementById('oklab_ratio');
    const lab_ratio = document.getElementById('lab_ratio');

    const abs = Math.abs;

    function ratio(v1, v2) {
        return Math.max(v1, v2) / Math.min(v1, v2);
    }

    function showColorValue(element, color, space) {
        const colorInSpace = color.to(space);
        element.innerText = colorInSpace.toString({ inGamut: false, precision: 3 });
        element.classList.toggle('warning', !colorInSpace.inGamut());
    }

    function updateColors() {
        const fg = new Color('oklch', [fg_lightness.value, fg_chroma.value, fg_hue.value]);
        const bg = new Color('okhsl', [bg_hue.value, bg_saturation.value, bg_lightness.value]);
        document.body.style.setProperty('--bg', bg.display());
        document.body.style.setProperty('--fg',...

CSS

body {
   max-width: 30em;
 }

 h1,
 h2,
 h3 {
   color: var(--fg, black);
   background-color: var(--bg, white);
 }

 dd.warning::after {
   content: " ⚠️ Outside this gamut";
 }

 dl {
   display: grid;
   grid-template-columns: max-content auto;
 }

 dt {
   grid-column-start: 1;
 }

 dd {
   grid-column-start: 2;
 }