カラー変換
HEX、RGB、HSL、CMYKなど複数形式のカラーコードを相互変換するオンラインツールです。入力したカラーをリアルタイムでプレビューしながら変換結果を確認でき、CSSやデザインツール向けのカラーコード取得に役立ちます。デザイナー・フロントエンド開発者必携のツールです。
最終更新:
使い方
使い方を開く使い方を閉じる
- 1
カラーコードを入力
入力欄にHEX（#FF5733）、RGB（rgb(255,87,51)）、HSL（hsl(9,100%,60%)）のいずれかの形式でカラーコードを入力します。
- 2
変換結果を確認
入力したカラーが自動的にHEX、RGB、HSL、HSV、CMYKの各形式に変換されます。プレビューで色を視覚的に確認できます。
- 3
必要な形式をコピー
各形式の横にある「コピー」ボタンをクリックして、必要なカラーコードをクリップボードにコピーします。
カラー入力
HEX (#FF5733)、RGB (rgb(255,87,51))、HSL (hsl(9,100%,60%)) に対応
プレビュー
変換結果
HEX
#3B82F6CSS RGB
rgb(59, 130, 246)CSS HSL
hsl(217, 91%, 60%)RGB
R: 59, G: 130, B: 246HSL
H: 217°, S: 91%, L: 60%HSV
H: 217°, S: 76%, V: 96%CMYK
C: 76%, M: 47%, Y: 0%, K: 4%※ CMYK/HSL/HSV は整数丸めのため、往復変換で±1〜2程度ズレる場合があります
カラー変換ツールとは
カラー変換ツールは、Web開発やデザインで使用される様々な色表現形式を相互変換できるオンラインツールです。HEX（16進数）、RGB、HSL、HSV、CMYKなど主要なカラーフォーマットに対応し、デザインツールやCSSでの色指定を効率化します。入力と同時にリアルタイムで変換結果が表示され、プレビューで実際の色を確認できます。 Web上で色を表現するカラーモデルにはそれぞれ異なる特徴と用途があります。RGB（Red/Green/Blue）はディスプレイが光の三原色で色を表現する仕組みに基づいたモデルで、CSS・HTML・各種プログラミング言語で標準的に使用されます。HEXはRGBの各成分を16進数で表記する形式（#RRGGBB）で、CSSでの色指定において最も広く使われています。 HSL（Hue/Saturation/Lightness）は、色相・彩度・明度で色を表現するモデルです。人間の色の認識に近い表現方法で、「少し明るくしたい」「彩度を落としたい」といった直感的な色調整に適しています。CSS3で正式にサポートされ、モダンなCSSではHSLでの色指定が推奨される場面が増えています。さらにCSS Color Level 4では、OKLCH（知覚的に均一な色空間）やLCH形式も導入されており、色表現の選択肢は広がり続けています。 CMYK（Cyan/Magenta/Yellow/Key＝Black）は印刷で使用される減法混色モデルです。RGBが光を混ぜて色を作るのに対し、CMYKはインクを重ねて色を作るため、色域（表現できる色の範囲）が異なります。そのため、RGB/HEXで指定した色をそのままCMYKに変換すると、画面上とは異なる印象の色になることがあります。印刷物のデザインでは、最終的にCMYKでの出力結果を確認することが重要です。 アクセシビリティの観点では、テキストと背景のコントラスト比がWCAG（Web Content Accessibility Guidelines）で規定されており、通常テキストでは4.5:1以上、大きなテキストでは3:1以上のコントラスト比が求められます。色の変換結果を活用して、デザインのアクセシビリティチェックにもお役立てください。
主な機能
- HEX、RGB、HSL、HSV、CMYKの相互変換
- 入力形式の自動検出（HEX、RGB、HSL対応）
- リアルタイムのカラープレビュー表示
- CSS形式（rgb()、hsl()）でのコピー機能
- ランダムカラー生成機能
こんな場面で役立ちます
- デザインツールとCSSで異なる形式の色指定が必要なとき
- ブランドカラーを各形式で統一管理したいとき
- 印刷用（CMYK）とWeb用（RGB/HEX）の色変換
- HSLで色相・彩度・明度を調整したいとき
- カラーパレットの作成・共有時
よくある質問
HEX、RGB、HSLの違いは何ですか？
HEXは16進数で色を表現し、CSSで広く使用されます。RGBは赤・緑・青の光の三原色で色を指定します。HSLは色相・彩度・明度で色を表現し、直感的な色調整に適しています。
CMYKとは何ですか？
CMYKはシアン（C）、マゼンタ（M）、イエロー（Y）、ブラック（K）の4色で色を表現する形式で、主に印刷で使用されます。RGBとは色域が異なるため、完全な変換は難しい場合があります。
変換後の値が元と少しずれるのはなぜですか？
CMYK、HSL、HSVは整数値に丸められるため、往復変換（例：HEX→HSL→HEX）で±1〜2程度の誤差が生じることがあります。これは正常な動作です。
対応している入力形式は何ですか？
HEX（#RGB、#RRGGBB）、RGB（rgb(R,G,B)）、HSL（hsl(H,S%,L%)）の3形式に対応しています。入力形式は自動で検出されます。
透明度（アルファ値）には対応していますか？
現在のバージョンでは透明度（アルファ値）には対応していません。不透明な色のみ変換できます。
CSSではHEXとRGBのどちらを使うべきですか？
機能的にはどちらも同じ色を表現できますが、HEX（#RRGGBB）はCSSでの色指定で最も広く使われており、デザインカンプやスタイルガイドでも標準的です。HSLは色の調整（明度や彩度を変えたい場合）に直感的で、CSS変数と組み合わせてテーマカラーを管理する場合に便利です。プロジェクトの規約やチームの慣習に合わせて選択してください。
印刷用のCMYK値をWeb用に正確に変換できますか？
RGB（加法混色）とCMYK（減法混色）は色の表現原理が異なるため、完全に正確な変換はできません。特に鮮やかな青や緑はCMYKの色域外となり、変換すると色がくすんで見えることがあります。印刷物の正確なカラーマッチングには、プロファイル変換に対応した専用ソフト（Adobe Photoshop等）の使用を推奨します。本ツールのCMYK変換は参考値としてご利用ください。
HSVとHSLの違いは何ですか？
HSVはValue（明度）を使い、HSLはLightness（輝度）を使います。HSVはPhotoshopのカラーピッカーで採用されており、色の鮮やかさを直感的に調整できます。HSLはCSSで広く使われ、L=50%が純色、L=0%が黒、L=100%が白という対称的な構造が特徴です。用途に応じて使い分けてください。
アクセシビリティのコントラスト比チェックに使えますか？
本ツールは色の変換に特化しており、コントラスト比の計算機能は含まれていませんが、変換結果を活用してコントラスト比を確認できます。WCAG（Web Content Accessibility Guidelines）ではテキストと背景色のコントラスト比が通常テキストで4.5:1以上、大きなテキストで3:1以上必要です。RGB値をもとにオンラインのコントラスト比チェッカーで確認することをおすすめします。