カラー変換 & パレット

カラー変換 & パレットとは？

WebサイトやアプリのUI設計に必須となるカラーコードを相互に変換（HEX ↔ RGB ↔ HSL）し、さらにTailwind CSSに準拠した11段階の美しい明暗カラーパレットを自動生成できるツールです。

ツールの使い方

• リアルタイム変換: HEX、RGB、HSLのいずれかの入力欄に値を入力するかペーストすると、即座に他の形式へ変換されます。
• パレット自動生成: 色を選択すると、Tailwind CSSのようなモダンなUIフレームワークで扱いやすい、50〜950までの11段階の明暗パレット（Shades & Tints）が自動で生成されます。
• エクスポート: 「ダウンロード」ボタンをクリックすると、生成されたパレットをCSS変数の形式でファイルとして保存し、プロジェクトですぐに利用できます。

用語解説

• HEX（16進数）: #10B981 のような6桁の文字列で構成。文字列が短くコピペしやすいため、Web制作で最も一般的に使用されています。
• RGB（レッド、グリーン、ブルー）: rgb(16, 185, 129) のように、光の三原色の強さを 0〜255 の数値で指定します。ディスプレイの発色原理に近い指定方法です。
• HSL（色相、彩度、明度）: hsl(160, 84%, 39%) のように、人間の直感に近い形で指定します（例: 色相=角度, 彩度=鮮やかさ, 明度=明るさ）。

よくあるユースケース（活用シーン）

• XDやFigma等のデザインツールから取得した #3B82F6 といった単一のブランドカラー（HEX）から、Webサイトのホバー時や背景色に使える「少し薄い／濃い色」の50〜950パレットを数秒でワンクリック自動生成する。
• 古いCSSに書かれている不透明度が含まれた rgba(255, 0, 0, 0.5) などの数値を、モダンな #FF000080（8桁HEXアルファ）に変換する。

セキュリティ

すべての計算プロセスはブラウザ内でローカルに行われます。入力したデザイン上のカラー情報が外部流出することはありません。