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本目候補)
[ ./next_action ]
読んだら、 HueDeck を実際に動かす。
この開発ログは HueDeck をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。