先日、Clipsの仕様を変更しました。 Clipsは指定したカラーコードが使われているウェブサイトを検索することができますが、全く同じカラーコードを使っているウェブサイトってのはなかなかありません。「似た色も一緒に検索できれば!!」と思いついたので実装しました。

近い色の求め方

最初はどうやって近い色を判断しようかと思いました。そしてウェブサイトといえばおなじみのアレがあることを思い出したのです。使える色の数も増えたのであまり聞かなくなりましたね。ウェブセーフカラー。 PHPでカラーコードを渡すとウェブセーフカラーで返してくれる関数をサササッと書きました。せっかく作ったのでコードを掲載しようかと。

PHPコード

// カラーコードをWebセーフカラーに変換する(頭に#のついた6桁か3桁のカラーコード)
function convert_websafecolor($colorcode) {
	if(preg_match('/^#[a-fA-F0-9]{6}$/', $colorcode)
	   || preg_match('/^#[a-fA-F0-9]{3}$/', $colorcode)
	) {
		$colorcode = strtr($colorcode, array('#'=>'')); // 頭の#が邪魔なので除外
		$r = str_split($colorcode); // 1文字ぶつぶった切る
		if(count($r) == 6) { // 6桁なら2文字ずつ結合して近似値を返す
			return	approximate_websafecolor($r[0].$r[1]).
				approximate_websafecolor($r[2].$r[3]).
				approximate_websafecolor($r[4].$r[5]);
		} else if(count($r) == 3) { // 3桁なら1文字を2つ合わせて近似値を返す
			return	approximate_websafecolor($r[0].$r[0]).
				approximate_websafecolor($r[1].$r[1]).
				approximate_websafecolor($r[2].$r[2]);
		}
	}
	return false;
}
// 近似値を求める
function approximate_websafecolor($code) {
	$code = hexdec($code); // 16進数を10進数に直す
	if($code <= 25) return '00';
	elseif($code > 25 && $code <= 76) return '33';
	elseif($code > 76 && $code <= 127) return '66';
	elseif($code > 127 && $code <= 178) return '99';
	elseif($code > 178 && $code <= 229) return 'CC';
	elseif($code > 229) return 'FF';
}

使い方

カラーコードを投げるだけ。
$color = convert_websafecolor("#FAC014");// return FFCC00
$color = convert_websafecolor("#E41");// return FF3300

こんな感じに

#8BD2D8で検索するとティファニーの#92D0C5も引っかかります。なかなかよいではないか。
#8BD2D8の検索結果
#8BD2D8での検索結果

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

1件のコメント

  1. よっしー 投稿作成者

    しまった。グラデーションの処理ちゃんとするの忘れてるや…これはかっこ悪い…(´・ω・`)