色反転計算機

反転色とは、R・G・Bをそれぞれ255から引いた色です

色を反転すると、赤・緑・青の3つの値がすべて反対側の端へ入れ替わります。各値は0から255までなので、反転後の値は255から元の値を引いた数です。例に使う #3498DB は RGB(52, 152, 219) で、反転すると RGB(203, 103, 36)、つまり #CB6724 になります。写真編集ソフトのネガ効果や、CSSの filter: invert(1) も同じ計算をしています。

上の計算機は、色コードを入力した瞬間に反転色をHEX・RGB・HSLで表示します。元の色と反転色を並べ、互いを文字色に使ったときのコントラスト比も測ります。反転色が補色とどう違うのかは、明度だけを反転した色と合わせて比較できます。複数の色をまとめて入力すると、フィルムストリップの上段に元の色、下段に反転色が並びます。

計算機の使い方

1. 色の欄に、#3498db、3498db、#fff のようなHEXコードや、rgb(52, 152, 219)、hsl(204 70% 53%)、tomato のようなCSS表記を入力します。数字を3つ並べた形式（52 152 219）はRGBとして読み取ります。欄の右にある見本を押すと、カラーピッカーで色を選べます。
2. 結果の大きな文字が反転色です。各桁の上にある小さな文字は元の桁なので、16進数の桁ごとにどう入れ替わったかがひと目でわかります。HEX・RGB・HSLの各行の右にあるボタンで、必要な形式をコピーできます。
3. ミラー表示の左側が元の色、右側が反転色です。各見本の上にある「Aa あ」は向かい側の色で塗られているので、反転色を文字色にしたときの見やすさを目で確かめられます。中央の数値が2色のコントラスト比です。
4. チャンネルミラーのバーをドラッグするか数値を変えると、元の色が変わります。白抜きの丸が元の値、塗りつぶしの丸が反転値で、2つの丸は中央の線をはさんで常に同じ距離だけ離れています。
5. 複数の色をカンマ、スペース、改行で区切って貼り付けると、最大12色がフィルムストリップにまとめて入ります。「反転HEXをすべてコピー」を押すと、反転色の一覧を1行に1つずつコピーします。

計算方法：255から引く、または16進数の各桁をFから引く

HEXコードは、赤・緑・青の値を2桁ずつ16進数で並べたものです。そのため、反転は3つの手順で計算できます。2桁ずつ10進数に直し、255から引き、再び16進数の2桁で書きます。

10進数に直さなくても計算できます。255は16進数でFFなので、2桁の値をFFから引くことは、繰り下がりなしで各桁をFから引くことと同じです。下の対応を覚えておけば、#3498DB の反転が #CB6724 になることを暗算ですぐに求められます。

この対応は双方向に成り立ちます。8は7に、Cは3に変わります。

3桁・4桁・8桁のHEXと透明度

CSSの色表記は、16進数の3・4・6・8桁をすべて受け付けます。3桁の #F0F は各桁を2回ずつ書いた #FF00FF と同じなので、各桁をFから引くと、反転も3桁のまま #0F0（= #00FF00）になります。4桁は最後の1桁、8桁は最後の2桁が透明度（アルファ）です。反転では色だけを入れ替えて透明度はそのままにするため、#3498DB80 の反転は #CB672480 です。CSSの invert() フィルターも、赤・緑・青だけを変えてアルファには手を加えません。

よく使う色の反転色とコントラスト比

コントラスト比は、元の色を背景に、反転色を文字に使った場合（またはその逆）の2色の明るさの差を、WCAGの式で測った値です。判定は、本文テキストのAAが4.5:1、大きな文字が3:1、AAAが7:1の基準で行い、基準にわずかに届かない値を切り上げて読むことはしません。

グレーの #808080 を反転した #7F7F7F のように、反転しても自分自身と同じになる色はありません。255は奇数なので、x = 255 − x を満たす整数がないためです。最も近い組が #808080 と #7F7F7F で、3つの値がそれぞれ1しか違いません。

反転色は「補色 + 明度の反転」です

反転色と補色はよく同じ意味で使われますが、別のものです。HSL（色相・彩度・明度）で見ると違いがはっきりします。RGBを反転すると、最大の値と最小の値が入れ替わるため、色相環ではちょうど180°反対側に移り、明度Lは100% − Lに入れ替わり、彩度は変わりません。補色は、色相だけを180°回して明度をそのままにした色です。

計算機の「補色との比較」は、この4色を2×2で表示します。対角にある色どうしは互いに反転の関係で、元の色の反転が反転色、補色の反転が「明度のみ反転」です。明度がちょうど50%の色（#FF0000、#0000FF のような純色や #CC3333）は、明度を入れ替えても50%のままなので、反転色と補色が一致します。反対にグレーは色相がないため補色が自分自身になり、反転すると明度だけが変わります。

反転色がいつも見やすいとは限りません

「反対の色だからコントラストも大きい」と思いがちですが、コントラスト比は色相ではなく明るさの差で決まります。明度が中間あたりの色は、反転しても明るさが近いまま残ります。例の色 #3498DB と反転色 #CB6724 は、色相では青とオレンジで正反対ですが、コントラスト比は1.20:1しかなく、互いの上に文字を書いてもほとんど読めません。

グレーで考えると境目が見えてきます。#484848 以下の暗さ、または #B7B7B7 以上の明るさのグレーは、反転色との差が4.5:1以上あるので、本文の文字にも使えます。#585858 から #A7A7A7 の間のグレーは、3:1にも届きません。色付きの場合も傾向は同じで、非常に明るい色か非常に暗い色だけが、反転色と組み合わせて文字と背景に使いやすくなります。背景と文字色のコントラスト比を別に合わせたいときは、あわせて使うカラーアクセシビリティのチェッカーで確認してください。

