JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<label>From: <input type="color" name="from" value="#0000ff"></label>
<label>To: <input type="color" name="to" value="#ffffff"></label>

<h2>sRGB:</h2>
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

<h2>OKLab:</h2>
<ul class="oklab">
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

:root {
  --color-1: #ffd8af;
  --color-2: #f7f6f0;
  --color-3: #bbf1ba;
  --color-4: #ffbfc5;
}

html {
  background: radial-gradient(var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
  background-size: cover;
  border: solid red 1px;
  min-height: 100vh;
}

body { background: transparent; }

html
{
  font-family: sans-serif;
  --from: #0000ff;
  --to: #ffffff;
}

label
{
  display: block;
}

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid #34c9eb;
  text-align: center;
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--from) 0%, var(--to));
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--from) 25%, var(--to));
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--from) 50%, var(--to));
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--from) 75%, var(--to));
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--from) 100%, var(--to));
}

li:nth-child(6) {
  background-color: color-mix(in srgb, #00f, white);
}





.oklab li:nth-child(1) {
  background-color: color-mix(in oklab, var(--from) 0%, var(--to));
}

.oklab li:nth-child(2) {
  background-color: color-mix(in oklab, var(--from) 25%, var(--to));
}

.oklab li:nth-child(3) {
  background-color: color-mix(in oklab, var(--from) 50%, var(--to));
}

.oklab li:nth-child(4) {
  background-color: color-mix(in oklab, var(--from) 75%, var(--to));
}

.oklab li:nth-child(5) {
  background-color: color-mix(in oklab, var(--from) 100%, var(--to));
}

li:nth-child(6) {
  background-color: color-mix(in oklab, #00f, white);
}

JavaScript

function setColors()
{
  console.log("setting colors");
	let from_e = document.querySelector("input[name=from]");
	let to_e = document.querySelector("input[name=to]");
  document.documentElement.style.setProperty("--from", from_e.value);
  document.documentElement.style.setProperty("--to", to_e.value);
}

document.addEventListener("change", setColors);