カラーピッカー — HEX・RGB・HSL カラー変換ツール
HEXコードを入力して色を確認、RGB・HSLを即座に取得。またはランダム生成でインスピレーション。ワンクリックでどの形式もコピー。Figmaやデザインツールなしでサクッとカラー変換したい開発者・デザイナー向け。
異なる形式で色を選択・変換
HEX
#3498db
RGB
rgb(52, 152, 219)
HSL
hsl(204, 70%, 53%)
異なる形式で色を選択・変換
HEX
#3498db
RGB
rgb(52, 152, 219)
HSL
hsl(204, 70%, 53%)
カラーフォーマット解説
3つのフォーマット、同じ色。HEX（#FF5733）はWeb標準——コンパクトでCSSに貼り付けやすい。RGB（255, 87, 51）はスクリーンが実際に使うもの——3チャンネル各0-255、赤緑青の光を混合。HSL（14°, 100%, 60%）は人間が色を考える方法——色相はカラーホイールの位置、彩度は鮮やかさ、明度は明暗。
なぜHSLが開発者に重要か：色の暗いバージョンが必要？明度を下げるだけ。落ち着いたバージョン？彩度を下げる。HEX/RGBだと3チャンネル全部で計算が必要。CSSは3つとも対応：color: #FF5733、color: rgb(255, 87, 51)、color: hsl(14, 100%, 60%)。
アルファチャンネル（透明度）は4番目の値を追加：rgba(255, 87, 51, 0.5)またはhsla(14, 100%, 60%, 0.5)で50%不透明度。モダンCSSではrgb(255 87 51 / 50%)——新しいスペース区切り構文も使える。
使い方
- HEXコードを入力または貼り付け（#あり/なし両方OK）——カラープレビューが即座に更新。
- プレビュー下のRGB・HSL等価値を確認。
- ランダムボタンでインスピレーション用の新しい色を生成。
- ワンクリックでどの形式もコピー——CSS、Figma、コードにそのまま貼り付け可能。
使用場面
デザイナーのHEXカラーをコード用RGBに変換
デザイナーがFigmaから#3B82F6を渡してきた。コンポーネントで動的な透明度バリアントにrgb()が必要。HEXを貼り付け、RGB値を取得、アルファチャンネルを追加。
カラーバリエーション作成（明るく/暗く/落ち着いた色）
ブランドカラーがあり、ホバー状態、無効状態、背景色調が必要。HSLに変換して明度を調整（+20で明るく、-20で暗く）または彩度（-30で落ち着いた色）。HEX値を推測するより遥かに簡単。
CSSカラー問題のデバッグ
画面上の色がおかしく見えて、値が正しいか不明。DevToolsからHEXをここに貼り付け、プレビューを見て期待と比較。HEXコードのタイプミスが原因のことも（#FF5733 vs #F55733——見落としやすい）。
プロトタイピング用ランダムカラー生成
チャート、タグシステム、アバタープレースホルダーを作成中？ランダムボタンを数回押して使える色を見つける。カラーホイールを見つめて「いい色」を選ぼうとするより効率的。
ヒントと注意点
プログラム的なカラー操作にはHSLを使う
デザインシステムで5段階の青が必要？HSLのベース青から始めて、明度をステップさせてバリアントを生成：90%、70%、50%、30%、10%。HEX/RGBだと各シェードを手動で選ぶ必要がある。Tailwind CSSは内部でまさにこれをやっている。
HEXは大文字小文字を区別しない
#ff5733、#FF5733、#Ff5733はすべて同じ色。ほとんどのツールは大文字で出力するが、CSSはどちらも受け付ける。リンターが要求しない限り、コードベースの大文字小文字を「修正」する時間は無駄。
アクセシビリティのためコントラスト比を確認
WCAGは通常テキストに4.5:1、大きなテキストに3:1のコントラスト比を要求。どんなに美しい色でも、ユーザーがその上のテキストを読めなければ意味がない。ここで色を選んだ後、コミット前にコントラストチェッカーで背景との対比を確認。
3桁HEXは省略形であって別フォーマットではない
#F00は#FF0000に展開される（各桁が2倍）。各ペアが同一の場合のみ使える：#AABBCC → #ABC、しかし#A1B2C3には省略形がない。コードでは明確さのため6桁を使用；3桁はメモ用。
例
Tailwind Blue 500の全フォーマット
Tailwind CSSのデフォルト青——フォーマット間変換。
Input
#3B82F6Output
RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)HSL調整で純赤を暗くする
赤から始めて、明度を50%から30%に下げて暗くする。
Input
hsl(0, 100%, 50%) → hsl(0, 100%, 30%)Output
#FF0000 → #990000（色相を変えずに暗い赤）機能
- HEX・RGB・HSL即時相互変換
- 大きなカラープレビューエリア——選んだ色がはっきり見える
- ランダムカラー生成でクイックインスピレーション
- 各フォーマットワンクリックコピー
- 3桁・6桁HEX対応、#あり/なし両方OK
- 100%ブラウザ内で動作——データはどこにも送信されない
よくある質問
HEX・RGB・HSLの違いは？
HEX（#RRGGBB）は16進表記——コンパクトでCSS標準。RGB（r, g, b）は赤/緑/青の強度0-255——モニターが実際に表示するもの。HSL（色相, 彩度, 明度）は人間の色知覚に対応——色相は何色か、彩度は鮮やかさ、明度は明暗。3つとも同じsRGB色空間を異なる座標系で記述。
CSSではどのフォーマットを使うべき？
静的な色：HEXが最も一般的でコンパクト。透明度が必要な色：rgb(r g b / alpha)またはhsl(h s l / alpha)。プログラム的にシェードを生成するデザインシステム：HSL（明度/彩度の調整が直感的）。モダンCSSはcolor-mix()でのブレンドもサポート。
なぜ同じ色が異なるスクリーンで違って見える？
スクリーンのキャリブレーション、カラープロファイル、色域の違い。sRGBの#FF0000は広色域P3ディスプレイと安いTNパネルで異なって見える。Web作業ではsRGB（HEX/RGBが表すもの）でデザインし、全デバイスでの正確な色再現は不可能と受け入れる。
プログラム的に色を明るく/暗くするには？
HSLに変換してL（明度）値を調整。明度50%が「純粋な」色；100%に向けて増やすと明るく（白に近づく）、0%に向けて減らすと暗く（黒に近づく）。HとSを同じに保って色の特徴を維持。Tailwindはこの方法で50-950のシェードスケールを生成。
透明度と明るい色の違いは？
透明度（alpha）は要素を透明にする——背後のものが透けて見える。明るい色（HSL明度が高い）は完全に不透明だが白が混ざっている。白い背景では似て見えるが、色付きや画像の背景では大きく異なる。オーバーレイには透明度、背景色には明るい色を使う。
ヒントと関連ワークフロー
- ブランドカラーでQRコードを生成するには、QRコード生成ツール.
- CSS URLにカラー値をエンコードするには、URLエンコーダー.
- カラーパレットをJSON形式で保存するには、JSONフォーマッター.
- カラーのパーセンテージ値を計算するには、パーセント計算機.