색상 반전 계산기

반전색은 R·G·B를 각각 255에서 뺀 색입니다

색을 반전하면 빨강·초록·파랑 세 값이 모두 반대쪽 끝으로 뒤집힙니다. 각 값은 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 표기를 넣습니다. 숫자 세 개(52 152 219)는 RGB로 읽습니다. 칸 오른쪽 견본을 누르면 컬러 피커로 고를 수 있습니다.
2. 결과의 큰 글자가 반전색입니다. 각 자리 위의 작은 글자는 원본 자리라서, 16진수 자리마다 어떻게 뒤집혔는지 바로 보입니다. HEX·RGB·HSL 줄 오른쪽 단추로 원하는 형식을 복사합니다.
3. 거울판 왼쪽은 원본, 오른쪽은 반전색입니다. 각 견본 위의 'Aa 가' 글자는 맞은편 색으로 칠해져 있어서, 반전색을 글자색으로 쓰면 얼마나 잘 보이는지 눈으로 확인할 수 있습니다. 가운데 숫자가 두 색의 명암비입니다.
4. 채널 거울의 막대를 끌거나 숫자를 바꾸면 원본 색이 바뀝니다. 빈 원이 원본 값, 찬 원이 반전 값이며 두 원은 가운데 선을 사이에 두고 늘 같은 거리만큼 떨어져 있습니다.
5. 여러 색을 쉼표나 띄어쓰기, 줄바꿈으로 나눠 붙여 넣으면 최대 12개가 필름 띠에 한꺼번에 들어갑니다. '반전 HEX 모두 복사'를 누르면 반전색 목록을 줄마다 하나씩 복사합니다.

계산 방법: 255에서 빼거나, 16진수 자리마다 F에서 빼기

HEX 코드는 두 자리씩 빨강·초록·파랑 값을 16진수로 적은 것입니다. 그래서 반전은 세 단계로 계산합니다. 두 자리씩 10진수로 바꾸고, 255에서 빼고, 다시 16진수 두 자리로 적습니다.

10진수로 바꾸지 않아도 됩니다. 255는 16진수로 FF이므로, 두 자리 값 하나를 FF에서 빼면 받아내림 없이 자리마다 F에서 빼는 셈이 됩니다. 아래 짝만 알면 #3498DB의 반전이 #CB6724라는 것을 암산으로 바로 구할 수 있습니다.

짝은 양쪽으로 통합니다. 8은 7로, C는 3으로 바뀝니다.

3자리·4자리·8자리 HEX와 투명도

CSS 색 표기는 16진수 3·4·6·8자리를 모두 받습니다. 3자리 #F0F는 자리마다 두 번 쓴 #FF00FF와 같아서, 자리마다 F에서 빼면 반전도 3자리 그대로 #0F0(= #00FF00)이 됩니다. 4자리는 마지막 한 자리, 8자리는 마지막 두 자리가 투명도(알파)입니다. 반전은 색만 뒤집고 투명도는 그대로 두므로 #3498DB80의 반전은 #CB672480입니다. CSS의 invert() 필터도 빨강·초록·파랑만 바꾸고 알파는 건드리지 않습니다.

자주 쓰는 색의 반전색과 명암비

명암비는 원본을 배경으로, 반전색을 글자로 썼을 때(또는 그 반대일 때) 두 색의 밝기 차이를 WCAG 식으로 잰 값입니다. 판정은 본문 글자 AA 4.5:1, 큰 글씨 3:1, AAA 7:1 기준이며 기준에 조금 못 미치는 값을 올려 읽지 않습니다.

회색 #808080의 반전 #7F7F7F처럼, 자기 자신과 똑같은 반전색을 가진 색은 없습니다. 255가 홀수라서 x = 255 − x를 만족하는 정수가 없기 때문입니다. 가장 가까운 짝이 #808080과 #7F7F7F이며 세 값이 1씩만 다릅니다.

반전색은 '보색 + 밝기 뒤집기'입니다

반전색과 보색은 자주 같은 말로 쓰이지만 다릅니다. HSL(색상·채도·밝기)로 보면 차이가 분명해집니다. RGB를 반전하면 가장 큰 값과 가장 작은 값이 서로 자리를 바꾸므로, 색상환에서는 정확히 180° 반대편으로 가고 밝기 L은 100% − L로 뒤집히며 채도는 그대로입니다. 보색은 색상만 180° 돌리고 밝기는 그대로 둔 색입니다.

