Reactで、選んだ色に近いCSSの色の名前を表示する方法

// CSS Color Module Level 4 の named colors（transparent を除く）
export const NAMED_COLORS: readonly [name: string, hex: string][] = [
  ['aliceblue', '#f0f8ff'], ['antiquewhite', '#faebd7'], ['aqua', '#00ffff'],
  ['aquamarine', '#7fffd4'], ['azure', '#f0ffff'], ['beige', '#f5f5dc'],
  // …（148組。途中は省略）
  ['white', '#ffffff'], ['whitesmoke', '#f5f5f5'], ['yellow', '#ffff00'],
  ['yellowgreen', '#9acd32'],
];

export type Oklab = readonly [L: number, a: number, b: number];

// '#rrggbb' を 0〜1 の sRGB の3つの値にする
export function hexToRgb(hex: string): [number, number, number] {
  const n = parseInt(hex.slice(1), 16);
  return [(n >> 16) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
}

// ガンマのかかった sRGB の値を、光の強さに比例する値（linear）に戻す
function toLinear(v: number): number {
  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
}

// sRGB → Oklab。係数は CSS Color 4 のサンプルコード（conversions.js）の値
export function hexToOklab(hex: string): Oklab {
  const [r, g, b] = hexToRgb(hex).map(toLinear);
  // linear sRGB → XYZ（D65）
  const x = (506752 / 1228815) * r + (87881 / 245763) * g + (12673 / 70218) * b;
  const y = (87098 / 409605) * r + (175762 / 245763) * g + (12673 / 175545) * b;
  const z = (7918 / 409605) * r + (87881 / 737289) * g + (1001167 / 1053270) * b;
  // XYZ → LMS → 立方根 → Oklab
  const l = Math.cbrt(0.819022437996703 * x + 0.3619062600528904 * y - 0.1288737815209879 * z);
  const m = Math.cbrt(0.0329836539323885 * x + 0.9292868615863434 * y + 0.0361446663506424 * z);
  const s = Math.cbrt(0.0481771893596242 * x + 0.2642395317527308 * y + 0.6335478284694309 * z);
  return [
    0.210454268309314 * l + 0.7936177747023054 * m - 0.0040720430116193 * s,
    1.9779985324311684 * l - 2.4285922420485799 * m + 0.450593709617411 * s,
    0.0259040424655478 * l + 0.7827717124575296 * m - 0.8086757549230774 * s,
  ];
}

// ΔEOK2：Oklab の a と b の差を2倍してから、まっすぐな距離をとる
export function deltaEOK2(p: Oklab, q: Oklab): number {
  return Math.hypot(p[0] - q[0], 2 * (p[1] - q[1]), 2 * (p[2] - q[2]));
}

import { NAMED_COLORS } from './namedColors';
import { deltaEOK2, hexToOklab, type Oklab } from './oklab';

export type ColorName = { names: string[]; hex: string; lab: Oklab };

// 同じ値の名前（gray と grey など）を1つにまとめ、Oklab の値を先に計算しておく
const PALETTE: ColorName[] = [];
for (const [name, hex] of NAMED_COLORS) {
  const same = PALETTE.find((c) => c.hex === hex);
  if (same) same.names.push(name);
  else PALETTE.push({ names: [name], hex, lab: hexToOklab(hex) });
}

export type Nearest = ColorName & { distance: number };

// hex にいちばん近い名前付きの色を返す
export function nearestColorName(hex: string): Nearest {
  const lab = hexToOklab(hex);
  let best = PALETTE[0];
  let bestDistance = Infinity;
  for (const c of PALETTE) {
    const d = deltaEOK2(lab, c.lab);
    if (d < bestDistance) {
      best = c;
      bestDistance = d;
    }
  }
  return { ...best, distance: bestDistance };
}

import { useId, useMemo, useState } from 'react';
import { nearestColorName } from './nearestColor';
import { hexToOklab } from './oklab';

// 明るい色の上は濃い文字、暗い色の上は白い文字にする
const textOn = (hex: string) => (hexToOklab(hex)[0] > 0.65 ? '#1f2a30' : '#ffffff');

export function ColorNameFinder() {
  const [hex, setHex] = useState('#3a7bd5');
  const nearest = useMemo(() => nearestColorName(hex), [hex]);
  const id = useId();
  const exact = nearest.hex === hex;

  return (
    <div className="finder">
      <label htmlFor={id}>色を選ぶ</label>
      <input id={id} type="color" value={hex} onChange={(e) => setHex(e.target.value)} />
      <div className="swatches" aria-hidden="true">
        <span style={{ background: hex, color: textOn(hex) }}>選んだ色<br />{hex}</span>
        <span style={{ background: nearest.hex, color: textOn(nearest.hex) }}>
          {nearest.names[0]}<br />{nearest.hex}
        </span>
      </div>
      <output htmlFor={id} aria-live="polite">
        {exact ? 'ちょうど ' : 'いちばん近いのは '}
        <strong>{nearest.names.join(' / ')}</strong>
        {exact ? ' です' : ` です（差 ${nearest.distance.toFixed(3)}）`}
      </output>
    </div>
  );
}