JavaScript

JavaScriptで補色のRGB値を計算して視覚的に見せる方法

投稿日:

デザイン関係の書籍を見ると必ず出てくる「補色」というのがあります。

Wikipediaによると

補色(ほしょく、英: complementary color)とは、色相環 (color circle) で正反対に位置する関係の色の組合せ。相補的な色のことでもある。

のことらしく、デザインや色彩に関して全く知識のないわたしの取っては「だからなに?」くらいにしか思えません。

でも、この補色をうまく使えば色の組み合わせなどがおしゃれになるらしいのです。

これは使わねば・・・でもある色の補色をHTMLで見つけるのって難しいのですよね。

そんなことから「自動で計算できないものか」と調べるとありました。

JavaScriptで補色のRGB値を計算して視覚的に見せる方法

この補色を自動で計算できないものかと調べると、Javascriptでされている方がいました。

参考補色のRGB値をJavaScriptで計算

今回はこちらのソースを元に画面上で指定したRGBの補色を自動で視覚的に見せるプログラムに仕上げます。

RGBの補色を求めるJavascript

早速ソースになります。

少し長いですね。

やっているとこは

  1. RGBのそれぞれの値の最大値(MAX)を求める
  2. RGBのそれぞれの値の最小値(MIN)を求める
  3. 求めた最大値(MAX)と最小値(MIN)の合計からそれぞれのRGBの値を引く
  4. それぞれの引き算の結果が求めたい補色のRGBになる

です。

それに画面の表示をいれたり、ボタンを押す続けたりするイベントリスナーを登録してタイマーでマウスの押し続けを検知している処理が追加になってます。

これで無事補色が求められます。

実行結果はこちらをクリックしてください。

まとめ

このソースを使えば簡単に現在のRGBの補色をもとめることができます。




-JavaScript

Copyright© ソフトウェア開発日記 , 2019 All Rights Reserved.