カラーコンバーター

カラー形式を理解する

HEX、RGB、HSL、HSV、CMYKを扱うコンバーターは、同じ知覚現象を記述する5つのかなり異なる方法に触れています。それらは異なる人々、異なる時代、異なる機械、異なる優先順位で発明されました。値を1つの表記から別の表記に滑らせるのは些細な算術のように見えますし、表面上は通常そうですが、歴史は各表記がなぜ存在するかを説明し、数学はそれらの間のラウンドトリップが常に無損失ではない理由を説明します。

HEX、sRGBトリプル用の16進省略形

16進カラー表記はワークステーションとグラフィックファイル形式でCSSより数年先行しますが、その普遍的なウェブの意味はW3Cが1996年12月17日に公開したCSS1勧告で確定しました。CSS1はHåkon Wium LieとBert Bosの作業でした: Lieは1994年10月CERNにいる間にCascading Style Sheetsを提案し、Bosは1995年7月にINRIAでプロジェクトに参加しました。CSS以前、HTML 1.0には色の概念がまったくなく、最初の18タグセットは厳密に構造的でした。16進カラーは3バイト(またはアルファ付きの4バイト)の整数で、ブラウザはこれを赤、緑、青のチャネルに分割します。6桁の形式 #RRGGBB は各チャネルに8ビットの値、0-255を与え、2つの16進数で符号化されます。3桁の省略形 #RGB は各桁を2倍にした6桁の形式と正確に同等なので、#F0A と #FF00AA は同じ色です。CSS Color Module Level 4はアルファチャネルを持つ4桁(#RGBA)と8桁(#RRGGBBAA)の形式を正式に追加し、00 は完全に透明、FF は完全に不透明です。ブラウザサポートはChrome 62、Firefox 49、Safari 10、Edge 79で実現したので、2026年時点では本質的に普遍的です。Hexは短く、コピペ可能で、曖昧でないため人気があり、background: #1e90ff はFigma、VS Code、Slack、メール間のコピー/ペーストで誰もが空白やカンマについて考える必要なく生き残ります。

RGB、マクスウェルの三色原理、デジタル化

「RGB」のアイデア、つまり目が見るどんな色も3つの主光の制御された量を混ぜることで一致させることができるというものは、カラー写真より前から存在します。ジェームズ・クラーク・マクスウェルは1855年の論文「Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness」でそれを最初に提案し、エディンバラ王立協会に届けました。6年後の1861年5月17日、マクスウェルは原理を公に実証しました: 写真家トマス・サットンにタータンリボンの3枚のモノクロプレートを作らせ、それぞれを赤、緑、青のフィルターを通して撮影し、3枚のプレートを同じフィルターを通して再びスクリーンに投影しました。重ね合わされた投影は認識可能なカラー画像を生成し、加色合成による世界初のカラー写真でした。マクスウェルの加色RGBは、それ以来あらゆる電子ディスプレイの基盤となりました。現代のウェブRGBは具体的にはsRGBを意味し、これは1996年にHewlett-PackardとMicrosoftによって提案された「標準RGB」色空間(著者: HPのMichael StokesとRicardo Motta、MicrosoftのMatthew AndersonとSrinivasan Chandrasekar)であり、IEC 61966-2-1:1999として標準化されました。動機は平凡でした: 初期のウェブはデフォルトで仮定するのに十分にシンプルで、安価なCRTで許容できるように見えるのに十分に堅牢で、画像ファイルを膨らませないように十分に小さい色空間を必要としていました。25年後、それは依然としてあらゆるブラウザ、埋め込みICCプロファイルを持たないあらゆるJPEGとPNGのデフォルトのワーキングスペースです。CSSでは、RGBは rgb(255, 0, 153)(レガシーのカンマ構文)または rgb(255 0 153)(モダンなスペース区切り、CSS Color Level 4ごと)と書かれます。

HSLとHSV、Alvy Ray Smithの知覚軸

