Color interpolation: sRGB vs OKLCH

HTML

<div class="container">
  <div class="card">
    <h2>1. Standard sRGB Interpolation</h2>
    <div class="color-box rgb-box"></div>
    <p>Interpolates in sRGB: Passes through <strong>rgb(128, 128, 128)</strong> (muddy gray) at 50%.</p>
  </div>

  <div class="card">
    <h2>2. OKLCH Space Interpolation</h2>
    <div class="color-box oklch-box"></div>
    <p>Interpolates along the OKLCH hue arc: Preserves saturation and vibrancy throughout.</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 800px;
  width: 100%;
}

.card {
  flex: 1;
  min-width: 280px;
  background: #1e293b;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  text-align: center;
}

h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 16px;
}

p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-top: 16px;
}

.color-box {
  width: 100%;
  height: 160px;
  border-radius: 8px;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

/* -------------------------------------------------------------
 * 1. RGB Interpolation
 * Exact colors: Cyan rgb(0, 255, 255) <-> Red rgb(255, 0, 0)
 * ------------------------------------------------------------- */
.rgb-box {
  animation-name: animate-srgb;
}

@keyframes animate-srgb {
  0% {
    background-color: rgb(0, 255, 255);
  }
  100% {
    background-color: rgb(255, 0, 0);
  }
}

/* -------------------------------------------------------------
 * 2. OKLCH Interpolation
 * Exact conversion of pure sRGB Red & Cyan into OKLCH values:
 * Cyan: oklch(0.905 0.163 194.7)
 * Red:  oklch(0.628 0.258 29.23)
 * ------------------------------------------------------------- */
.oklch-box {
  animation-name: animate-oklch;
}

/* CSS Color Level 4 allows specifying interpolation space inside @keyframes */
@keyframes animate-oklch {
  0% {
    background-color: oklch(0.905 0.163 194.7);
  }
  100% {
    background-color: oklch(0.628 0.258 29.23);
  }
}

/* Modern browsers support...