カラーコード変換ツール
HEX・RGB・HSL・HSV・CMYKを相互変換。透明度（RGBA）対応、WCAGコントラスト比チェック機能付き。
カラーピッカー
クリックして色を選択
#
カラーコード
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%)
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でのカラー指定
- デザインツールとの連携
- アクセシビリティチェック
- 配色パターンの検討
よくある質問
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に指定できます。