WEBのカラーコードサイトはたくさんあるし使いやすいのも多いけど、
「カラーパレットをぐるぐる動かしながらいい感じに色を選びたい」
「なんかおしゃれなカラーパレットサイトが何故か存在しない」
ので、つくりました。
（若干、某アニメ制作会社を意識しているのは内緒です）
ここで公開中です！（GitHub Pages）
リポジトリはこちら👇
どんなサイト？
ページ全体がカラーパレットです。
カーソルを動かすだけで色が変わり、クリックでHEXコードをコピーできます。
X軸が色相（Hue）、Y軸が明度（Lightness）のHSLグラデーションになっています。
シンプルに「色を選んでコードを拾う」だけを快適にする、というコンセプトです。
機能紹介
基本操作
| 操作 | アクション |
|---|---|
| カーソルを動かす | リアルタイムで色を探索 |
| クリック | HEXコードをクリップボードにコピー |
| ダブルクリック | ウォッシュモード（後述） |
| 右クリック | パレットに色を保存 |
| 右端をドラッグ | フィルムグレインの強度を調整 |
コードスニペット（C キー）
選んだ色のコードを、すぐ使える形式で出力します。
CSS / Tailwind CSS / SwiftUI / Jetpack Compose の4形式に対応。
デザイナーからモバイルエンジニアまで、コピペするだけで使えます。
ウォッシュモード（ダブルクリック）
画面全体がその色に染まります。
単純にかっこいいのもありますが、色情報パネルも表示されます。
- HEX / RGB / HSL / CMYK
- 日本の伝統色名（約308色収録）
- WCAGコントラスト比
伝統色名は別ファイル（assets/colors.js）で管理しているので、あとから自由に追加できます。
SVGエクスポート（E キー）
選んだ色のスウォッチをSVGファイルとして保存できます。
色名・HEX・RGB・CMYK などの情報が埋め込まれた状態で書き出されます。
Shift+E でPNGとしても保存可能です。
ガイドパネル（? キー）
全操作を日本語 / English で確認できます。
右下のショートカットバーからもアクセス可能。
その他の機能
-
カラーハーモニー（
H） — 補色・三角配色・類似色をドットで表示 -
彩度モード（
S） — Y軸を明度→彩度に切り替え -
エクスポート（
E/Shift+E） — SVG / PNG でスウォッチを書き出し -
URLシェア（
U） — 色を?c=RRGGBBでURLに埋め込んで共有 -
パレット保存（
P） — 最大8色をローカルに保存 -
カーソルロック（
L） — 色を固定したまま情報を確認
技術的なこと
ビルドツールなし、フレームワークなし、依存ライブラリなし。
単一の index.html だけで動きます。
index.html ← サイト本体すべて
assets/
colors.js ← 色名データベース（編集可能）
icon.ico
logo.png
色の計算
canvasのピクセル読み取りは使っていません。
カーソル座標から数式で直接HSL→RGBを計算しています。
function colorAt(x, y) {
const hue = ((x / innerWidth) * 360 + driftOffset) % 360;
const t = y / innerHeight;
const [bR, bG, bB] = hslToRgb(hue, 100, 50);
const wa = Math.max(0, 1 - t * 2); // 白ブレンド
const ba = Math.max(0, (t - 0.5) * 2); // 黒ブレンド
return [
Math.round((bR + (255 - bR) * wa) * (1 - ba)),
Math.round((bG + (255 - bG) * wa) * (1 - ba)),
Math.round((bB + (255 - bB) * wa) * (1 - ba)),
];
}
色名マッチング
伝統色名の照合には CIELab色空間の最近傍探索 を使っています。
RGBのユークリッド距離より人間の視覚に近い知覚的な距離で最適な色名を選びます。
function nearestColorEntry(r, g, b) {
const lab = _rgbToLab(r, g, b);
let best = 0, bestDist = Infinity;
for (let i = 0; i < COLOR_DB.length; i++) {
const d = deltaE(lab, labCache[i]);
if (d < bestDist) { bestDist = d; best = i; }
}
return COLOR_DB[best];
}
おわりに
GitHubも公開しているので、伝統色の追加や機能改善のPRも歓迎です。
X (Twitter): https://x.com/retro_maid
ライセンスは THE BEER-WARE LICENSE (Revision 42)です。
ぜひビール奢ってください...