Reactで、選んだ色から補色や類似色の配色を作る方法

export type HSL = { h: number; s: number; l: number }; // h: 0〜360未満、s と l: 0〜100

// 「#rrggbb」を HSL にする。丸めずに小数のまま返す
export function hexToHsl(hex: string): HSL {
  const n = parseInt(hex.slice(1), 16);
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  const d = max - min;
  if (d === 0) return { h: 0, s: 0, l: l * 100 }; // 灰色・白・黒には色相がない
  const s = d / (1 - Math.abs(2 * l - 1));
  let h: number;
  if (max === r) h = ((g - b) / d) % 6;
  else if (max === g) h = (b - r) / d + 2;
  else h = (r - g) / d + 4;
  return { h: normalizeHue(h * 60), s: s * 100, l: l * 100 };
}

// HSL を、色の input と同じ小文字の「#rrggbb」にする
export function hslToHex({ h, s, l }: HSL): string {
  const sat = s / 100;
  const lig = l / 100;
  const f = (k: number) => {
    const t = (k + h / 30) % 12;
    const v = lig - sat * Math.min(lig, 1 - lig) * Math.max(-1, Math.min(t - 3, 9 - t, 1));
    return Math.round(v * 255).toString(16).padStart(2, '0');
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

// -30 や 390 も、0〜360未満にそろえる
export function normalizeHue(h: number): number {
  return ((h % 360) + 360) % 360;
}

#ff0000 → h=0 s=100 l=50
#00ff00 → h=120 s=100 l=50
#0000ff → h=240 s=100 l=50
#00c8e8 → h=188.2759 s=100 l=45.4902
#808080 → h=0 s=0 l=50.1961

export const HARMONIES = [
  { id: 'complementary', name: '補色', offsets: [0, 180] },
  { id: 'analogous', name: '類似色', offsets: [-30, 0, 30] },
  { id: 'triadic', name: 'トライアド', offsets: [0, 120, 240] },
  { id: 'split', name: 'スプリット・コンプリメンタリー', offsets: [0, 150, 210] },
] as const;

export type HarmonyId = (typeof HARMONIES)[number]['id'];

// 元の色の色相だけを回して、彩度と明度はそのままにする
export function makeHarmony(base: string, offsets: readonly number[]): string[] {
  const hsl = hexToHsl(base);
  return offsets.map((o) => (o === 0 ? base : hslToHex({ ...hsl, h: normalizeHue(hsl.h + o) })));
}

// 色見本の上の文字を、白と濃い色のどちらにするか（WCAG のコントラスト比が高いほう）
export function luminance(hex: string): number {
  const n = parseInt(hex.slice(1), 16);
  const ch = (v: number) => {
    const c = v / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * ch((n >> 16) & 255) + 0.7152 * ch((n >> 8) & 255) + 0.0722 * ch(n & 255);
}

export function textColorOn(bg: string): '#ffffff' | '#1f2a30' {
  const lb = luminance(bg);
  const white = 1.05 / (lb + 0.05);
  const dark = (lb + 0.05) / (luminance('#1f2a30') + 0.05);
  return white >= dark ? '#ffffff' : '#1f2a30';
}

import { useId, useState } from 'react';
import { HARMONIES, type HarmonyId, hexToHsl, makeHarmony, textColorOn } from './harmony';

export function ColorHarmony() {
  const [base, setBase] = useState('#00c8e8');
  const [kind, setKind] = useState<HarmonyId>('complementary');
  const inputId = useId();

  const harmony = HARMONIES.find((h) => h.id === kind)!;
  const colors = makeHarmony(base, harmony.offsets);
  const achromatic = hexToHsl(base).s === 0;

  return (
    <section className="harmony">
      <div className="base">
        <label htmlFor={inputId}>元の色</label>
        <input id={inputId} type="color" value={base} onChange={(e) => setBase(e.target.value)} />
        <output htmlFor={inputId}>{base}</output>
      </div>

      <fieldset>
        <legend>配色の種類</legend>
        {HARMONIES.map((h) => (
          <label key={h.id}>
            <input
              type="radio"
              name="harmony"
              value={h.id}
              checked={kind === h.id}
              onChange={() => setKind(h.id)}
            />
            {h.name}
          </label>
        ))}
      </fieldset>

      {achromatic && (
        <p className="note">灰色・白・黒には色相がないため、どの配色でも同じ色になります。</p>
      )}

      <ul className="swatches" aria-label={`${harmony.name}の配色`}>
        {colors.map((c, i) => {
          const o = harmony.offsets[i];
          return (
            <li key={o} style={{ backgroundColor: c, color: textColorOn(c) }}>
              <span className="offset">{o === 0 ? '元の色' : `${o > 0 ? '+' : ''}${o}°`}</span>
              <span className="hex">{c}</span>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

比べた組み合わせ: 14000、一致: 12057、不一致: 1943
   #2cfd62 -30: JS #5ffd2c / CSS #5efd2c (color(srgb 0.370588 0.992157 0.172549))
R・G・B の値のずれの最大: 1