カラーコンバーター — HEX、RGB、HSL、HSV、CMYKを相互変換
このカラーコンバーターでは、HEX、RGB、HSL、HSV/HSB、CMYKの5つの形式のいずれかで色を編集すると、他のすべての形式が瞬時に連動して更新されます。HEX、RGB、HSLではアルファ（透明度）にも対応しているため、不透明な色と同じ感覚でrgba()やhsla()、8桁hexといった半透明のCSSカラーも扱えます。CSS用にすぐ使えるrgb()/hsl()文字列が欲しい開発者、画面上の色を印刷用にCMYKへ変換したいデザイナー、単純にHEXコードが他の形式でどう見えるかを知りたい方まで、幅広いニーズに応えるツールです。
クイック回答
カラーコンバーターは、HEX、RGB、HSL、HSV/HSB、CMYKのいずれかで色を編集すると、他のすべての形式が瞬時に更新されるツールです。HEX、RGB、HSLはアルファ（透明度）にも対応しています。無料で、変換処理はすべてブラウザ内で完結し、どこにもアップロードされません。
RGB
HSL
HSV
CMYK
カラーコンバーター — HEX・RGB・HSL・HSV・CMYK変換の使い方
- 1
HEXコードを入力するか、RGB、HSL、HSV、CMYKの値を直接設定してください。今お手元にある形式のままで構いません。
- 2
値を入力・調整するたびに、他のすべての形式が瞬時に連動して更新されます。
- 3
半透明の色が必要な場合はアルファスライダーを調整してください。HEXフィールドは自動的に8桁に拡張され、RGB/HSLの文字列もrgba()/hsla()に切り替わります。
- 4
リアルタイムのカラースウォッチプレビュー（透明度が分かるようチェッカーボード柄の上に表示されます）で、仕上がりを確認してください。
- 5
コピーボタンをクリックすると、HEXコード、rgb()/rgba()文字列、hsl()/hsla()文字列をそのままクリップボードにコピーできます。
なぜカラーコンバーター — HEX・RGB・HSL・HSV・CMYK変換を使うのか？
色の値が一つの形式のままで済むことはほとんどありません。デザイナーはFigmaファイルからHEXコードを渡してくるかもしれませんし、開発者はそれを透明度付きのCSS変数用にrgba()文字列として必要とするかもしれません。さらに印刷会社はオフセット印刷のためにCMYKのパーセンテージを求めてきます。HEX、RGB、HSL、HSV/HSB、CMYKというこれら5つの表現の間を手作業で変換するのは、多くの人が一度調べただけで忘れてしまった計算式を暗記していることを前提としてしまいます。このツールはその手間を取り除きます。手元にある形式で色を編集すれば、デザインツールやブラウザで使われているのと同じ標準的な変換計算によって、他のすべての形式が即座に再計算されます。ツール内部では常に一つの色を基準として保持し、表示されるすべての形式はそこから導き出されるため、変換した値を別のツールへ手で再入力するときにありがちな、値同士のズレが生じることもありません。HSV/HSBとCMYKを含めているのは、Web標準のHEX/RGB/HSLとは異なる場面で登場するからです。HSVは多くのデザインソフトのカラーピッカー（例えばPhotoshopの定番の色相環とスライダーのダイアログ）で使われ、CMYKは色が画面上のピクセルではなく物理的なインクになる場面で必要とされます。