HueDeck ができるまで — chroma-js で配色パレットを作る

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

#なぜこの形にしたか

直近 5本は (astro-cast: データ可視化 / arcana-flip: 占い / gift-cap: 計算 / pile-park: シミュ / tone-quest: 学習)。 直近 5本にジェネレーターゼロ。 作ろうと決めていた 8 ジャンルは 7/8 で、 残り server-side AI のみ。

候補比較:

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

選んだ理由:

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

#見た目をどう決めたか

直近 5本の 見た目 を書き出す:

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 (コンサートホール)

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

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

採用 3 要素:

• 配色: 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 (色見本帳)
• モチーフ: 色見本帳 / 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 色構成にして 配色 実用度を上げる。

#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 でクリップボードに。

#まだやっていないこと

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