RGB値と変化量を入力すると、色の雰囲気を保ったまま次々と色相を変化させるツールを F# + Fable で作りました。
既存の色に合う色を探すのに使えます。また綺麗な色の組み合わせを見て心を落ち着ける効果も望めます。
以下のサイトの「色いろいろ」です。
作業環境
- Windows 10 Home 21H2 (OS Build 19044.2130)
- dotnet 6.0.110
- F# 6.0
- Fable 3.2.3
- npm 6.14.6
- Visual Studio Code 1.72.2
- Ionide for F# v7.3.1
- FireFox 106.0.1 (64bit)
完成形
R
, G
, B
, Interval
, Limit
の5つの値を入力して「確認」をクリックすると、その色の色相を変化させながら連続的に色を表示します。上の画像の例では、くすんだ水色のRGB値を入力し、同系統の青緑→緑→黄緑→黄…と色が変化しています。
入力値を変えると当然結果も変わります。次の例では、パステルカラーの紫からピンク→黄→緑→茶…と変化しています。
効能
- 同じ雰囲気の色を複数個作ることができる
- 綺麗なグラデーションを見て心が癒される
- RGB値と色の関係性を視覚化することができる
動機
- 色相変換を連続的に行いたい
- 色を眺めて癒されたい
- F# で遊びたい
私が作った taidalab というサイト内で、サイト全体で統一感を持たせつつ、ページ毎に別の色を使いたいと思いました。つまり、同じ雰囲気を保ちながら色相変換をしたいと考えました。
色相変換の方法はこちらを参考にさせていただきました。ありがとうございました。
具体的な計算を載せてくださっていますので、理屈そのものはわかりました。それが分かったうえで、これをプログラム等を用いて自動で算出したいと思ったわけです。とりあえずグラフで表してみました。
シンクロ率のグラフができました。それ以外のことはよくわかりません。数学ができる人ならこれを一般化して Excel 関数で表現できるのでしょうか。とりあえず私にはできないので F# で何とかすることにいたしました。
また、私は色のグラデーションや組み合わせを見るのが好きで、こちらのページはもはや私の聖地です。
このようなサイトを自分の手で、それも F# で作ったらさぞ楽しかろうと思ったのも同期のひとつです。
コード
ソースコードはこちら
何を書いたかよく覚えていないので、説明はまたいつか書きます。
結び
RGB値を元に色相変換を行うものを作りました。私は青系統の色が好きなので、R
: 100, G
: 120, G
: 180, Interval
: 10, Limit
: 100 として最初の方の色を眺めると気分がいいです。
いい感じの色を探したり、綺麗な色で癒されたり、あるいはRGB値の理解に役立てたりしていただけると幸いです。