カラー変換
どんな色でも HEX・RGB・HSL・HSV・CMYK の間で自在に変換できます。色を選ぶか、好きな形式で値を入力すれば、ほかのすべての表記がブラウザ上で即座に更新されます。
カラー形式
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
カラー変換 の使い方
- 1
色を選ぶか貼り付ける
スウォッチをクリックしてカラーピッカーを開くか、HEX・RGB・HSL のいずれかの入力欄に値を貼り付けます。どの色を選んでも、ツール全体がその色に追従します。
- 2
好きな形式で編集する
HEX・RGB・HSL の入力欄に直接入力します。値を変更した瞬間に、HSV と CMYK を含むほかのすべての表記が再計算されます。
- 3
すべての表記を確認する
同じ色を5通りの表記で一度に確認できるので、別のツールを使わなくても CSS・印刷・画像編集ソフトをまたいでデザインの色を合わせられます。
- 4
必要な値をコピーする
各値の横にあるコピーボタンを押すとクリップボードに入り、スタイルシートやデザインファイルにそのまま貼り付けられます。
よくある質問
HEX カラーを RGB に変換するには?
#f5530c のような HEX コードを HEX の入力欄に貼り付けます。すると、そのすぐ下に RGB 値（この例では rgb(245, 83, 12)）が HSL・HSV・CMYK とともに即座に表示されます。HEX と RGB は同じ8ビットの色チャンネルを表すため、変換は正確です。
HSL と HSV の違いは何ですか?
どちらも色を色相で表しますが、HSL はそこに彩度（Saturation）と輝度（Lightness）を組み合わせるのに対し、HSV（HSB とも呼ばれます）は彩度と明度（Value）、つまり明るさを使います。HSL は CSS でよく使われ、HSV は多くの画像編集ソフトやカラーピッカーで見られます。このツールは両方を同時に表示するので、手作業で計算しなくてもデザインツール間を行き来できます。
3桁の短縮形 HEX にも対応していますか?
はい。#f50 のような短縮コードは、ブラウザが展開するのと同じように #ff5500 として読み取られます。HEX は先頭のハッシュ記号（#）を付けても付けなくてもよく、大文字でも小文字でも入力できます。
CMYK は何に使いますか?
CMYK は、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、そして黒を表すキー（Key）のことで、印刷で使われるインクモデルです。ここに表示される値は RGB から数学的にそのまま変換したものです。画面とインクでは色の再現方法が異なるため、色が重要な印刷作業では、必ずお使いのプリンターの固有プロファイルと照らし合わせて確認してください。
入力したデータはサーバーにアップロードされますか?
いいえ。すべての変換はブラウザ内だけで実行されます。入力した内容がアップロード・記録・保存されることはないため、作業内容は完全にプライベートに保たれ、このツールはオフラインでも動作し続けます。
関連ツール
こちらの便利なツールもどうぞ