カラーコード変換ツール
HEX・RGB・HSL・HSV・CMYKを相互変換。透明度（RGBA）対応、WCAGコントラスト比チェック機能付き。
カラーピッカー
クリックして色を選択
Indigo
#6366F1
#
カラーコード
HEX
#6366F1
RGB
rgb(99, 102, 241)
RGBA
rgba(99, 102, 241, 1)
HSL
hsl(239, 84%, 67%)
HSV
hsv(239, 59%, 95%)
CMYK
cmyk(59%, 58%, 0%, 5%)
NAME
indigo
RGB
HSL
コントラスト比
Aa
白背景
4.5:1
Aa
黒背景
4.5:1
明度バリエーション
明るい
暗い
関連色
使い方
1
色を選択
カラーピッカー、HEX入力、またはスライダーで色を選択します。
2
変換結果を確認
HEX・RGB・HSL・HSV・CMYKすべての形式で自動変換されます。
3
コピーして使用
必要な形式のコピーボタンをクリックしてコードを取得します。
カラーコード変換ツールとは
Web制作やデザインに必須のカラーコード変換ツールです。HEX、RGB、HSL、HSV、CMYKを相互に変換でき、透明度（Alpha）にも対応。コントラスト比チェックでアクセシビリティも確認できます。
機能
- リアルタイム変換入力と同時にすべての形式に自動変換。
- 透明度対応RGBA・HSLA形式で透明度を設定可能。
- コントラスト比WCAG基準でアクセシビリティをチェック。
- 関連色表示補色・類似色・明度バリエーションを自動表示。
活用シーン
- Webサイトのカラー設計
- CSSでのカラー指定
- デザインツールとの連携
- アクセシビリティチェック
- 配色パターンの検討
関連ツール・記事
カラーコードの変換に慣れたら、配色全体の設計にも挑戦してみましょう。複数色のバランスを考えるならカラーパレット生成ツール、2色を混ぜた中間色を作るならカラーミキサー、1色から明暗のトーンをまとめて作るならカラーシェード生成ツールが便利です。文字色と背景色の読みやすさはカラーコントラストチェッカーで確認できます。色の表記そのものを基礎から学びたい方はHEXとRGBの基礎やHSLカラーコードの解説もおすすめです。
よくある質問
HEX、RGB、HSL、HSVの違いは？
HEXは16進数表記、RGBは赤・緑・青の値、HSLは色相・彩度・明度、HSVは色相・彩度・明度(Value)で色を表現します。HSLとHSVの違いは明度の計算方法にあり、HSVはデザインツールでよく使用されます。
コントラスト比とは何ですか？
文字色と背景色の明るさの比率です。WCAG基準ではAA（4.5:1以上）、AAA（7:1以上）が推奨され、視認性の高いデザインに重要です。
透明度（Alpha）はどこで使いますか？
オーバーレイ、ホバーエフェクト、影など、半透明の効果が必要な場面で使用します。RGBA・HSLA形式でCSSに指定できます。
「色名（近似）」はどうやって決まりますか？
現在の色を、CSSで定義された約140個の名前付きカラー（red、indigo、tomatoなど）とRGB空間上の距離で比較し、最も近い色名を自動表示します。あくまで近似のため、表示された色名のコードと現在のHEXは完全一致しない場合があります。CSSで直接色名を使いたいときの目安としてご利用ください。
もっと高度な配色や色の調整はできますか？
本ツールは単色の変換と確認に特化しています。複数色の配色設計や色の混合、明暗トーンの一括生成は、関連ツールのカラーパレット生成・カラーミキサー・カラーシェード生成をあわせてご利用ください。