RGBはハードウェアには優れています(ディスプレイには文字通り赤、緑、青のサブピクセルがあります)が、人間の直感には役に立ちません。誰もが「緑を12単位増やし、赤を7単位減らしたい」と推論してウェブデザインを微調整することはありません。デザイナーは色相(どの色)、彩度(どれくらい鮮やか)、明度(どれくらい明るい)で考えます。変換はAlvy Ray Smithの1978 SIGGRAPH論文「Color Gamut Transform Pairs」で形式化され、1978年8月号のComputer Graphicsの12-19ページに掲載されました。SmithはNew York Institute of Technology Computer Graphics Labにおり、以前はXerox PARCで働いていました。論文は、出版時点でRGB-to-HSV変換がフレームバッファのペイントプログラムで「約4年間成功裏に使用されていた」と指摘しました、Smithは実際の慣行を文書化していたのであり、ゼロから発明していたわけではありません。彼は1990年、とりわけ「HSV(別名HSB)色空間モデル」のためにSIGGRAPH Computer Graphics Achievement Awardを共同受賞しました。HSLとHSVは色相軸(角度、0°-360°、カラーホイールの周り: 0°赤、120°緑、240°青)と彩度軸(0%グレーから100%純粋まで)を共有しますが、第3軸が異なります。HSV(色相、彩度、明度)はVをRGBチャネルの最大値として扱い、純白はV=100%かつS=0%を必要とし、純赤はV=100%, S=100%です; 白と赤の両方が円柱の上部に存在します。HSL(色相、彩度、明度)はLを最も明るいチャネルと最も暗いチャネルの中点として扱い、純白はSに関係なくL=100%で、純赤はL=50%, S=100%です; 白は円柱の上部に存在し、最も鮮やかな色は赤道に存在します。HSLがCSSのために特に選ばれたのは、L=50%を中心とする対称性が、デザイナーが色合いと陰について考える方法と一致するためです。

CMYK、プリンターの減色モデル

モニターは光を発しますが(加色: 多いほど明るく、3つすべてが最大 = 白)、インクは光を吸収します(減色: 多いほど暗く、3つすべてが最大 = 黒、理論上)。4色プロセス印刷、シアン、マゼンタ、イエロー、加えて黒の「key」プレートは、カラー新聞イラストのために1890年代に商業的に最初に使用されました。Eagle Printing Ink Companyは一般的に1906年に最初の真の4色ウェットインクプロセスのクレジットを受けます。「K」は「key」(他のすべてを登録するプレート、伝統的には黒の詳細プレート)から来ており、「black」からではないため、モデルがCMYBではなくCMYKとなっています。keyプレートは4つの実用的な理由で存在します: 実際のインクで100% C、M、Yを組み合わせると、純粋でない実際の顔料のため、真の黒ではなくくすんだ暗褐色になります; 3色の黒はインクを浪費し、乾燥を遅くします; ウェットな3色の黒は紙を曲げて引き裂きます; そして文字と細い輪郭は鋭さのために単一の高コントラストプレートが必要です。

変換の数学、簡単に

HEX ↔ RGB は些細です、16進文字列を3つの2文字部分文字列に分割し、それぞれを parseInt(hex, 16) で16進整数として解析します; n.toString(16).padStart(2, '0') で反転します。RGB → HSL は最大/最小数学です: chroma = max(R,G,B) − min(R,G,B); lightness = (max + min) / 2; saturation = chroma / (1 − |2L − 1|); hueは、支配的なチャネルを選択しその位置を色相円の6つの60°セクターの1つの角度に変換する区分的公式によって計算されます。(一部の実装は atan2 を使用しますが、Smithの1978年の論文はパフォーマンス上の理由で意図的に三角関数を避けました、atan2 は1970年代のフレームバッファでは高価な命令であり、区分的公式は同じ答えをより速く与えるため残っています。)HSL → RGB はchromaとlightness軸上の右の点にchromaトリプレットを変換するオフセットを持つ区分線形マッピングを介してプロセスを反転します。RGB ↔ HSV は同じスケルトンを使用しますが、異なる垂直軸を持ちます: L = (M+m)/2 の代わりに V = M、明度認識除数の代わりに S = Δ/M。RGB ↔ CMYK は単純な公式 K = 1 − max(R,G,B) を使用し、その後C、M、Yを (1 − channel − K) / (1 − K) として計算します。これは数学的に自己一貫していますが、実際の印刷機が色をどのように再現するかは記述しません、以下の印刷の注意事項を参照してください。

ラウンドトリップ問題

