Help us understand the problem. What is going on with this article?

16進数カラーコードから補色を算出する

More than 1 year has passed since last update.

補色 とは

補色 - Wikipedia

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

要件

  • 手元にあるデータはカラーコードのみ。
    • 数百件ほど。
  • 全部の補色カラーコードを求める。

計算方法

参考にさせていただいたのは、反転色と補色を求める。で紹介されたAdobeのカラーの反転色または補色への変更という所。

カラーの各構成要素を、選択したカラーの最大の RGB 値と最小の RGB 値の合計を元にして、新しい値に変更します。現在のカラーの RGB 値のうち最大と最小の値が合計され、その値から各構成要素の値を引いて、新しい RGB 値が生成されます。例えば、RGB 値がレッド 102、グリーン 153、ブルー 51 であるカラーを選択したとします。この場合、まず最大値である 153 と最小値である 51 を合計して 204 という値が算出されます。この値から既存のカラーの RGB 値がそれぞれ差し引かれます。つまり、新しいレッドの値は 204 - 102(現在のレッドの値)= 102、グリーンの値は 204 - 153(現在のグリーンの値)= 51、ブルーの値は 204 - 51(現在のブルーの値)= 153 となり、新しい補色の RGB 値が生成されます。

この内容をPHPで書いたものがこちら。

// RGB値が、レッド102、グリーン153、ブルー51
$r = 102;
$g = 153;
$b = 51;

// 最大値である153と最小値である51を合計して204という値が算出される
$buf = max($r, $g, $b) + min($r, $g, $b);

// 上の値から既存のカラーのRGB値がそれぞれ差し引かれる
echo $buf - $r; // 102
echo $buf - $g; // 51
echo $buf - $b; // 153

まとめて処理するために

関数にしてしまう。カラーコードを渡せば補色が返ってくる。

// $code = getComplementary("#F1E2D3");
function getComplementary($masterCode) {
    // 頭に#が付いたり付いてなかったりするので、無くす方向で統一
    $masterCode = str_replace("#", "", $masterCode);

    // 2文字ずつ取得(substr)し、16進数から10進数へ(hexdec)
    $r = hexdec(substr($masterCode, 0, 2));
    $g = hexdec(substr($masterCode, 2, 2));
    $b = hexdec(substr($masterCode, 4, 2));

    // 最大値と最小値の和を算出
    $buf = max($r, $g, $b) + min($r, $g, $b);

    // 補色のRGB値を計算し、16進数に変換(dechex)
    $cr = dechex(($max + $min) - $r);
    $cg = dechex(($max + $min) - $g);
    $cb = dechex(($max + $min) - $b);

    // 桁を揃えて結合
    return sprintf("%02d", $cr) . sprintf("%02d", $cg) . sprintf("%02d", $cb);
}
AkihikoIkeda
主にPHPとJavaScriptを使います。 ほんの少しですが、JavaでAndroidアプリ作ったりしたこともあります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away