Tinta Color Studio: Turn One Brand Color Into an Accessible Palette

// js/color-core.js — WCAG 2.2 ratio + nearest passing color
/** WCAG 2.x contrast ratio between two hex colors, 1–21. */
function contrast(a, b) {
  var la = luminance(a);
  var lb = luminance(b);
  var hi = Math.max(la, lb);
  var lo = Math.min(la, lb);
  return (hi + 0.05) / (lo + 0.05);
}

/**
 * Smallest lightness change to `fg` (keeping hue and chroma) that reaches
 * `target` contrast against `bg`. Tries the darker and lighter directions and
 * returns the closer passing color, or null if neither can pass.
 */
function fixContrast(fg, bg, target) {
  target = target || WCAG.AA;
  if (contrast(fg, bg) >= target) return normalizeHex(fg);
  var o = hexToOklch(fg);
  if (!o) return null;

  function search(toward) {
    var end = toward === 'dark' ? 0 : 1;
    if (contrast(oklchToHex(end, o.c, o.h), bg) < target) return null;
    var lo = o.l;
    var hi = end;
    for (var i = 0; i < 30; i++) {
      var mid = (lo + hi) / 2;
      if (contrast(oklchToHex(mid, o.c, o.h), bg) >= target) hi = mid; else lo = mid;
    }
    var out = oklchToHex(hi, o.c, o.h);
    return contrast(out, bg) >= target ? { hex: out, shift: Math.abs(hi - o.l) } : null;
  }

  var dark = search('dark');
  var light = search('light');
  if (dark && light) return dark.shift <= light.shift ? dark.hex : light.hex;
  if (dark) return dark.hex;
  if (light) return light.hex;
  return null;
}

// js/color-core.js — 11-step OKLCH scale with the brand hex pinned
/**
 * Build an 11-step tonal scale from one brand color.
 * The step whose lightness is closest to the brand keeps the exact brand hex,
 * so "primary-600" (or whichever) is precisely the color the client gave you.
 *
 * options.neutral  → low-chroma grey tinted toward the brand hue
 * options.anchor   → false to skip pinning the exact brand color
 * Returns [{ step, hex, anchor }].
 */
function buildScale(hex, options) {
  options = options || {};
  var base = hexToOklch(hex);
  if (!base) throw new Error('Invalid color: ' + hex);
  var peak = options.neutral ? Math.min(0.022, base.c * 0.18 + 0.006) : Math.max(base.c, 0.02);

  var anchorIndex = -1;
  if (!options.neutral && options.anchor !== false) {
    var best = Infinity;
    LIGHTNESS.forEach(function (L, i) {
      var d = Math.abs(L - base.l);
      if (d < best) { best = d; anchorIndex = i; }
    });
  }

  return STEPS.map(function (step, i) {
    if (i === anchorIndex) return { step: step, hex: normalizeHex(hex), anchor: true };
    // Slight hue drift toward warmer darks / cooler lights keeps scales from looking flat.
    var hue = options.neutral ? base.h : (base.h + (i - 5) * -0.6 + 360) % 360;
    return { step: step, hex: oklchToHex(LIGHTNESS[i], peak * CHROMA_CURVE[i], hue), anchor: false };
  });
}

// Browser: <script src="js/color-core.js"></script> → window.TintaCore
// Node:    const T = require('./js/color-core.js');
const T = window.TintaCore;

const primary = T.buildScale('#0e7c66');          // [{ step: 50, hex: '#eff9f6' }, …]
const neutral = T.buildScale('#0e7c66', { neutral: true });

T.contrast('#ffffff', '#0e7c66');                 // 5.13 → passes AA
T.fixContrast('#e0782b', '#ffffff', 4.5);         // '#bc5b00' (4.53:1, same hue)
T.simulate('#e0782b', 'deuteranopia');            // how it looks without green cones

const css = T.exportPalettes(
  [{ name: 'Primary', scale: primary }, { name: 'Neutral', scale: neutral }],
  'css'                                           // or 'tailwind' | 'scss' | 'json'
);
// :root { --primary-50: #eff9f6; … --neutral-950: #171d1b; }