#7A3D5C(HEX)を → HSL → HEXに変換します。#7A3D5C が必ずしも戻ってくるとは限りません。理由は完全にありふれたものです。整数の切り捨て: HEXチャネルは0-255の整数です; HSL変換は浮動小数点を生成します; (1, 121.987, 47.512) を整数に丸めると、ラウンドトリップでは回復できないサブピクセル情報が失われます。Float64の不正確さ: JavaScriptの唯一の数値型はIEEE 754倍精度バイナリ浮動小数点で、52ビットの仮数が約15-17桁の有効10進数を与え、単一の変換には十分ですが、多くの操作を連鎖させると累積します。非対称マップ: chromaがゼロのとき、複数の異なる(R,G,B)トリプレットが同じ(H,S,L)トリプレットにマップできます(任意のグレーは色相が未定義です; 慣例では H = 0 を選ぶか、以前の H を保持します)。実用的なブラウザツールにはこれで十分です、ユーザーは #7A3D5C を入力し、HSLで(322°, 32%, 36%)を見て、#7A3D5C(または1つ違いの #7A3E5D)を戻し受け取ります。表示されるスウォッチが目が期待するものと一致する限り、旅行は良好です。しかし、正直であることに価値があります: 無損失のラウンドトリップは保証されません。

sRGBを超えるモダンCSS色空間

何十年もの間、「ウェブカラー」はsRGBとsRGBのみを意味しました。その仮定は2015年に崩れ、Appleが2015年後期のiMacを「ビルトインのワイドガモットディスプレイを持つ最初のコンシューマーコンピューター」として出荷し、AppleのDisplay P3色空間をサポートしました。P3はDCI-P3として始まり、2005年に劇場投影のためのDigital Cinema Initiativeによって定義されました。AppleのDisplay P3バリアントはDCIのプライマリを保持しましたが、ホワイトポイントをD65(sRGBに一致)に切り替え、暗くなった劇場ではなくデスクトップ/モバイルの視聴に適したsRGBのトーン再現曲線を採用しました。Display P3のガモットは表面積でsRGBよりも約25%大きく、電話とラップトップが測定可能により鮮やかな赤と緑を表示できるようにします。CSSがsRGBの外側の色を記述できるようにするため、W3CのCSS Color Module Level 4は明示的な色空間パラメータを持つ color() 関数を導入しました: color(srgb 1 0.5 0.2)、color(display-p3 1 0.5 0.2)、color(rec2020 1 0.5 0.2)。事前定義された色空間には srgb、srgb-linear、display-p3、a98-rgb(Adobe RGB)、prophoto-rgb、rec2020、xyz、xyz-d50、xyz-d65 が含まれます。通常のsRGBディスプレイでは、ガモット外のP3カラーは、ディスプレイが表示できる最も近いsRGBに相当するものにガモットマップダウンされます。

CSS Color Level 4は lab()、lch()、oklab()、oklch() ファーストクラス関数も追加しました。lab() と lch() は CIE 1976 L*a*b* 色空間を使用し、1976年に Commission Internationale de l'Éclairage によって標準化された、最初に広く展開された知覚的に均一な色空間で、a* と b* 軸は人間の視覚系が実際に色を符号化する方法に一致する赤緑および青黄の反対対に対応します。2020年12月、スウェーデンのデベロッパー Björn Ottosson は「A perceptual color space for image processing」を彼のブログで公開し、Oklab を紹介しました。Ottossonはゲーム業界で数年間単純な色操作を行い、すべての既存の色空間が何らかの形でそれらに失敗したと結論付けました。Oklabは画像処理操作のために特別に調整されています: 2つのOklab色の間のグラデーションは知覚的に滑らかに保たれ、Oklabでの明度調整は人間の目への明度調整のように感じられます。円柱形式の OKLCH は、ほとんどのデザイナーが実際に書くものです。Oklabはブログ投稿の1年後、2021年12月にCSS Color Level 4に追加され、Color Level 4を実装するブラウザでのCSSグラデーションのデフォルト補間スペースになっています。Tailwind CSS v4のカラーパレットはOKLCH座標から生成されます。color-mix() 関数(CSS Color Module Level 5)は Safari 16.2(2022年12月)、Chrome 111(2023年3月)、Firefox 113(2023年5月)で出荷され、2023年5月以来ブラウザでベースラインとして利用可能になりました。

