<div class="container">
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-color: color(display-p3 1 0.5 0);
  }
}
    </style>
  </div>
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-color: oklch(61.88% 0.286 342.4);
  }
}
    </style>
  </div>
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-color: oklab(0.73 0.15 0.16);
  }
}
    </style>
  </div>
  
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-image: linear-gradient(to right in oklch, red, blue)
  }
}
    </style>
  </div>
  
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-image: linear-gradient(to right in oklab, red, blue)
  }
}
    </style>
  </div>
  
  <div class="swatch">
    <style contenteditable>
@scope {
  :scope {
    background-image: linear-gradient(to right in srgb, red, blue)
  }
}
    </style>
  </div>
</div>

.swatch {
  padding: 1rem;
  color: white;
  text-shadow: 0 0 6px black;
  style {
    display: block;
    white-space: pre-wrap;
    font: 100% monospace;
  }
}

body {
  margin: 0;
}
.container {
  display: grid;
  gap: 1rem;
}