javascript - プログラムでカラー ホイールを走査し、16 進数値または RGB にアクセスする

Question

CSS と JavaScript を使用して、時間の経過とともにテキストの色を微妙に変更したいと考えています。これは、javascript を使用すると比較的簡単です。

ただし、スムーズな移行を確実にするために、小さなインクリメンタルな色の変更のみを行いたいと考えています...うまくいけば、以下で説明します:

下向きの矢印は、達成したい色のパターンを示しています。これらの値を達成するための既存のアルゴリズムはありますか? または他の方法はありますか？

Answer 1

HSL で色を指定し、色相のみをループします。

var i = 0
setInterval(function(){
    i++
    if(i > 360){ i = 0 }
    document.body.style.color = "hsl("+(i)+",50%,50%)"
},100)

またはもう少し簡潔に

var i = 0
setInterval(function(){
    document.body.style.color = "hsl("+((i++)%360)+",50%,50%)"
},100)

Answer 2

HSL カラーを使用し、色相を 0 から 360 まで回転させます。

text.style.color = 'hsl(' + hue + '80%, 40%)';