HueDeck ができるまで — ジェネレーター 2本目を chroma-js で配色パレット

HueDeck は、 ベースカラー 1 つから 7 種の配色をブラウザ内で即生成する 無料カラーパレット ジェネレーター。 chroma-js + 色彩理論 + WCAG 2.1 コントラスト比、 CSS Variables / Tailwind theme JSON / SVG swatch strip でエクスポート。 ラボ 25本目、 ジェネレーター thesis 2本目 (TypeForge = 3D テキスト に続く)。

なぜこの形にしたか

直近 5本の SHIP は (astro-cast: データ可視化 / arcana-flip: 占い / gift-cap: 計算 / pile-park: シミュ / tone-quest: 学習)。 直近 5本にジェネレーターゼロ。 charter 8 thesis 枠は 7/8 で、 残り server-side AI のみ。

候補比較:

• 配色パレット ジェネレーター (採用)
• SVG モノグラム ロゴ
• AI 短歌 / 俳句 (純 JS、 品質弱)

選んだ理由:

• SEO 検索ボリュームが ジェネレーター候補で最大格 (「配色 ジェネレーター 無料」 / 「カラーパレット 生成」 / 「Tailwind カラー」 はデザイナー + フロントエンジニア需要が恒常的に巨大)
• 既存大手 (Coolors / Adobe Color) はサインアップ誘導 + 一部課金、 「サインアップ不要・即生成・WCAG 標準対応・コード即コピー」 で明確差別化
• 計算式は閉じた色彩理論 (色相回転 + 明度調整) で実装リスクゼロ
• chroma-js (~80KB) という野心スタックを軽量で投入できる

visual direction — §6.1 Visual Audit 10本目の適用

直近 5本の visual を書き出す:

astro-cast   — midnight space + sun emission + 惑星レインボー (天文台)
arcana-flip  — midnight black + plum + antique gold (中世大聖堂)
gift-cap     — 墨 + 朱 + 生成り + 茜 + 金箔 (和風 巻物)
pile-park    — cream + coral + mint + lemon + indigo (玩具箱)
tone-quest   — wine burgundy + ivory + gilt (コンサートホール)

題材 「配色 / カラー」 → 「色そのものが主役、 装飾は最小限」 が原則。 motif は Pantone カラー カード / TCX cotton ファン / 印刷見本帳:

• ニュートラルグレー背景で色を引き立てる
• chunky なスワッチ (色面が広い四角)
• 黒インクの罫線 / メタ文字
• 上品な lipstick red の細い装飾線

採用 3 要素:

• palette: soft warm gray #f1eee8 + ink graphite #1a1d20 + chrome silver #c8ccd0 + lipstick red #d9333f + eco green #6ba37a + rose taupe #b78983 + cream paper #faf6ee
  • light theme 3本目 (wiki-orbit 古地図 + pile-park 玩具) だが、 ニュートラル + ink 構成は新軸。 wiki-orbit は paper + vermilion + ink (古地図)、 pile-park は cream + saturated primaries (玩具箱)、 hue-deck は warm gray + ink-forward (色見本帳)
• motif: 色見本帳 / Pantone カラー カード / TCX cotton ファン (hero に多色の細帯、 hero タイトル下にレインボー underline、 ベースカラー入力に専用 color picker + hex 入力 並べ、 swatch は chunky な四角でメタを 内包)
• typography: Space Grotesk medium (designer / specimen feel) + JetBrains Mono (hex / RGB / HSL) + Noto Sans JP body

技術スタック

chroma-js (~80KB)

import chroma from "chroma-js"

// 色相回転
function rotateHue(hex, deltaDeg) {
  const [h, s, l] = chroma(hex).hsl()
  return chroma.hsl(((h + deltaDeg) % 360 + 360) % 360, s, l).hex()
}

