カラーモデル変換ツール（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（紙媒体の色再現）。

カラーモデル変換とは

カラーモデル変換とは、同じ色をRGB・HSL・HSV（HSB）・CMYKという異なる表色系の数値に変換することです。RGBはディスプレイが光を発する仕組みに基づく数値、HSL・HSVは色相・彩度・輝度（明度）という人間の感覚に近い軸で色を表した数値、CMYKは印刷インクの重ね合わせに基づく数値で、同じ色でも見ている軸がまったく異なります。

このツールはHEXカラーコードまたはカラーピッカーで指定した1色を、上記4つの表色系すべての数値へ一括変換して表示します。Web制作でCSSの記述形式を変えたい・デザインツール間で色の指定方法が違う・印刷用にCMYK値を確認したいといった、単一の色変換だけでは対応できない「複数モデルを同時に見比べたい」場面に向いています。

カラーモデル変換ツールの使い方

HEXカラーコードを入力する `#`の有無・3桁省略形（`#f60`）のどちらでも入力できます。
またはカラーピッカーで色を選ぶ選んだ色は自動的にHEXコード欄へ反映されます。
プレビューで色を確認する入力値が正しく認識されているかをスウォッチで目視できます。
RGB・HSL・HSV・CMYKの変換結果を確認する 4つの表色系すべての数値が同時に表示されます。
用途に応じて値を使う CSSの`hsl()`関数への転記や印刷用CMYK値の確認など、目的に合わせて数値を利用します。

使いこなすためのヒント

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

カラーモデル変換の活用シーン

CSSでの色指定形式の変換

デザインカンプで指定されたHEXコードを、CSSの`hsl()`関数で色相・彩度を微調整したい場合のHSL値に変換できます。

印刷用データのCMYK値の目安を確認する

Web用に決めたRGB/HEXの配色を印刷物に流用する前に、CMYK換算値を確認しておくと画面と紙の色の差に気付きやすくなります。正確な色再現が必要な場合は印刷会社のICCプロファイルに基づく変換を別途確認してください。

デザインツール間での色の引き継ぎ

Photoshop・Illustrator等はHSV（HSB）でカラーピッカーを表示することが多く、Webのカラーコードと数値がずれて見える場合にこのツールで対応関係を確認できます。

配色の微調整

色相・彩度・輝度の3値に分解しておくと、色相はそのままに明るさだけを変える、といった調整の方向性を掴みやすくなります。細かい配色パターンの作成には別途カラーパレット生成ツールも活用してください。

用語集

RGB: 赤（Red）・緑（Green）・青（Blue）の光を混ぜ合わせて色を表現する加法混色モデルです。各成分を0〜255の数値で表し、ディスプレイやCSSの基本的な色指定方式として使われます。
HSL: 色相（Hue）・彩度（Saturation）・輝度（Lightness）の3要素で色を表すモデルです。数値だけのRGBよりも「明るさ」「鮮やかさ」を直感的に調整しやすいのが特徴です。
HSV（HSB）: 色相（Hue）・彩度（Saturation）・明度（Value/Brightness）の3要素で色を表すモデルです。HSLと似ていますが明度の定義が異なり、Photoshop等のカラーピッカーで広く採用されています。
CMYK: シアン（Cyan）・マゼンタ（Magenta）・イエロー（Yellow）・キープレート（Key plate、黒）の4色インクを重ねて色を表す減法混色モデルです。印刷物のデザイン（DTP）で使われます。
色相（Hue）: 赤・緑・青などの「色の種類」を0〜360度の角度で表した値です。HSL・HSVで共有される軸で、円環状に赤から始まり黄・緑・青・紫を経て赤に戻ります。
彩度（Saturation）: 色の鮮やかさの度合いを表す値です。彩度が0%に近いほど灰色に近づき、100%に近いほど鮮やかな純色になります。
輝度/明度（Lightness / Value）: HSLの輝度（Lightness）は黒〜白の混ざり具合、HSVの明度（Value）はその色にどれだけ黒が混ざっているかを表します。同じ色でもモデルによって数値の意味が異なる代表例です。
キープレート（K）: CMYKにおける黒インクの成分です。シアン・マゼンタ・イエローの3色だけでは深みのある黒を再現しにくいため、印刷では黒インクを別途重ねて文字や濃い色をくっきりさせます。

よくある質問

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が使われ続けています。

すべての余談を見る