- 1. 概要
- 2. 補色を求める
1. 概要
次へ行く前に「16進数カラーコードから補色を算出する」という話がなんか役に立ちそうなので・・・。
補色とは、なんだか、小学校の図工の授業で習ったような記憶があるのです。
実際には学校で習ったのはきっと絵の具の三原色だな。
補色同士を合わせるとくっきり映えて見えるとかなんとか・・・。
光の三原色と絵の具の三原色については「光と絵の具の三原色（色とは何か）」に詳しそう。
2. 補色を求める
でまぁ、先頭で紹介したサイトによれば・・・。
RGB ３つの要素の最小値と最大値の合計から 現在の RGB それぞれの要素の値を引けば・・・補色になるという・・・。
う～ん、文字で説明する方が難しい。
下記のフォームを書いて
<form name="form" action="./03.html" method="POST">
赤 <input type="text" style="width: 3em; text-align: right;" id="first" name="reqr" value="{{ $reqr }}" />
緑 <input type="text" style="width: 3em; text-align: right;" id="second" name="reqg" value="{{ $reqg }}" />
青 <input type="text" style="width: 3em; text-align: right;" id="third" name="reqb" value="{{ $reqb }}" />
<input type="submit" class="page" value="展 開" OnClick="JavaScript: func();" />
<script type="text/javascript">
document.getElementById('first').focus();
</script>
</form>
こんな感じに表示
上の赤・緑・青に 0～255 の値をいれて「展開」をクリックするとそれに対応する色とその補色を下に表示します。
ほんとはボタンを押したときに JavaScript で範囲チェックをしたかったのですが。
うまく動かせなかったので、0～255 の範囲を超えたら、範囲内に収めるように強制しています。
#FF0000
#00FFFF
これを展開するのは、下記のソースで
$reqr = 255;
$reqg = 0;
$reqb = 0;
if (isset($value['reqr']))
{
$reqr = $value['reqr'];
$reqg = $value['reqg'];
$reqb = $value['reqb'];
}
$colorclass = new colorClass();
$reqr = $colorclass->optimize($reqr);
$reqg = $colorclass->optimize($reqg);
$reqb = $colorclass->optimize($reqb);
$forwardcolor = '#'.sprintf("%02X", $reqr).sprintf("%02X", $reqg).sprintf("%02X", $reqb);
$total = max($reqr, $reqg, $reqb) + min($reqr, $reqg, $reqb);
$revr = $total - $reqr;
$revg = $total - $reqg;
$revb = $total - $reqb;
$reversecolor = '#'.sprintf("%02X", $revr).sprintf("%02X", $revg).sprintf("%02X", $revb);
$color = ' '.$forwardcolor.' <button type="button" style="background-color: '.$forwardcolor.'; width: 50%; height: 1em;"></button>'."\n";
$reverse = ' '.$reversecolor.' <button type="button" style="background-color: '.$reversecolor.'; width: 50%; height: 1em;"></button>';
「$value」は、「POST」で与えられる引数。
「$reqr」「$reqg」「$reqb」「$color」「$reverse」の変数を、適切な位置に配置することにより、展開します。
色の値を補正するクラスとして下記のソースを使用しています。
/**
* 色設定スクラス
* @author private
*
*/
class colorClass
{
/**
* コンストラクタ
*/
public function __construct()
{
}
/**
* デストラクタ
*/
public function __destruct()
{
}
/**
* 色の最適化 色の値を 0～255 におさめる
* @param integer $color
* @return integer
*/
public function optimize($color)
{
if ($color < 0)
{
$color = 0;
}
if ($color > 255)
{
$color = 255;
}
return $color;
}
/**
* RGB の入力成分により #RRGGBB の文字列を返す
* @param int $R
* @param int $G
* @param int $B
* @return number
*/
public function forward($R, $G, $B)
{
$R = $this->optimize($R);
$G = $this->optimize($G);
$B = $this->optimize($B);
return '#'.sprintf("%02X", $R).sprintf("%02X", $G).sprintf("%02X", $B);
}
/**
* RGB の入力成分の補色を求めて #RRGGBB の文字列を返す
* @param int $R
* @param int $G
* @param int $B
* @return string
*/
public function reverse($R, $G, $B)
{
$R = $this->optimize($R);
$G = $this->optimize($G);
$B = $this->optimize($B);
$total = max($R, $G, $B) + min($R, $G, $B);
$revr = $total - $R;
$revg = $total - $G;
$revb = $total - $B;
return '#'.sprintf("%02X", $revr).sprintf("%02X", $revg).sprintf("%02X", $revb);
}
}
|
