タイダログ

もっと怠けますか? (y/n)

RGB値から色相変換するツールを作った

RGB値と変化量を入力すると、色の雰囲気を保ったまま次々と色相を変化させるツールを F# + Fable で作りました。

既存の色に合う色を探すのに使えます。また綺麗な色の組み合わせを見て心を落ち着ける効果も望めます。

以下のサイトの「色いろいろ」です。

taidalog.html.xdomain.jp

作業環境

完成形

色いろいろ (1)

R, G, B, Interval, Limit の5つの値を入力して「確認」をクリックすると、その色の色相を変化させながら連続的に色を表示します。上の画像の例では、くすんだ水色のRGB値を入力し、同系統の青緑→緑→黄緑→黄…と色が変化しています。

入力値を変えると当然結果も変わります。次の例では、パステルカラーの紫からピンク→黄→緑→茶…と変化しています。

色いろいろ (2)

効能

  • 同じ雰囲気の色を複数個作ることができる
  • 綺麗なグラデーションを見て心が癒される
  • RGB値と色の関係性を視覚化することができる

動機

  • 色相変換を連続的に行いたい
  • 色を眺めて癒されたい
  • F# で遊びたい

私が作った taidalab というサイト内で、サイト全体で統一感を持たせつつ、ページ毎に別の色を使いたいと思いました。つまり、同じ雰囲気を保ちながら色相変換をしたいと考えました。

色相変換の方法はこちらを参考にさせていただきました。ありがとうございました。

blog1.mammb.com

具体的な計算を載せてくださっていますので、理屈そのものはわかりました。それが分かったうえで、これをプログラム等を用いて自動で算出したいと思ったわけです。とりあえずグラフで表してみました。

色相変換のグラフ

シンクロ率のグラフができました。それ以外のことはよくわかりません。数学ができる人ならこれを一般化して Excel 関数で表現できるのでしょうか。とりあえず私にはできないので F# で何とかすることにいたしました。

また、私は色のグラデーションや組み合わせを見るのが好きで、こちらのページはもはや私の聖地です。

iroempitsu.net

このようなサイトを自分の手で、それも F# で作ったらさぞ楽しかろうと思ったのも同期のひとつです。

コード

ソースコードはこちら

github.com

何を書いたかよく覚えていないので、説明はまたいつか書きます。

結び

RGB値を元に色相変換を行うものを作りました。私は青系統の色が好きなので、R: 100, G: 120, G: 180, Interval: 10, Limit: 100 として最初の方の色を眺めると気分がいいです。

いい感じの色を探したり、綺麗な色で癒されたり、あるいはRGB値の理解に役立てたりしていただけると幸いです。

参考