カラーピッカーとコンバーター

透明度サポート付きで視覚的に色を選択し、HEX、RGBA、HSLA、HSV/HSB、CMYK形式間で変換します。

ウィキペディアのカラーモデル

カラーモデルについてもっと詳しく

カラーモデル

カラーモデルは、色を数値として記述するシステムです。出力がスクリーン、プリンター、デザイン仕様のいずれであるかによって、異なるモデルが使用されます。

RGB / RGBA
フォーマット

RGBは赤、緑、青の光を混合して色を定義します。各チャネルの範囲は0〜255です。rgb(255, 0, 0)は純粋な赤です。rgb(255, 255, 255)は白です。A（アルファ）チャネルは透明度を追加し、0（完全に透明）から1（完全に不透明）の範囲です。例えば、rgba(255, 0, 0, 0.5)は半透明の赤です。RGBはスクリーンやデジタルディスプレイのネイティブカラーモデルです。

歴史

RGBモデルは、19世紀のヤング＝ヘルムホルツ三色説に根ざしています。ジェームズ・クラーク・マクスウェルは1861年に最初のRGBカラー写真実験を行いました。RGBは1930年代から1940年代にかけてのカラーCRTテレビの開発により電子ディスプレイの標準となり、その後コンピューターモニターにも採用されました。sRGB色空間は1997年1月にHTML 3.2でウェブ標準として正式に採用されました。

HEX / HEXA
フォーマット

HEXは16進数を使用したRGB値のコンパクトな表記法です。#FF0000はrgb(255, 0, 0)と同じです。16進数の各ペアが1つのチャネルを表します：#RRGGBB。8桁形式の#RRGGBBAAはアルファチャネルを追加し、00は完全に透明、FFは完全に不透明です。例えば、#FF000080は50%の不透明度の赤です。#F00のような短縮形は#FF0000に展開されます。

歴史

16進カラー表記は1990年代半ばの初期のウェブブラウザに由来します。MosaicとNetscape Navigatorの最初のバージョンはX11カラーネームシステムを継承しました。1996年12月にホーコン・ヴィウム・リーとバート・ボスが発表したCSS Level 1は、16進トリプレットをウェブ上で色を指定する主要な方法として正式に標準化しました。

HSL / HSLA
フォーマット

HSLは色相、彩度、明度で色を記述します。色相はカラーホイール上の角度（0-360）です：0は赤、120は緑、240は青です。彩度（0-100%）は色の強度を制御します。明度（0-100%）は明るさを制御し、0%は黒、100%は白です。HSLは明るさと彩度を独立して調整できるため、RGBよりも直感的であることが多いです。

歴史

HSLは1978年にジョージ・H・ジョブロブとドナルド・グリーンバーグがComputer Graphics誌の論文で初めて記述しました。RGBの根本的な問題を解決するために作成されました：赤、緑、青の値を混合することは人間にとって直感的ではありません。HSLはRGB色空間を再配置し、アーティストやデザイナーが色（色相）、鮮やかさ（彩度）、明るさ（明度）の観点で考えられるようにしました。これは人が色を自然に記述する方法により近いものです。

HSV / HSB
フォーマット

HSV（色相、彩度、明度）はHSLに似ていますが、明度の代わりに「バリュー」（明るさ）を使用します。100%のバリューでは、完全に彩度のある色は純粋で明るいです。HSVはカラーピッカーの動作により自然にマッピングされます：彩度/明度パネルでSとVを調整し、色相スライダーでHを調整します。

歴史

HSVは1978年8月にニューヨーク工科大学コンピュータグラフィックス研究所で勤務していたアルヴィ・レイ・スミスによって記述されました。HSLと同じComputer Graphics誌に掲載されました。スミスは初期のデジタルペイントプログラムで使用するためにHSVを設計しました。アーティストが画面上で直感的に色を選択する方法が必要でした。HSVのシリンダーモデルにより、色相スライダーと彩度/明度パネルを備えたカラーピッカーとして実装することが自然にできました。

CMYK
フォーマット

CMYK（シアン、マゼンタ、イエロー、キー/ブラック）は印刷で使用されます。RGBが加法混色（光）であるのに対し、CMYKは減法混色（インク）です。各値はそのインクの適用率を表します。cmyk(0, 100, 100, 0)は赤を生成します。RGBとCMYKの変換は、異なる色域（ガマット）をカバーするため近似的です。

歴史

CMYKの基礎は、1710年頃に別々の銅版を使用したハーフトーンカラー印刷を発明したヤコブ・クリストフ・ル・ブロンにまで遡ります。彼は最初に赤、黄、青の版を使用し、後にシャープな輪郭とテキストのために黒の版を追加しました。現代の4色CMYKプロセスは1890年代にカラー新聞イラストのために初めて実装されました。黒の版は他の版が位置合わせ（key）される細部を持つため「キー」版と呼ばれます。

CSSカラーフォーマット

現代のCSSはいくつかの色表記をサポートしています：

  • #FF5733または#ff5733（HEX）
  • rgb(255, 87, 51)またはrgba(255, 87, 51, 0.5)
  • hsl(14, 100%, 60%)またはhsla(14, 100%, 60%, 0.5)
  • 名前付きの色：red、cornflowerblue、rebeccapurple（全148色）