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

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

Wikipediaによると

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

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

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

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

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

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

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

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

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

RGBの補色を求めるJavascript

早速ソースになります。

function complementary_color()
{
//現在のRGB値を取得する
var R = $( "#r" ).val() ;
var G = $( "#g" ).val() ;
var B = $( "#b" ).val() ;

//各値全てが数値かつ0以上255以下
if( !isNaN( R + G + B )
&& 0 <= R
&& R <= 255
&& 0 <= G
&& G <= 255
&& 0 <= B
&& B <= 255
){
//最大値、最小値を得る
var max = Math.max( R, Math.max( G, B )) ;
var min = Math.min( R, Math.min( G, B )) ;

//最大値と最小値を足す
var sum = max + min ;
if( ( max == 255 && min == 255 ) || ( max == 0 && min == 0 ) ){ sum = 255 ; }

//R、G、B 値を和から引く
var newR = sum - R ;
var newG = sum - G ;
var newB = sum - B ;

//文字色と背景色を変える
$( "#output1" ).css( "color" , "rgb(" + newR + ", " + newG + ", " + newB + ")" ) ;
$( "#output1" ).css( "background-color", "rgb(" + R + ", " + G + ", " + B + ")" ) ;
$( "#output1" ).val( "R:" + R + ",G:" + G + ",B:" + B ) ;

$( "#output2" ).css( "color", "rgb(" + R + ", " + G + ", " + B + ")" ) ;
$( "#output2" ).css( "background-color" , "rgb(" + newR + ", " + newG + ", " + newB + ")" ) ;
$( "#output2" ).val( "R:" + newR + ",G:" + newG + ",B:" + newB ) ;

}
return;
}

function updown_function( rgb, updown )
{
if( updown == "up" ){
if( +$( "#" + rgb ).val() < 255 ){ $( "#" + rgb ).val( ( +$( "#" + rgb ).val() + 1 ).toString() ) ; complementary_color() ; } } else{ if( +$( "#" + rgb ).val() > 0 ){
$( "#" + rgb ).val( ( +$( "#" + rgb ).val() - 1 ).toString() ) ;
complementary_color() ;
}
}
return false;
}

var mouse_on = 0 ;
var intervalID ;

//RGB変更処理
function up_r(){ updown_function('r', 'up'); }
function down_r(){ updown_function('r', 'down'); }
function up_g(){ updown_function('g', 'up'); }
function down_g(){ updown_function('g', 'down'); }
function up_b(){ updown_function('b', 'up'); }
function down_b(){ updown_function('b', 'down'); }

//マウスイベント登録
$(document).ready(function(){
var btn ;
btn = document.getElementById('r-up');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(up_r,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

btn = document.getElementById('r-down');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(down_r,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

btn = document.getElementById('g-up');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(up_g,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

btn = document.getElementById('g-down');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(down_g,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

btn = document.getElementById('b-up');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(up_b,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

btn = document.getElementById('b-down');
btn.addEventListener('mousedown', function() {
mouse_on = 1 ;
intervalID = setInterval(down_b,100);
}, false);
btn.addEventListener('mouseup', function() {
mouse_on = 0 ;
clearInterval( intervalID ) ;
}, false);

});

//クリアボタン処理
function rgbClear()
{
$( "#r" ).val( "255" ) ;
$( "#g" ).val( "255" ) ;
$( "#b" ).val( "255" ) ;
complementary_color() ;
}

少し長いですね。

やっているとこは

です。

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

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

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

まとめ

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