OKLCH

by vovkasolovev

HTML

<field><input id="color1" value="0077ff"><input id="step_l" value="2"><br><input id="step_c" value="1"><input id="color2" value="ff7700"></field>
<div id="podhod_oklch_palette" class="app"></div>
<div id="tmp" class="app"></div>
<div id="app_hsl" class="app"></div>
<h2>OKLCH</h2>
<div id="app_oklch" class="app"></div>

CSS

.app {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
  margin-bottom: 1rem;
}

.col-swatch {
  flex: 1 1 2rem;
  height: 2rem;
  background-color: var(--col-swatch);
}

JavaScript

import {html, render} from "https://cdn.skypack.dev/[email protected]";
import {map} from "https://cdn.skypack.dev/[email protected]/directives/map.js";
import * as _ from "https://cdn.skypack.dev/[email protected]";
import * as chroma from "https://cdn.skypack.dev/[email protected]";

const colors = _.range(0, 361, 15)

function renderColors(colMap, el) {
  const tmpl = html`${map(colors, col => html`<div class="col-swatch" style="--col-swatch: ${colMap(col)}"></div>`)}`
  render(tmpl, el)
}

function renderPalette(colMap, el) {
  const tmp2 = html`${map(colors, col => html`<div class="col-swatch" style="--col-swatch: ${colMap(col)}">${colMap(col)}</div>`)}`
  render(tmp2, el)
}

const tmpl = html`${map(colors, col => html`<div class="col-swatch" style="--col-swatch: hsl(${col}deg, 100%, 50%);"></div>`)}`

//renderColors(hue => `hsl(${hue}deg, 100%, 50%)`, document.getElementById('app_hsl'))
renderPalette(hue => chroma.oklch(0.5967, 0.221, hue).css(), document.getElementById('podhod_oklch_palette'))
render(hue => chroma.oklch(0.5967, 0.221, hue).css(), tmp)
//render(chroma.scale(['#0077ff','#ff7700']).mode('lch').colors(6),tmp )

renderColors(hue => chroma.oklch(0.5967, 0.221, hue).css(), document.getElementById('app_oklch'))