実行例

ブラウザのアドレスバーに以下を入力すると、ページの内容がクリアされ、背景が虹色に変化する。


javascript:body=document.getElementsByTagName("body")[0];body.innerHTML="";x=0;id=setInterval(()=>{x+=5;r=128+127*Math.cos(x/180*Math.PI);g=128+127*Math.cos((x+120)/180*Math.PI);b=128+127*Math.cos((x-120)/180*Math.PI);body.setAttribute("style",`background-color:rgb(${r},${g},${b});`);},100);

以下を入力すると、色の変化が停止する。


javascript:clearInterval(id);

コード


body = document.getElementsByTagName("body")[0];
body.innerHTML = "";
x = 0;
id = setInterval(() => {
  x += 5;
  r = 128 + 127 * Math.cos(x / 180 * Math.PI);
  g = 128 + 127 * Math.cos((x + 120) / 180 * Math.PI);
  b = 128 + 127 * Math.cos((x - 120) / 180 * Math.PI);
  body.setAttribute("style", `background-color: rgb(${r}, ${g}, ${b});`);
}, 100);

コア部分


  r = 128 + 127 * Math.cos(x / 180 * Math.PI);
  g = 128 + 127 * Math.cos((x + 120) / 180 * Math.PI);
  b = 128 + 127 * Math.cos((x - 120) / 180 * Math.PI);

角度(位相)を120度ずつずらすことで、
rとgとbのうち1つが強い時は他の2つが弱い
rとgとbのうち2つが強い時は他の1つが弱い
という関係になる。

イメージとしては三相交流が近い。

ここでは簡単のため、1周期を360としている。

メリット

R,G,BやC,M,Yといった原色を通らないので、（彩度は落ちるが）やさしい印象になる。色相を例えば5分割にしたいとき、360を5で割れば済むので便利。

デメリット

三相交流のイメージがないと分かりにくい。

原色を通るようにする


body = document.getElementsByTagName("body")[0];
body.innerHTML = "";
x = 0;
id = setInterval(() => {
  x += 0.1;
  r = Math.min(Math.max(Math.abs((x + 5) % 6 - 3) - 1, 0), 1);
  g = Math.min(Math.max(Math.abs((x + 3) % 6 - 3) - 1, 0), 1);
  b = Math.min(Math.max(Math.abs((x + 1) % 6 - 3) - 1, 0), 1);
  body.setAttribute("style", `background-color: rgb(${r*255}, ${g*255}, ${b*255});`);
}, 100);

M -> R -> Y -> G -> C -> B -> M ...
こちらも位相をずらしている点では同じ。

ここでは簡単のため、1周期を6としている。

メリット

原色とその組み合わせで線形に表現できるので、分かりやすい。色相を例えば5分割にしたいとき、6を5で割れば済むので便利。

デメリット

強いて言えば、上記の例が簡単な書き方の一例でしかない。例えばx<0では使えない。