ダークモードには反転をそのまま使いません

明るい画面を暗い画面に変えるとき、色をそのまま反転すると、明るさとともに色相まで入れ替わります。青いボタンはオレンジに、緑の成功マークはマゼンタに変わり、本来の意味が伝わりにくくなります。そのため、スマートフォンの反転機能も2種類に分かれています。Appleのサポート文書では、「反転（クラシック）」は画面上のすべての色を反転し、「反転（スマート）」は、画像、メディア、ダークカラーのスタイルを使用する一部のアプリを除いて反転すると説明されています。

デザインでは、色相を保ったまま明度だけを入れ替えた色のほうが、出発点として適しています。計算機の「明度のみ反転」のマスがその色です。CSSでは filter: invert(1) hue-rotate(180deg) で近い効果を出せますが、近似値にすぎません。hue-rotate() はHSLの色相角を回す計算ではなく、明るさをおおむね保つ行列なので、元の色によって結果が大きく変わります。

純色のように明度が50%の色は、明度を入れ替えても変わりませんが、CSSの組み合わせでは赤が薄いピンクに、青がごく薄い紫になります。写真やロゴまで一緒に反転してしまう問題もあるため、フィルターはアイコンのような単色の要素にだけ使い、そのほかの色は別に決めておくほうが安全です。

CSS・Excel・コードで反転する

• CSS: filter: invert(1)（または100%）は、要素のすべての色をこの計算機と同じ方法で反転します。W3Cの仕様では、フィルター関数はsRGB色空間で計算すると定められており、値を省略すると1になります。0から1の間の値は元の色と反転色の中間を混ぜ、0.5ではすべてのチャンネルが中央の値になるため、どんな色でもグレー（#808080）になります。
• JavaScript: 6桁のHEX文字列 h（# なし）は、'#' + (0xFFFFFF ^ parseInt(h, 16)).toString(16).padStart(6, '0') で反転できます。FFFFFFとの排他的論理和（XOR）は、各桁をFから引くのと同じ結果になります。
• Python: '#%06x' % (0xFFFFFF ^ int(h, 16)) で同じ値が得られます。
• Excel: A1セルに #3498DB が入っているなら、=DEC2HEX(16777215-HEX2DEC(SUBSTITUTE(A1,"#","")),6) が CB6724 を返します。日本語版のExcelでも関数名はDEC2HEXで、引数の区切りはカンマです。16777215 はFFFFFFを10進数で書いた数で、最後の引数6は先頭に0を補って6桁にそろえます。

よくある間違い

• 反転色を補色として使う: 反転は明度まで入れ替えます。同じ明度で反対の色が必要なら補色を使ってください。2つが一致するのは、明度が50%のときだけです。
• 反転色ならコントラストは十分だと考える: 中間の明度の色は、反転色とのコントラスト比が1:1に近くなります。文字と背景に使う前に、必ずコントラスト比を確かめてください。
• 8桁のHEXをまるごと反転する: #3498DB80 の末尾の80は透明度です。8桁すべてをFから引くと #CB67247F になり、透明度まで変わってしまいます。反転するのは前の6桁だけです。
• RGBの値を256から引く: 値の範囲は0から255なので、基準は255です。256から引くと、0が256になって範囲を外れます。
• CSSの invert(1) hue-rotate(180deg) を正確な「明度のみ反転」だと思い込む: 近似値なので、赤の #FF0000 が #FF9292 になるように差が出ます。
• 写真の反転と色コードの反転を混同する: この計算機が反転するのは色コードです。写真全体をネガにしたいときは、画像編集ソフトの反転機能やCSSフィルターを使ってください。計算の原理は同じです。

限界と注意点

• 反転はsRGBの8ビット（0から255）が基準です。display-p3やoklchのようにsRGBの外へ広がる色は、ブラウザーがsRGBに変換した値を反転します。
• HSLの値、補色、「明度のみ反転」は、小数点を含めて計算してから丸めた値なので、HSLの値をRGBに戻すと1程度の差が出ることがあります。
• コントラスト比は、透明度を除いた不透明な2色で計算します。半透明の色は、実際に重なる背景によって見え方が変わります。
• CSSの色名は、標準の148個だけを認識します。「dark blue」のようにスペースで区切った名前や、デザインツール独自の名前は、HEXで入力してください。

基準: 反転の計算はW3C Filter Effects Module Level 1のinvert()の定義と同じで、コントラスト比はWCAG 2.2の相対輝度とコントラスト比の定義に従います。表のCSSフィルターの値は、2026年10月20日にChromium系ブラウザーで確認しました。

出典

• 01W3C — Filter Effects Module Level 1invert() はチャンネルごとにtableValues は amount と 1 − amount、アルファは変更しない、フィルター関数はsRGBで計算、既定値は1、hue-rotate() はfeColorMatrixの行列
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2コントラスト比 (L1 + 0.05) / (L2 + 0.05)、相対輝度の式
• 03W3C — Understanding SC 1.4.3 Contrast (Minimum)本文4.5:1、大きな文字3:1、計算値を丸めない（4.499:1は4.5:1ではない）
• 04W3C — CSS Color Module Level 416進表記の3・4・6・8桁、末尾2桁はアルファ、RGBとHSLの変換式
• 05MDN — invert()100%は完全な反転、0%は変化なし、既定値は1
• 06Apple サポート — iPhone、iPad、iPod touchで画面表示とテキストサイズの設定を使う「反転（クラシック）」と「反転（スマート）」の違い
• 07Microsoft サポート — DEC2HEX 関数書式はDEC2HEX(数値, 桁数)で、第2引数の桁数を指定すると先頭に0を補う

よくある質問

あわせて使うツール