モニターの色域を表現するときによく用いられるCIE1931xy色度図の原点であるCIE1931rg色度図について記述しました。
色度図上でカーソルを動かすとrgbとxy座標値とsRGB値を表示するようにしました。
sRGBで着色していますのでsRGBを超える色領域については不正確となります。
SVGをベースに着色はSVGでは非常に時間が係るためcanvasを使用しています。 塗りつぶしはピクセル単位で描画していますが拡大しても意外と粗さは目立ちません。
またブラウザによっては座標の読み取りができない場合があります。
スペクトル軌跡の表示は5nmステップのデーターを使用しています。直線で結ぶと特に左上部がカクカクになります。
前後の点から各点の接線を算出し接線同士の交点を2次ベージェ曲線の制御点としています。
なお、ここで表示して色は各種条件で色が異なって見えますのでご了承ください。

動作確認

2017/04/02 Firefox 52.0.2(32bit)ではxy色度図上でマウスカーソルの座標を読み取る機能が動作しませんでした。 event.clientX及びevent.clientYをサポートしていないため。 2017/04/02 Google Chrome 57.0.2987.133(64bit/32bit)では正常動作しました。 2017/04/02 IE11(64bit/32bit)では正常動作しました。

実行中の環境

rgb(3次元)

CIE1931rgb系では青(B) 435.8nm、緑(G) 546.1m,、赤(R) 700nmの波長の単色光を採用している。
以下のグラフは、波長λの単光色と同じ色に見えるRGBの光のレベルをグラフにしたものである。
光のレベルが負の場合がある。これは波長λにその色を加えて比較した場合を表している。
5nm置きの各rgbの値はJIS等に明示されている。
以下のグラフはRGBの合計値が1になるように正規化したrgbにおける、r、g、bをそれぞれ三次元の座標として色を表したものである。
三次元の座標(0,0,1)と(1,0,0)と(0,1,0)を含む面を単位面とよびます。原点と先ほどの等色関数のrgbで示される点で示される直線と単位面が交差する点が右上の馬蹄形の形です。これをスペクトル軌跡といいこの線上の色は各波長のみで構成される単色を示しています。

rg(2次元)

上記のrgb系をrg面に投影したものを描画したものが以下の色度図です。
着色部の輪郭線はスペクトル軌跡を表しています。
着色部にカーソルを移動させると下部のフォームにCIE1931rgb値とCIE1931xyz値とsRGBの値を表示します。
視覚的にRGBの合成のイメージがつかめるかと思います。

(r,g,b)=(,,)
(x,y,z)=(,,)
sRGB(D65)(,,)

ところでCIE1931rg系の色度図を見かけることは余りないと思います。
rg系は負の領域があるなど分かりにくいところがあります。
上のグラフの着色領域を囲んでいる3本の直線を軸としてグラフを変形するとよく見かけるCIE1931xy系色度図となります。
大まかには、Z点から原点へ色度図を移動させ、ZX方向をX軸方向へ変形、YZ方向をY軸方向へ変形させ、大きさを調整します。
X,Yは架空の色と見なせるので虚色と呼ばれます。
以上の過程よりrgb系とxyz系は行列により計算式で相互に変換することができます。
以下に直線の式とそれぞれの交点座標の算出過程を示します。

Y-X

Y-Z

Z-X

Y

Z

X