色理論のミニ歴史

ウェブカラーコンバーターは、色を体系的に理解しようとする360年の弧の終わりに位置します。注目すべきマイルストーン: ニュートン(1665-66)はガラスのプリズムを使って太陽光を可視スペクトルに分け、彼のOpticksで7色を特定しました。ゲーテ(1810)は色彩論を出版し、反ニュートン主義の論文で、色の物理学よりも知覚的および感情的次元に興味があり、科学的には間違っていますが、知覚が重要であることについては正しいです。マクスウェル(1855/1861)は上記の通り。イッテン(1961)はBauhausで色彩芸術を出版し、12色相のカラーホイールと、今日でもデザインスクールで教えられている7種類の色のコントラストを成文化しました。Pantone(1963)はPantone Matching System(PMS)を導入し、デザイナーと印刷者の間の色のコミュニケーションを番号付きカタログに変えました、Pantone番号は、システムに加入する世界中のどの印刷者でも正確に同じ色を意味しました。ウェブカラースタックはこれらの伝統すべてから受け継いでいます: ニュートンが可視スペクトルを、マクスウェルが加色プライマリを、イッテンが補色および類似のスキームのデザインスクールの語彙を、Pantoneが数値が知覚体験を表すことができるという実用的な事実を与えます。

アクセシビリティ: 選ぶものに対するWCAGコントラスト

色を選んだら、その上にテキストを置けるかどうかを知る必要があります。WCAG 2.1 Success Criterion 1.4.3(Contrast, Minimum)は通常テキストに対して4.5:1のコントラスト比、大きいテキストに対して3:1(18pt / 24 CSSピクセル通常、または14pt / 19 CSSピクセル太字として定義)を要求します。コントラスト比は相対輝度から計算されます: (L1 + 0.05) / (L2 + 0.05)、L1は明るい色の輝度、L2は暗いものの輝度であり、輝度はガンマ復号されたR、G、Bチャネルの重み付き和で、それらの波長に対する人間の目の感度に一致する重み0.2126、0.7152、0.0722を持ちます。WCAG 2.1 SC 1.4.6(Enhanced)はAAA準拠のためにバーを7:1通常 / 4.5:1大に引き上げます。WCAG 2.1 SC 1.4.11は非テキストコントラスト(UIコンポーネント、フォーカスインジケーター、理解に必要なグラフィックオブジェクト)を3:1でカバーします。新しいAPCA(Advanced Perceptual Contrast Algorithm)は研究段階の代替品で、本文テキストの知覚コントラストにより一致し、WCAG 3で評価されています、方向性のあるLc値を返し、±60はWCAGの4.5:1のおおよその同等物です。常に色のペアを実際のコントラスト式に対してチェックし、自分の目ではない; デザイナーは低コントラストのペアリングがどれほど読みやすいかを一貫して過大評価します。

正直な印刷の注意事項: 素朴なCMYKは本物のCMYKではない

すべてのブラウザコンバーターが使用する単純な K = 1 − max(R,G,B) 公式は数学的に自己一貫しており、ラウンドトリップRGB → CMYK → RGB は浮動小数点を除いて同じRGBを正確に返します。しかし、実際の印刷機がその色を紙にどのように再現するかは記述しません。実際のRGB-to-CMYK変換には、このツールが提供できない3つのことが必要です: ターゲットICCプロファイル(プリンター + 紙の組み合わせを定義、コーティングされた紙は非コーティングのものとは異なるようにインクを吸収し、ハイエンドの商業プレスはデスクトップインクジェットとは異なるプロファイルを実行します)、レンダリングインテント(知覚的、相対比色、彩度、絶対比色、ガモット外の色がどのように圧縮されるかをトレードオフします)、本物の比色モデル(デバイス独立の中間層としてのCIE Lab、両側に完全なICCプロファイルルックアップテーブル付き)。これはAdobe PhotoshopがそのCMYK変換メニューの背後で行うことであり、プロフェッショナルなプリプレスソフトウェア(Esko、Heidelberg Prinect、Caldera)がプロダクションワークのために行うことです。素朴な公式は加色と減色の色モデルの関係を理解するのに適しており、ファーストパス色探索に役立ちますが、商業プリンターにファイルを送る場合は、正しいICCプロファイルが読み込まれたPhotoshop(またはプリンターの推奨ツール)で変換を行ってください、目に見える違いは大きい可能性があります。

