変換結果 — クリックでコピー
HEX
#2D6BE4
RGB
rgb(45, 107, 228)
HSL
hsl(221, 76%, 54%)
コントラスト比（WCAG）
Aa サンプルテキスト
白背景 — 比率: 4.5:1
Aa サンプルテキスト
黒背景 — 比率: 3.2:1
合わせるおすすめ色（配色パターン） — スウォッチをクリックで切り替え
CSS用コード
使い方
🎨 カラーピッカーでビジュアル選択
⌨️ HEXを直接入力（#不要でもOK）
🎚️ RGB スライダーで微調整
📋 各カードをクリックでコピー
🌈 補色スウォッチをクリックで切り替え
カラーコード変換とは？このツールでできること
カラーコード変換は、色を表す様々な形式（HEX・RGB・HSL・HSV・CMYK）を相互に変換するツールです。ウェブデザイン・グラフィックデザイン・印刷物作成など、異なるソフト・環境間で色を統一する際に役立ちます。
デザインソフトで使ったCMYK値をウェブ用のHEXコードに変換したい、CSSのRGB値をHSLに変換して調整したい、といった場面で手軽に変換できます。
使い方
- 変換元の形式を選ぶ — HEX・RGB・HSL・HSV・CMYKから入力形式を選択します。
- 色の値を入力する — 色コードや数値を入力すると、他の形式に自動変換されます。
- 結果をコピーする — 変換結果をワンクリックでコピーして使えます。
こんなときに使えます
- PhotoshopのCMYK値をWeb用のHEXコードに変換したい
- CSSのRGB値をHSLに変換して色相・彩度で調整したい
- デザインカンプから色コードを取り出してコーディングに使いたい
- 印刷用CMYK値とWeb用RGB値の対応を確認したい
よくある質問
Q. どの形式に変換できますか？
A. HEX（#RRGGBB）・RGB・RGBA・HSL・HSLA・HSV・CMYKの相互変換に対応しています。
Q. CMYKとRGBは完全に一致しますか？
A. CMYKとRGBは色域が異なるため、完全に一致しない場合があります。印刷物とモニターでの見え方は異なることがあります。
Q. アルファ値（透明度）も変換できますか？
A. RGBAやHSLAなど透明度を含む形式にも対応しています。
Q. 変換結果はどうやって使いますか？
A. 結果の横にあるコピーボタンを押すとクリップボードにコピーされます。
Q. データはサーバーに送られますか？
A. いいえ。すべての処理はブラウザ内で完結します。