カラーモデル変換ツール(RGB・HSL・HSV・CMYK)

HEXカラーコードやカラーピッカーで色を指定すると、RGB・HSL・HSV(HSB)・CMYKの4つの表色系での値を同時に計算して表示します。

各カラーモデルの違い

モデル 概要 主な用途
RGB 光の三原色(赤・緑・青)を0〜255の数値で混合して色を表現する加法混色モデル。 ディスプレイ・Web開発(CSS)・画像編集ソフトの基本形式。
HSL 色相(Hue)・彩度(Saturation)・輝度(Lightness)の3要素で色を表現するモデル。人間の直感に近い形で色を調整しやすい。 CSSの`hsl()`関数、配色ツールでの色相・彩度調整。
HSV/HSB 色相(Hue)・彩度(Saturation)・明度(Value/Brightness)の3要素で色を表現するモデル。HSLと似ているが明度の定義が異なる。 Photoshop・Illustrator等のデザインツールのカラーピッカー。
CMYK シアン・マゼンタ・イエロー・キープレート(黒)の4色インクを重ねて色を表現する減法混色モデル。 印刷物のデザイン・DTP(紙媒体の色再現)。

使い方のヒント

  • HEXコード欄には`#`ありなし・3桁省略形(例: `#f60`)のどちらの形式でも入力できます。
  • カラーピッカーで選んだ色は自動的にHEXコードへ反映されるため、感覚的に色を選びながら数値を確認できます。
  • CSSで背景色や文字色を`hsl()`関数で指定したい場合は、このツールが計算したHSL値をそのまま`hsl(H, S%, L%)`の形式で使えます。
  • 印刷用データを作成する際は、ここで表示されるCMYK値はあくまで簡易換算値であり、実際の印刷会社が使うICCプロファイルに基づく変換値とは若干異なる場合がある点に注意してください。

よくある質問

RGBは赤・緑・青の光の三原色をそれぞれ0〜255の数値で混ぜ合わせて色を表現する方式で、コンピューターが色を扱う際の基本形式です。一方HSLは同じ色を「色相・彩度・輝度」という人間の感覚に近い3つの軸で表現し直したもので、「もう少し明るく」「もう少し鮮やかに」といった直感的な色の調整がしやすいという特徴があります。

HSVとHSLはどちらも色相(H)と彩度(S)を共有しますが、3つ目の軸の定義が異なります。HSLの輝度(Lightness)は「黒〜白の混ざり具合」を表すのに対し、HSVの明度(Value)は「その色にどれだけ黒が混ざっているか」だけを表します。純色に近い鮮やかな色を選びたい場合はHSVのほうが直感的に扱いやすいとされ、Photoshop等の多くのデザインツールで採用されています。

理論上はシアン・マゼンタ・イエローの3色インクを均等に重ねれば黒になるはずですが、実際のインクは完全な純色ではないため、3色を混ぜても濁った茶色に近い色にしかなりません。そこで印刷業界では黒インク(キープレート、K)を別途追加し、文字などの黒をくっきり印刷できるようにしています。

ディスプレイは赤・緑・青の光を混ぜ合わせて色を作る「加法混色」であるため、光の三原色に基づくRGBが適しています。一方、紙にインクを重ねる印刷は光を吸収して色を作る「減法混色」であるため、インクの三原色に黒を加えたCMYKが使われます。両者は原理が異なるため、画面で見た色と印刷した色が完全には一致しない「色域(ガモット)」の違いが生じることがあります。
ツールくん

余談ですが ― カラーモデルの歴史と使い分け

RGBの加法混色の考え方自体は19世紀の色彩理論に遡りますが、コンピューターグラフィックスで広く使われるようになったのは1970年代以降です。当時のカラーテレビやディスプレイがブラウン管の蛍光体(赤・緑・青の3種)を発光させて色を作る仕組みだったため、その物理的な構造にそのまま対応する数値モデルとしてRGBが採用されました。

HSLとHSVはいずれも1970年代から1980年代にかけて、コンピューターグラフィックス研究者によって「人間がRGBの数値を直接調整するのは直感的でない」という課題を解決するために考案されました。特にHSVは1978年にAlvy Ray Smith(後にPixarの共同創業者の一人となった人物)が発表した論文で定式化されたことで知られています。

CMYKは印刷技術の歴史とともに発展してきた表色系で、4色分解印刷(four-color process printing)という手法に由来します。C・M・Yの3色だけでは深みのある黒が再現しにくいという印刷特有の課題を解決するためにK(キープレート)が加えられ、今日でもオフセット印刷・インクジェットプリンターなど多くの印刷技術の標準としてCMYKが使われ続けています。