色反転ツール
HEXカラーコードを入力すると、RGB各成分を反転した色をすぐ計算できます。画像のネガポジ反転もブラウザ内だけで処理できます。
カラーコードを反転する
rgb(51, 102, 153)
rgb(204, 153, 102)
rgb(153, 102, 51)
R' = 255 - R G' = 255 - G B' = 255 - B
例：#336699（51, 102, 153）→ #CC9966（204, 153, 102）
画像の色を反転する
画像を選ぶと、端末内のブラウザで反転処理します。画像ファイルを色しるべのサーバーへアップロードする処理は行いません。
※大きな画像はブラウザの負荷を抑えるため、表示・保存時に最大幅1600pxへ縮小します。
色の反転と補色の違い
赤・緑・青の各値を255から引きます。黒は白、赤はシアンへ反転します。画像のネガポジ反転やCSSの invert(100%) に近い考え方です。
HSLなどの色相環で色相だけを反対側へ移します。彩度・明度を維持するため、RGB反転と違う色になる場合があります。
どの色体系を使うかで位置や定義が変わります。「反対側の色＝いつでも唯一の補色」とは限りません。
CSSの invert() は入力画像の色サンプルを反転するフィルターで、invert(100%) は完全反転です。仕様・ブラウザ実装の確認は MDNのinvert()解説も参照できます。
色反転はどんなときに使う？
あるHEXを反転すると何色になるかを数値で確認できます。
画像やデザインを反転し、普段と異なる見え方を比較できます。
反転色をそのまま採用するのではなく、補色・色差・コントラストと合わせて候補を比較できます。
色の反転についてよくある質問
黒を反転すると何色ですか？
#000000 のRGB反転は #FFFFFF（白）です。
白を反転すると何色ですか？
#FFFFFF のRGB反転は #000000（黒）です。
反転色と補色は同じですか？
同じになる場合もありますが、常に同じではありません。RGB反転は各チャンネル値を反転する計算で、補色は色体系や色相環の定義に依存します。
CSSで画像の色を反転できますか？
filter: invert(100%); で完全反転できます。0%は変化なし、100%が完全反転です。
アップロードした画像はサーバーへ送られますか？
このページの画像反転はブラウザ内のCanvasで処理します。ツールの反転処理のために画像をサーバーへ送信するコードは使用していません。