Pick a colour

<div class="demo demo--wide">
  <div class="demo-split">
    <div>
      <label class="demo-label" for="brand">Brand colour</label>
      <input id="brand" name="brand" value="#3a86ff">
      <p class="demo-hint">Tab into the square and use the arrow keys. Shift moves ten.</p>
    </div>
    <div class="demo-preview" id="preview">
      <p class="demo-preview-title">Ship it</p>
      <p class="demo-preview-body">Body text on the colour you chose, so you can see what it does before anyone else has to.</p>
      <button class="demo-preview-btn" type="button">Continue</button>
    </div>
  </div>
  <p class="demo-out" id="out"></p>
</div>

import { createColorPicker, parse, contrast, rate, readableOn, format } from 'https://devix.pk/cdn/oss/color-picker@1.0.0/index.js';

const preview = document.getElementById('preview');
const out = document.getElementById('out');

const picker = createColorPicker(document.getElementById('brand'), {
  format: 'oklch',
  contrastAgainst: '#ffffff',
  swatches: ['#3a86ff', '#8338ec', '#ff006e', '#fb5607', '#ffbe0b', '#06d6a0', '#18181b'],
  onChange: (value) => show(value),
});

function show(value) {
  const rgb = picker.getRgb();
  preview.style.background = value;
  // Whichever of black or white reads better on it — the same call the thumb makes.
  preview.style.color = format(readableOn(rgb), 'hex');

  const ratio = contrast(rgb, parse('#ffffff'));
  out.textContent = `${picker.getValue('hex')} · ${picker.getValue('oklch')} · ${ratio} : 1 on white (${rate(ratio).toUpperCase().replace('-', ' ')})`;
}

show(picker.getValue());

@import url('https://devix.pk/cdn/oss/color-picker@1.0.0/color-picker.min.css');

.demo-split { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.demo-split > div:first-child { flex: 0 0 auto; }
.demo-label { display: block; margin-bottom: 8px; }
.demo-hint { margin-top: 10px; max-width: 240px; }
.demo-preview {
  flex: 1 1 220px;
  min-width: 220px;
  padding: 20px;
  border-radius: 12px;
  background: #3a86ff;
  color: #fff;
}
.demo-preview-title { margin: 0 0 6px; font-size: 18px; font-weight: 650; }
.demo-preview-body { margin: 0 0 14px; font-size: 13px; opacity: 0.9; }
.demo-preview-btn {
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#out { min-height: 2.2em; font-variant-numeric: tabular-nums; }