補色をRGBカラーコードから計算するツール

入力されたカラーコードの補色を計算…

そんなちょっと便利なツールを作りました。

計算ツールを使ってみる

使い方は説明する必要ないほど簡単です。

• カラーコードを選択・入力
• 16進数表記の補色が計算される
• RGB表記・HSV表記も表示

デザインなどで困ったときに使ってください。

補色の正しい定義とは？

そもそも補色って何なのでしょうか？

その定義は次のようになっています。

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

補色の組合せは色の表現法によって異なり、RGBの場合は

• 赤 / シアン
• マゼンタ / 緑
• 黄色 / 青

RYBの場合は

• 赤 / 緑
• 紫 / 黄色
• 橙色 / 青

などである。余色、対照色、反対色ともいう

引用元 : https://ja.wikipedia.org/wiki/%E8%A3%9C%E8%89%B2

『色相環の正反対に位置する関係の色の組み合わせ』

これが補色の意味です。

だから次のような特徴を持ちます。

• 明度は変化しない
• 彩度も変化しない

たとえば「白の補色は？」と聞かれたら何と答えますか？

定義を分かってないと「白の補色は黒かな？」みたいな誤りをしてしまいます。感覚的には正しそうだけど、それは反転色のことですね。

白の補色はおなじく白です。

明度や彩度が変化しないことに注意しましょう。

補色計算のロジックを例示

このツールの補色計算の方法についてです。

具体例を出すなら、以下のように計算を行ってます。

例えば #589fd7 の補色を求めたい場合…

↓ このような流れで計算できる

1. #589fd7 をRGB要素に変換
   カラーコードを ( 58, 9f, d7 ) という要素に分割して、10進数表記の ( 88, 159, 215 )  に変換。これが元色のRGB要素となる
2. 最大値と最小値の合計を算出
   この例だと最大値は215、最小値は88なので最大値＋最小値＝303になる。これが補色計算のキーポイントになる数値
3. その値からRGBの各要素を引く
   今求めた303からRGBの各要素を引く。その結果は ( 215, 144, 88 ) になる。16進数表記に直すと補色は #D79058 と求まるという仕組み

ロジックとしては、こういう流れになってます。

反転色と違って計算がすこし大変なんですね。

でもやろうと思えば手計算でもできます。面倒だけど…

バージョンアップ履歴

計算ツール（当ページ）のバージョンアップ履歴です。

• バージョン1.0.0
  リリース日は2023年8月

必要な変更があったらアプデします（予定）