계산기의 '보색과 비교' 칸이 이 네 색을 2×2로 보여 줍니다. 대각선끼리는 서로 반전 관계여서, 원본의 반전이 반전색이고 보색의 반전이 '밝기만 반전'입니다. 밝기가 정확히 50%인 색(#FF0000, #0000FF 같은 순색이나 #CC3333)은 밝기를 뒤집어도 50%라서 반전색과 보색이 같아집니다. 반대로 회색은 색상이 없어서 보색이 자기 자신이고, 반전하면 밝기만 바뀝니다.

반전색이 늘 잘 보이지는 않습니다

'반대 색이니 대비가 크다'고 생각하기 쉽지만, 명암비는 색상이 아니라 밝기 차이로 정해집니다. 밝기가 가운데쯤인 색은 반전해도 밝기가 비슷하게 남습니다. 예시 색 #3498DB와 반전 #CB6724는 색상은 파랑과 주황으로 정반대지만 명암비가 1.20:1이라 서로의 위에 글자를 쓰면 거의 읽히지 않습니다.

회색으로 따져 보면 경계가 보입니다. #484848 이하로 어둡거나 #B7B7B7 이상으로 밝은 회색은 반전색과 4.5:1 이상 차이가 나서 본문 글자로도 쓸 수 있습니다. #585858~#A7A7A7 사이 회색은 3:1에도 못 미칩니다. 색이 들어간 경우도 같은 흐름이어서, 아주 밝거나 아주 어두운 색만 반전색과 짝을 이뤄 글자와 배경으로 쓰기 좋습니다. 배경과 글자색의 명암비를 따로 맞춰야 한다면 함께 쓰는 도구의 색상 접근성 검사기에서 확인하세요.

다크 모드에는 반전을 그대로 쓰지 않습니다

밝은 화면을 어두운 화면으로 바꿀 때 색을 그대로 반전하면 밝기와 함께 색상까지 뒤집힙니다. 파란 단추는 주황으로, 초록 성공 표시는 자홍으로 바뀌어 원래 뜻이 흐려집니다. 그래서 휴대폰의 반전 기능도 두 가지로 나뉩니다. Apple 지원 문서는 클래식 반전이 화면의 모든 색을 반전하고, 스마트 반전은 이미지, 미디어, 어두운 색상 스타일을 쓰는 일부 앱을 빼고 반전한다고 설명합니다.

디자인할 때는 색상을 지키고 밝기만 뒤집은 색이 출발점으로 더 낫습니다. 계산기의 '밝기만 반전' 칸이 그 색입니다. CSS에서는 filter: invert(1) hue-rotate(180deg)로 비슷한 효과를 내지만 근삿값입니다. hue-rotate()는 HSL 색상각을 돌리는 계산이 아니라 밝기를 대체로 유지하는 행렬이라, 원래 색에 따라 결과가 크게 달라집니다.

순색처럼 밝기가 50%인 색은 밝기를 뒤집어도 그대로인데, CSS 조합은 빨강을 연분홍으로, 파랑을 아주 연한 보라로 바꿉니다. 사진이나 로고까지 함께 뒤집히는 문제도 있으니, 필터는 아이콘처럼 단색인 요소에만 쓰고 나머지 색은 따로 정하는 편이 안전합니다.

CSS·엑셀·코드로 반전하기

• CSS: filter: invert(1)(또는 100%)은 요소의 모든 색을 이 계산기와 같은 방식으로 반전합니다. W3C 명세는 필터 함수를 sRGB 색 공간에서 계산하도록 정하고 있으며, 값을 생략하면 1입니다. 0과 1 사이 값은 원본과 반전 사이를 섞는데, 0.5에서는 모든 채널이 가운데 값이 되어 어떤 색이든 회색(#808080)이 됩니다.
• 자바스크립트: 6자리 HEX 문자열 h(# 없이)를 '#' + (0xFFFFFF ^ parseInt(h, 16)).toString(16).padStart(6, '0')로 반전합니다. FFFFFF와 배타적 논리합(XOR)을 하면 자리마다 F에서 뺀 것과 같습니다.
• 파이썬: '#%06x' % (0xFFFFFF ^ int(h, 16))로 같은 값을 얻습니다.
• 엑셀: A1 칸에 #3498DB가 있다면 =DEC2HEX(16777215-HEX2DEC(SUBSTITUTE(A1,"#","")),6)가 CB6724를 돌려줍니다. 16777215는 FFFFFF를 10진수로 쓴 수이고, 마지막 인수 6은 앞자리 0을 채워 여섯 자리로 맞춥니다.

자주 틀리는 경우

• 반전색을 보색으로 쓰는 경우: 반전은 밝기까지 뒤집습니다. 같은 밝기의 반대 색이 필요하면 보색을 쓰세요. 두 색이 같은 것은 밝기가 50%일 때뿐입니다.
• 반전색이면 대비가 충분하다고 여기는 경우: 가운데 밝기의 색은 반전색과 명암비가 1:1에 가깝습니다. 글자와 배경으로 쓰기 전에 명암비를 꼭 확인하세요.
• 8자리 HEX를 통째로 반전하는 경우: #3498DB80의 마지막 80은 투명도입니다. 여덟 자리를 모두 F에서 빼면 #CB67247F가 되어 투명도까지 바뀝니다. 앞 여섯 자리만 반전해야 합니다.
• 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 정도 차이가 날 수 있습니다.
• 명암비는 투명도를 빼고 불투명한 두 색으로 계산합니다. 반투명 색은 실제로 겹치는 배경에 따라 달라집니다.
• CSS 색 이름은 표준 이름 148개만 알아봅니다. 'dark blue'처럼 띄어 쓴 이름이나 디자인 도구의 자체 이름은 HEX로 넣어 주세요.

기준: 반전 계산은 W3C Filter Effects Module Level 1의 invert() 정의와 같고, 명암비는 WCAG 2.2의 상대 휘도·명암비 정의를 따릅니다. 표의 CSS 필터 값은 Chromium 브라우저에서 2026년 10월 20일에 확인했습니다.

출처

• 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자리, 마지막 두 자리는 알파, RGB와 HSL 변환식
• 05MDN — invert()100%는 완전 반전, 0%는 그대로, 기본값 1
• 06Apple 지원 — 디스플레이 및 텍스트 크기 환경설정 사용하기클래식 반전과 스마트 반전의 차이
• 07Microsoft 지원 — DEC2HEX 함수DEC2HEX 함수, 두 번째 인수 places로 앞자리 0 채우기

자주 묻는 질문

함께 쓰는 도구