名前付きカラーとrebeccapurpleの物語

CSS3は147の名前付きカラー(エイリアス aqua = cyan を含むと148)を出荷し、元のHTML 4の16の名前付きカラーとX11 Window Systemのより長いリストの混合から継承しました。最も最近追加された名前付きカラーには物語があります。2014年6月7日、ウェブ標準提唱者Eric Meyerの娘Rebeccaが、6歳の誕生日の翌日に攻撃的な脳腫瘍で亡くなりました。Rebeccaの好きな色は紫でした。数日のうちに、CSS Working Groupのメンバーは、編集者Tab Atkins Jr.が率いて、彼女の記憶のために rebeccapurple(#663399)をCSS Color Level 4仕様に名前付きカラーとして追加することを提案しました。色は2014年6月に追加され、その後すぐにブラウザに到着しました。16進値は、Eric Meyer自身が彼のウェブサイトで使用していた値として特に選ばれました。rebeccapurple は今や、あらゆるブラウザの名前付きカラーテーブルにあり、CSS仕様の唯一の記念色であり、ウェブの乾いた技術仕様は、その中の1人が悲嘆に暮れている時に気付く人々によって書かれていることを思い出させてくれます。

よくある質問

CSSではどの形式を使うべきですか?

現代のCSSでは3つすべてが動作します。HEXは最もコンパクトで広く使われています。RGBはコードで値を計算する必要があるときに便利です。HSLは色のバリエーションを作成するのに最適です · 色相を保ちながら明度や彩度を調整するだけです。

#FFFと#FFFFFFの違いは?

3桁のhexは、各桁が2倍になる短縮形です: #FFF = #FFFFFF、#09C = #0099CC。両方ともCSSで有効ですが、6桁のほうがより明示的で、1600万色すべてをカバーします。

透明度(アルファ)付きの色を変換できますか?

このツールは不透明な色を変換します。アルファについては、CSSはrgba(r,g,b,a)とhsla(h,s%,l%,a)、および8桁hex(#RRGGBBAA)をサポートしています。アルファサポートは将来のアップデートで追加される可能性があります。

私のCMYK変換はプリンターから出てくるものと一致しますか?

正確には、おそらくしません。このツールが使用する単純な数学は比色的に自己一貫しています(RGB → CMYK → RGB は同じRGBを返します)が、特定のプリンター + 紙の組み合わせのICCプロファイル、レンダリングインテント(知覚的、相対比色など)、またはプレスのドットゲイン特性を考慮していません。印刷バインドの作業には、正しいICCプロファイルが読み込まれたPhotoshopまたはプリンターの推奨ツールで最終的なCMYK変換を行ってください、素朴な変換とプロファイル認識のものの間の目に見える違いは大きい可能性があり、特にCMYKガモットの端にある彩度の高い赤と青で顕著です。

OKLCHとモダンCSS色空間についてはどうですか?

モダンCSSはより広いガモットと知覚的に均一な色作業のために oklab()、oklch()、lab()、lch()、color(display-p3 ...) をサポートしています。それらのブラウザサポートはおよそ2023年以降のベースラインです(oklch() はSafari 16.4、Chrome 111、Firefox 113; 名前付きスペース付きの color() はSafariで少し早く出荷されました)。このコンバーターではまだ表示されていません、一部は数学をコンパクトな形式で表示するのが難しいため(Labには0-100%スライダーにマップしない符号付き軸があります)、一部はほとんどの現在のプロダクションワークフローがまだsRGBをターゲットにしているためです。OKLCHを使用するモダンなデザインシステム(例: Tailwind CSS v4)で作業している場合は、そのシステムのツーリングを色生成に使用してください; このコンバーターはレガシーsRGB作業に対する正しい答えです。

私のデータはどこかに送信されますか?

いいえ。色変換は純粋な算術です、サーバーができることでブラウザができないことは何もありません。すべての変換はJavaScriptでローカルに実行されます。色を変更している間にDevToolsのネットワークタブで検証できます: 送信リクエストはありません。ロード後にページをオフラインに(機内モードに)してもコンバーターはまだ機能します。

関連ツール