Color theory

:root {
  /* c 0.11 keeps every rotated hue inside sRGB */
  --base: oklch(0.6 0.11 260);
  --complement: oklch(from var(--base) l c calc(h + 180));
  --split-a: oklch(from var(--base) l c calc(h + 150));
  --split-b: oklch(from var(--base) l c calc(h + 210));
  --triad-a: oklch(from var(--base) l c calc(h + 120));
  --triad-b: oklch(from var(--base) l c calc(h + 240));
}

:root {
  --blue-50: oklch(0.97 0.01 260);   /* #f1f5fc */
  --blue-100: oklch(0.93 0.02 260);  /* #e0e8f6 */
  --blue-200: oklch(0.87 0.05 260);  /* #c1d5f6 */
  --blue-300: oklch(0.8 0.09 260);   /* #9cbff8 */
  --blue-400: oklch(0.71 0.13 260);  /* #70a1f2 */
  --blue-500: oklch(0.62 0.18 260);  /* #3f82f0 */
  --blue-600: oklch(0.55 0.2 260);   /* #1c69e3 */
  --blue-700: oklch(0.48 0.17 260);  /* #1957bb */
  --blue-800: oklch(0.41 0.15 260);  /* #0f449a */
  --blue-900: oklch(0.35 0.12 260);  /* #0f3778 */
  --blue-950: oklch(0.27 0.09 260);  /* #082451 */
}

:root {
  --gray-50: oklch(0.985 0.005 260);
  --gray-100: oklch(0.97 0.005 260);
  --gray-200: oklch(0.922 0.005 260);
  --gray-300: oklch(0.87 0.005 260);
  --gray-400: oklch(0.708 0.005 260);
  --gray-500: oklch(0.556 0.005 260);   /* 4.7:1 on white */
  --gray-600: oklch(0.439 0.005 260);
  --gray-700: oklch(0.371 0.005 260);
  --gray-800: oklch(0.269 0.005 260);
  --gray-900: oklch(0.205 0.005 260);
  --gray-950: oklch(0.145 0.005 260);
}

/* color-blind-safe categorical palette */
:root {
  --cat-1: #e69f00; /* orange */
  --cat-2: #56b4e9; /* sky blue */
  --cat-3: #009e73; /* bluish green */
  --cat-4: #f0e442; /* yellow */
  --cat-5: #0072b2; /* blue */
  --cat-6: #d55e00; /* vermillion */
  --cat-7: #cc79a7; /* reddish purple */
  --cat-8: #000000; /* black */
}

.tag {
  /* tinted background from one token, 12% of the accent */
  background: color-mix(in oklch, var(--accent) 12%,
    transparent);
  color: var(--accent);
}
 
.overlay {
  /* same color, new alpha */
  background: oklch(from var(--gray-950) l c h / 60%);
}
 
.badge {
  background: var(--badge-bg);
  color: contrast-color(var(--badge-bg));
}

<style>
  .chips { --c: oklch(0.55 0.2 260);
    display: flex; flex-wrap: wrap; gap: 6px; }
  .chips span { padding: 6px 10px; border-radius: 4px; }
  .t12 { background: color-mix(in oklch, var(--c) 12%,
    transparent); }
  .t40 { background: color-mix(in oklch, var(--c) 40%,
    transparent); }
  .base { background: var(--c); color: white; }
  .dark { background: oklch(from var(--c)
    calc(l - 0.15) c h); color: white; }
  .half { background: oklch(from var(--c) l c h / 50%); }
  .comp { background: oklch(from var(--c) l 0.11
    calc(h + 180)); color: white; }
</style>
<div class="chips">
  <span class="t12">mix 12%</span>
  <span class="t40">mix 40%</span>
  <span class="base">base</span>
  <span class="dark">l - 0.15</span>
  <span class="half">alpha 50%</span>
  <span class="comp">h + 180</span>
</div>