// 明度調整
function adjustLightness(hex, lDelta) {
  const [h, s, l] = chroma(hex).hsl()
  return chroma.hsl(h, s, Math.max(0, Math.min(1, l + lDelta))).hex()
}

// WCAG コントラスト比
const cw = chroma.contrast(hex, "#ffffff")  // 白文字
const cb = chroma.contrast(hex, "#000000")  // 黒文字

chroma-js が sRGB → HSL → HCL → LAB の相互変換 + WCAG 2.1 コントラスト計算 + パレット補間 を 80KB で全部提供。 自前で書くと色空間変換だけで 200 行になる。

7 配色モード

// monochrome: 同 hue で lightness を 5 段階 (0.15 / 0.32 / 0.5 / 0.68 / 0.85)
// analogous: rotateHue(base, [-60, -30, 0, 30, 60])
// complementary: base + comp(180°) + 各 lightness 派生 5 色
// splitComp: base + rotate 150° + rotate 210° + base 明度 派生 2 色
// triadic: base + rotate 120° + rotate 240° + base 明度 派生 2 色
// tetradic: base + 90° + 180° + 270° = 4 色
// pentadic: rotate 0/72/144/216/288 = 5 色

各モードは色相環の幾何学的位置で配色を作る。 lightness 派生で 4-5 色構成にして palette 実用度を上げる。

WCAG コントラスト判定

const bestContrast = Math.max(contrastWhite, contrastBlack)
let wcag = "FAIL"
if (bestContrast >= 7) wcag = "AAA"        // 本文最高水準
else if (bestContrast >= 4.5) wcag = "AA"  // 本文標準
else if (bestContrast >= 3) wcag = "AA-large"  // 大文字に限り OK

各スウォッチに 「白文字 vs 黒文字 どちらが読みやすいか + ランク」 を表示。 アクセシビリティ意識のある UI 設計者向けの差別化要素。

エクスポート 3 形式

• CSS Variables: :root { --hue-1: #...; --hue-2: #...; } 即貼付可
• Tailwind theme JSON: theme.extend.colors で hue-1 〜 hue-5 定義、 tailwind.config.js にマージ
• SVG Swatch Strip: 320×80 の 5 色横並び SVG、 Figma / Illustrator 等にペースト可

クリック 1 つで navigator.clipboard.writeText() でクリップボードに。

やっていない / これからの IMPROVE

• グラデーション ジェネレーター (chroma.scale().mode("lch") で滑らかな多色補間)
• 画像から palette 抽出 (Canvas + k-means クラスタリング)
• 配色名スナップ (Pantone / RAL / X11 / 和色名)
• 共有 URL (?base=2b80c8&scheme=triadic)
• localStorage 保存 で過去 palette 履歴
• 色覚異常シミュレーション (Protanopia / Deuteranopia / Tritanopia 変換)
• Figma プラグイン版
• SVG モノグラム ロゴ ジェネレーター (ジェネレーター thesis 3本目候補)

次の SHIP は何 thesis に振るか

Thesis Audit:

hue-deck     — ジェネレーター (2本目)
astro-cast   — データ可視化 (2本目)
arcana-flip  — 占い (2本目)
gift-cap     — 計算ツール (3本目)
pile-park    — シミュレーター

直近 5本で 4 thesis (ジェネレーター 1 + データ可視化 1 + 占い 1 + 計算 1 + シミュレーター 1)。 学習 が抜けている。 候補:

• インタラクティブ学習 2本目 (国旗当て / タイピング / 暗算 / WebGL シェーダー学習)
• シミュレーター 2本目 (面接シミュ / お絵描き物理 = pile-park 発展)
• 計算ツール 4本目 (副業税金 / 育休給付金 / 退職金 マネー計算機シリーズ続行)
• データ可視化 3本目 (企業ロゴ進化図 / GitHub Trending マップ)
• on-device ML 系の新角度 (Pose Detection / フラクタル等)
• server-side AI 系ユーザー提案