◇ hue-deck · color guide
ベースカラー 1 つから モノクロ / アナログ / 補色 / スプリット補色 / 三角 / 四角 / 五色 の 7 種の配色を ブラウザだけで即生成する 無料カラーパレット ジェネレーター。 chroma-js + 色彩理論 + WCAG 2.1 コントラスト比、 CSS Variables / Tailwind / SVG でエクスポート可能。 サインアップ不要、 入力はサーバーに送信されません。
[ ./how_it_works ]
step / 01
カラーピッカー or hex 入力 (#RRGGBB) で 1 色だけ指定。 「オーシャン / コーラル / フォレスト / サンセット / ラベンダー / ミント / ワイン / オブシディアン」 の 8 プリセットも使える。
step / 02
色相環に基づく 7 種の配色 (モノクロマティック / アナログ ±30° / 補色 180° / スプリット補色 150°/210° / 三角 120° / 四角 90° / 五色 72°) を即時切替。 各モードの説明 + 適用シーンも併記。
step / 03
各スウォッチに hex / RGB / HSL と WCAG 2.1 コントラスト比 (白文字 vs 黒文字 どちらが読みやすいか + AAA / AA / FAIL 判定) を表示。 クリックで hex をコピー、 CSS Variables / Tailwind theme JSON / SVG strip もワンクリックでコピー。
[ ./faq ]
色空間の変換とパレット生成を扱う JavaScript ライブラリ (~80KB)。 sRGB / HSL / HCL / LAB / LCH の相互変換、 WCAG コントラスト比、 グラデーション補間 などの色操作機能を提供します。 本ツールは chroma-js を使って色相環の回転 + 明度調整 + WCAG コントラスト計算をブラウザ内で完結させています。
モノクロマティック = 統一感重視 (落ち着いた印象、 ブランド系) / アナログ = 自然で穏やか / 補色 = 強いコントラスト (主役を際立たせる) / スプリット補色 = 補色より柔らかいコントラスト / 三角 = 鮮やかで活気 / 四角 = リッチだが扱い難 / 五色 = 万能だが調整必須。 まず三角か アナログ で試して、 用途で絞り込むのが定石です。
Web Content Accessibility Guidelines 2.1 で定められた、 背景色と文字色のコントラスト比 (1〜21、 数値が大きいほど読みやすい)。 本ツールは各スウォッチに対して 「白文字 vs 黒文字 どちらが読みやすいか + 比率 + ランク」 を表示します。 AAA = 7.0 以上 (本文最高水準) / AA = 4.5 以上 (本文標準) / AA-large = 3.0 以上 (18pt 以上の大文字に限り OK) / FAIL = それ未満。
(1) CSS Variables — `:root` に `--hue-1` 〜 `--hue-5` で hex 定義。 そのままプロジェクトに貼り付け可。 (2) Tailwind theme JSON — `theme.extend.colors` で `hue-1` 〜 `hue-5` を定義。 `tailwind.config.js` にマージ。 (3) SVG Swatch Strip — 5 色を横並びにした SVG 文字列。 Figma / Illustrator 等にペースト可。 全てクリック 1 つでクリップボードへ。
送られません。 色変換 / 配色生成 / WCAG 計算 / クリップボードコピー は全て chroma-js + ブラウザ API でクライアント完結。 サインアップも不要、 入力した色値はネットワーク往復しません。
出ます。 ただし モバイル端末の有機 EL / 液晶ディスプレイは色域 (sRGB / P3) と色温度が個体差で違うため、 「同じ hex 値でも見え方が違う」 こと自体は防ぎようがありません。 本ツールは sRGB 色空間で動作、 デザイン用途では PC モニターでの最終確認推奨。
ai-lab.org の ジェネレーター thesis の 2本目です (1本目 TypeForge = 3D テキスト)。 同じ thesis でも題材が全く異なる (3D テキスト vs 配色パレット) ので visual も完全別軸。 デザイナー需要の入口として 今後 SVG モノグラム / グラデーション ジェネレーター 等でシリーズ化予定。