<style>
  .row { display: grid; grid-template-columns: 6ch 1fr;
    gap: 8px; align-items: center; margin: 0 0 8px; }
  .row i { height: 26px; border-radius: 4px; }
  .srgb { background: linear-gradient(to right in srgb,
    #0050ff, #ffe600); }
  .oklab { background: linear-gradient(to right in oklab,
    #0050ff, #ffe600); }
  .oklch { background: linear-gradient(to right in oklch,
    #0050ff, #ffe600); }
</style>
<p class="row">srgb <i class="srgb"></i></p>
<p class="row">oklab <i class="oklab"></i></p>
<p class="row">oklch <i class="oklch"></i></p>

<style>
  .card { padding: 10px 12px; border-radius: 6px;
    background: light-dark(#f8fafe, #090a0c);
    color: light-dark(#090a0c, #f3f5f9);
    border: 1px solid light-dark(#e3e5e9, #252629); }
  .card a { color: light-dark(#1c69e3, #70a1f2); }
  .light { color-scheme: light; }
  .dark { color-scheme: dark; }
  .pair { display: grid; gap: 8px;
    grid-template-columns: 1fr 1fr; }
</style>
<div class="pair">
  <div class="card light">Light: <a href="#">link</a></div>
  <div class="card dark">Dark: <a href="#">link</a></div>
</div>

:root {
  --brand-h: 260;
  --brand-50: oklch(0.97 0.01 var(--brand-h));
  --brand-100: oklch(0.93 0.02 var(--brand-h));
  --brand-200: oklch(0.87 0.05 var(--brand-h));
  --brand-300: oklch(0.8 0.09 var(--brand-h));
  --brand-400: oklch(0.71 0.13 var(--brand-h));
  --brand-500: oklch(0.62 0.18 var(--brand-h));
  --brand-600: oklch(0.55 0.2 var(--brand-h));
  --brand-700: oklch(0.48 0.17 var(--brand-h));
  --brand-800: oklch(0.41 0.15 var(--brand-h));
  --brand-900: oklch(0.35 0.12 var(--brand-h));
  --brand-950: oklch(0.27 0.09 var(--brand-h));
}
 
.theme-green { --brand-h: 150; }

.btn {
  --bg: var(--brand-600);
  background: var(--bg);
  color: white;
}
 
.btn:hover {
  background: oklch(from var(--bg) calc(l - 0.06) c h);
}
 
.btn:active {
  background: oklch(from var(--bg) calc(l - 0.12) c h);
}
 
.btn:disabled {
  background: oklch(from var(--bg) l calc(c * 0.3) h / 50%);
}

// sRGB channel (0-255) to linear light, per WCAG 2.2
const linear = (c8: number): number => {
  const c = c8 / 255;
  return c <= 0.04045
    ? c / 12.92
    : ((c + 0.055) / 1.055) ** 2.4;
};
 
export function luminance(hex: string): number {
  const m = /^#?([\da-f]{6})$/i.exec(hex);
  if (!m?.[1]) throw new Error(`Not a 6-digit hex: ${hex}`);
  const n = Number.parseInt(m[1], 16);
  const r = linear((n >> 16) & 255);
  const g = linear((n >> 8) & 255);
  const b = linear(n & 255);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
 
export function contrast(a: string, b: string): number {
  const [la, lb] = [luminance(a), luminance(b)];
  const hi = Math.max(la, lb);
  const lo = Math.min(la, lb);
  return (hi + 0.05) / (lo + 0.05);
}

import { contrast } from "./contrast.ts";
 
type Level = "AA" | "AAA";
 
const MIN: Record<Level, { text: number; large: number }> = {
  AA: { text: 4.5, large: 3 },
  AAA: { text: 7, large: 4.5 },
};
 
export const passes = (
  fg: string,
  bg: string,
  level: Level = "AA",
  large = false,
) => {
  const min = MIN[level][large ? "large" : "text"];
  return contrast(fg, bg) >= min;
};
 
export const textOn = (bg: string): "#000000" | "#ffffff" =>
  contrast("#000000", bg) >= contrast("#ffffff", bg)
    ? "#000000"
    : "#ffffff";
 
passes("#1c69e3", "#ffffff");       // true  (5.02:1)
passes("#3f82f0", "#ffffff");       // false (3.70:1)
textOn("#3f82f0");                  // "#000000" (5.66:1)

import { formatHex, inGamut, wcagContrast } from "culori";
 
const inSrgb = inGamut("rgb");
const hue = 260;
const steps = [
  [50, 0.97, 0.01], [100, 0.93, 0.02], [200, 0.87, 0.05],
  [300, 0.8, 0.09], [400, 0.71, 0.13], [500, 0.62, 0.18],
  [600, 0.55, 0.2], [700, 0.48, 0.17], [800, 0.41, 0.15],
  [900, 0.35, 0.12], [950, 0.27, 0.09],
] as const;
 
const rows = steps.map(([step, l, c]) => {
  const color = { mode: "oklch", l, c, h: hue } as const;
  return {
    step,
    hex: formatHex(color),
    srgb: inSrgb(color),
    onWhite: wcagContrast(color, "#ffffff").toFixed(2),
  };
});
 
console.table(rows);   // bun audit-scale.ts

:root {
  color-scheme: light dark;   /* follow the OS */
  --bg: light-dark(var(--gray-50), var(--gray-950));
  --surface: light-dark(white, var(--gray-900));
  --fg: light-dark(var(--gray-950), var(--gray-100));
  --fg-muted: light-dark(var(--gray-600), var(--gray-400));
  --border: light-dark(var(--gray-200), var(--gray-800));
  --accent: light-dark(var(--blue-600), var(--blue-400));
  --on-accent: light-dark(white, var(--gray-950));
}
 
/* a manual toggle overrides the OS */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
 
body { background: var(--bg); color: var(--fg); }

:root {
  --brand: oklch(0.55 0.2 260);    /* in sRGB */
}
 
@media (color-gamut: p3) {
  :root {
    --brand: oklch(0.55 0.245 260); /* P3 only */
  }
}