🎨 カラーコード変換 の使い方
HEX・RGB・HSL の 3 形式を相互変換できるカラーコードツールです。カラーピッカーで直感的に色を選択し、CSS にそのまま貼り付けられるスニペットも自動生成されます。デザイン作業やフロントエンド開発はもちろん、デザインシステムのカラートークン設計やアクセシビリティチェック前の下準備にも役立ちます。どのフィールドを変更しても他の形式が即時更新されるリアルタイム連動が特徴です。
🚀 今すぐカラーコードを変換する →📌 このツールでできること
- 🟦 HEX → RGB / HSL：
#3b82f6形式のカラーコードを即変換 - 🟩 RGB → HEX / HSL：R・G・B 各チャンネルの数値を入力して変換
- 🟧 HSL → HEX / RGB：色相（H）・彩度（S）・明度（L）から変換
- 🎨 カラーピッカー：ブラウザ標準のピッカーで色を直感的に選択
- 📋 CSS スニペット自動生成：
color: #3b82f6/rgb()/hsl()をワンクリックコピー - 🔄 リアルタイム同期：どの入力フィールドを変更しても他の形式が即時更新
- 🖌 色プレビュー：変換結果の色をリアルタイムで確認できる
- 🎛 カラーバリエーション生成：HSL の L（明度）値だけを変えてカラースケールを設計
- ♿ アクセシビリティ前処理：RGB 値をコントラスト比チェックツールへ渡す下準備に活用
🚀 使い方
-
「🎨 ピッカーで選択」ボタンをクリックして、カラーピッカーから色を選びます。
ヒント：OS のカラーピッカーが開くので、スポイトツールで画面上の任意の色を吸い取ることもできます。 -
または HEX 入力欄に
#ff0000などを直接入力します。
ヒント：「#」は省略してff0000の形式で入力することもできます。 -
あるいは RGB（R・G・B 各 0〜255）や HSL（H: 0〜360, S・L: 0〜100）の数値を入力します。
ヒント：同じ色相で明るさだけを変えたいときは H と S を固定したまま L の値だけを変更します。 - 入力に応じて他の形式と色プレビューが自動更新されます。
-
各フィールド横の 📋 ボタンまたは下部の CSS スニペットからコピーします。
ヒント：CSS スニペット欄はbackground-color/color/border-colorなど目的のプロパティに合わせてコピーできます。
💡 活用例
Figma / デザインツールからのコピー
Figma や Adobe XD では色が RGB や HEX で表示されます。このツールを使えば、CSS で hsl() 形式を使いたい場合にも瞬時に変換できます。デザインと実装の間をスムーズに橋渡しできるため、コーディング作業の効率が上がります。
CSS カスタムプロパティの設計
デザインシステムを構築する際、同じ色相で明度違いのカラートークンを作成するには HSL が便利です。ベースカラーの HEX を入力して HSL に変換し、L（明度）の値だけを 10〜90 の範囲で調整することでカラースケールを設計できます。たとえば --color-primary-100 から --color-primary-900 まで一貫した色調のスケールを作れます。
テーマカラーの確認とアクセシビリティ対応
旧来の CSS ファイルで #1a2b3c のような HEX が使われているとき、RGB 値に変換してアクセシビリティチェックツールに貼り付けるといった用途に活用できます。WCAG 2.1 のコントラスト比（AA: 4.5:1 以上、AAA: 7:1 以上）を満たすかどうかの確認に必要な RGB 値を素早く取り出せます。
カラースキームの設計（補色・類似色）
HSL モデルでは補色（H ± 180°）や類似色（H ± 30°）を数値で直感的に計算できます。ベースカラーを HSL に変換してから H 値を操作することで、一貫したカラースキームのバリエーションを素早く試せます。
🔍 カラーモデルの技術的背景
HEX（16進数カラーコード）
CSS で最も広く使われる形式です。#RRGGBB の形で各チャンネルを 00〜FF の 16 進数 2 桁で表現します。3 桁の短縮形 #RGB も使用でき、例えば #f09 は #ff0099 と同じです。Web 上でのカラーコードの共有や設計仕様書への記載に広く使われています。
RGB（Red / Green / Blue）
光の三原色モデルです。各チャンネルを 0〜255 の整数で表現し、rgb(255, 0, 0) は純粋な赤を意味します。CSS の rgb() / rgba() 関数でそのまま使用できます。コントラスト比の計算や画像処理ライブラリとのデータ受け渡しには RGB が標準的に使われます。
HSL（Hue / Saturation / Lightness）
人間の色覚に近いモデルです。H（色相）は 0〜360 の角度、S（彩度）と L（明度）は 0〜100% で表現します。同じ色相のまま明るさや鮮やかさを調整しやすいため、テーマカラーの設計や CSS カスタムプロパティとの相性が抜群です。ダークモード対応の際に L 値を切り替えるだけで済むため、特に有用です。
色空間の使い分けまとめ
用途に応じて適切な色空間を選ぶことが重要です。HEX はデザイン仕様書・Figma・Zeplin などのデザインツールとのやり取りに最適です。RGB はコントラスト比計算・画像処理・Canvas API との連携に向いています。HSL は CSS 変数でカラーテーマを管理する場合や、同系色のバリエーションを系統的に生成するのに最適です。
変換式の概要
RGB → HSL の変換は、R・G・B を 0〜1 に正規化した後、最大値と最小値の差（デルタ）を使って L（明度）、S（彩度）、H（色相）を順に計算します。HSL → RGB の逆変換は補助色相（C, X）を求めてから RGB の各チャンネルを復元します。HEX はその値を 16 進数と 10 進数の間で変換するだけです。
❓ よくある質問
HEX は大文字・小文字どちらでも入力できますか？
はい、#FF0000 でも #ff0000 でも受け付けます。出力は小文字に統一されます。
3桁の短縮 HEX（例 #f09）は使えますか？
HEX 入力欄への直接入力では対応しています。カラーピッカーは 6 桁形式を返します。短縮形の #f09 は #ff0099 として処理されます。
CMYK（印刷用）にはどう変換しますか？
本ツールは Web 制作向けに HEX・RGB・HSL のみ対応しています。印刷向けの CMYK への変換は、RGB 値を Photoshop や Illustrator などの印刷ソフトウェアに入力して変換することをお勧めします。なお、RGB と CMYK は色域が異なるため完全な相互変換はできません。
Figma や Adobe で使うにはどの形式が良いですか？
Figma は HEX と RGB（0〜255）の両方に対応しています。Adobe XD・Illustrator・Photoshop も HEX と RGB を標準サポートしています。本ツールの「CSS スニペット」からコピーして直接貼り付けることができます。
アクセシビリティを考慮した色の選び方は？
WCAG 2.1 では、テキストと背景のコントラスト比を AA レベルで 4.5:1 以上（大きな文字は 3:1 以上）にすることを推奨しています。本ツールで変換した RGB 値を WebAIM Contrast Checker などのツールに入力してコントラスト比を確認できます。HSL モデルで L 値を調整して明度を変えると、コントラストを改善しやすくなります。
アルファ（透明度）チャンネルには対応していますか？
現在は不透明な色（アルファ = 100%）のみ対応しています。rgba() / hsla() への変換は今後対応予定です。