カラーピッカー
色を選ぶだけでHEX・RGB・HSLを自動変換。各値をワンクリックでコピーできます。
使い方
- カラーピッカーで色を選択 — ビジュアルカラーピッカーから好みの色を選びます。マウスで任意の点をクリックすると即座に反映。
- 3 形式 (HEX/RGB/HSL) を同時確認 — 選択色の HEX (#RRGGBB)、RGB (rgb(R,G,B))、HSL (hsl(H,S%,L%)) が自動表示。
- 既存コードを貼り付けて変換 — ペースト欄に既存の HEX / RGB / HSL を入力すると自動判別して他形式に変換。
- 用途に合わせて形式を選ぶ — 静的 CSS = HEX、JS で動的生成 = RGB、明度バリエーション設計 = HSL。
- カラーコードをコピー — 各形式横の「コピー」ボタンでクリップボード保存。CSS / SCSS / Figma に即貼付。
こんな場面で使えます
- CSS / SCSS の色指定 — デザインカンプから取得した色を HEX コードで即 CSS 化
- ブランドカラーの統一管理 — コーポレートカラーを HEX・RGB・HSL の 3 形式で記録
- カラーパレット設計 — HSL の色相を固定して明度バリエーション (50/100/200/.../900) を作成
- Figma / Photoshop 連携 — デザインツール間で色をコピー・貼付する際の形式変換
- UI ライブラリ (Tailwind / Material) のカスタム色 — カスタム color palette の追加
よくある質問
HEX・RGB・HSL の違いは何ですか？
HEX は 16 進数表記 (#FF0000)、RGB は赤・緑・青の光の三原色 (rgb(255,0,0))、HSL は色相 (Hue)・彩度 (Saturation)・明度 (Lightness) (hsl(0,100%,50%)) で色を表現します。CSS ではいずれの形式も使用でき、結果の表示色は同一です。
CSS で使えるカラーコードはどれですか？
HEX、RGB、HSL のいずれも CSS で使用できます。HEX が最も一般的で短く書けるため静的指定に便利。RGB は JavaScript で動的に値を変える場面で扱いやすく、HSL は色相・明度のバリエーション (ブランドカラーの 50/100/200/.../900 等) を作る際に直感的です。
透明度 (アルファ値) は設定できますか？
現在のバージョンでは不透明な色のみ対応しています。透明度が必要な場合は RGBA 値 (rgba(255,0,0,0.5)) や HEX 8 桁 (#FF000080) を手動で設定してください。CSS では rgba()・hsla()・8 桁 HEX のいずれも有効です。
HEX と RGB はどちらを CSS で使うべき？
静的な色指定 (color: #3B82F6;) は HEX が短く、エディタの色プレビューも効くため使いやすいです。透明度を扱う場面や JavaScript で色を動的生成する場面では RGB / RGBA が便利。原則 HEX、透明度や動的生成は RGB の使い分けが実務的です。
HSL の色相 (H) は度数？
はい、Hue は 0-360 度で円環上の位置を表します。0 = 赤、60 = 黄、120 = 緑、180 = シアン、240 = 青、300 = マゼンタ、360 = 赤に戻る。Saturation (彩度) と Lightness (明度) は 0-100% の比率。HSL は色相を保ったまま明度や彩度だけを変える調整がしやすい点が利点です。
アクセシビリティ (WCAG) 対応のコントラスト確認は？
本ツールはコントラスト比計算機能を持ちませんが、別の WebAIM Contrast Checker 等で WCAG 2.1 AA (4.5:1) / AAA (7:1) を確認するのが一般的。背景色と前景色の HEX を本ツールで確認後、コントラスト計算ツールへ転送する流れが効率的です。
デザインツール (Figma / Photoshop) との連携は？
Figma は HEX をデフォルト、Photoshop は RGB が中心。本ツールで HEX を取得して Figma に、RGB を取得して Photoshop / Illustrator に貼付できます。HSL は両ツールでも対応していますがあまり一般的ではありません。
色を覚えるのが苦手でも使えますか？
はい、ビジュアルカラーピッカーから色を選べば自動で 3 形式が表示されるため、色名やコードを覚える必要はありません。逆に既存のブランドカラー (例: #4CC9F0) を貼り付けると残り 2 形式が即計算されます。
ユーティリティツールの全体像
本ツール (カラーピッカー) は ユーティリティ活用ガイド (sub-Pillar) の一部です。色空間 HEX/RGB/HSL の使い分け・パスワード生成 (NIST SP 800-63B)・単位変換誤差など、デザイン・運用に役立つ知識を Pillar ガイドで体系的に確認できます。
関連ガイド: カラーコード変換の基本 / Top Pillar (12 ツール早見表)