같은 HEX 코드인데 화면마다 색이 다르게 보이는 이유
같은 HEX 코드, 예를 들어 #ec4899을 CSS나 디자인 툴에 똑같이 입력했는데 아이폰·맥에서 볼 때와 일반 모니터에서 볼 때 채도가 다르게 보인 경험이 있다면 착각이 아닙니다. 원인은 HEX라는 숫자 표기 자체가 아니라, 그 숫자를 어떤 색공간(color space) 기준으로 해석해서 화면에 그리느냐에 있습니다. 이 가이드는 sRGB와 Display P3라는 두 색공간의 차이, 그리고 실제 색상 변환 도구가 이를 코드 상 어떻게 다루는지 정리합니다.
1. sRGB: 웹 색상의 기본 전제
1996년 HP와 마이크로소프트가 공동 개발한 sRGB는 이후 웹 표준의 기본 색공간이 되었습니다. CSS의 HEX·rgb()·hsl() 값은 별도 표기가 없는 한 전부 sRGB 색공간을 전제로 정의됩니다. 즉 #ff0000은 "가장 붉은 빨강"이 아니라 "sRGB 색공간에서 R채널이 최댓값일 때의 색"이라는 뜻입니다. sRGB가 표현 가능한 색의 범위(색역, gamut)는 사람이 지각할 수 있는 색 전체의 약 35% 수준으로, 채도 높은 초록·주황 계열 상당수는 애초에 sRGB 삼각형 바깥에 있어 표현 자체가 불가능합니다.
2. Display P3: 화면이 더 넓은 색역을 갖게 된 배경
2015년 아이맥부터 애플이 채택한 Display P3는 디지털 시네마 표준 DCI-P3의 화이트포인트를 웹 표준인 D65로 맞춘 변형 색공간으로, sRGB보다 표현 가능한 색의 면적이 약 25% 더 넓습니다. 특히 빨강·초록 계열에서 차이가 두드러집니다. 이후 최신 아이폰, 맥, 일부 안드로이드 플래그십, 고급 모니터가 순차적으로 P3 패널을 채택하면서 "P3 디스플레이"는 더 이상 예외가 아니라 오히려 흔한 사양이 됐습니다.
3. "같은 HEX인데 다르게 보인다"의 진짜 원인
HEX·RGB 숫자 자체는 항상 sRGB 기준으로 정의되어 있고, 브라우저 같은 색상 관리(color-managed) 환경에서는 이 숫자를 디스플레이의 실제 색역(sRGB든 P3든)에 맞게 자동 변환해서 그립니다. 정상적인 웹 브라우저라면 #ec4899은 sRGB 모니터에서 보든 P3 모니터에서 보든 "같은 색"으로 보이도록 시스템이 보정합니다. 문제는 이 색상 관리 과정을 건너뛰는 경로에서 생깁니다 — 색공간 태그가 누락된 이미지 파일, 일부 게임 엔진이나 오래된 그래픽 소프트웨어, 혹은 디자인 툴이 P3로 지정한 색상을 sRGB HEX로 착각해 내보낼 때입니다. 이런 경우 같은 숫자가 다른 색공간 기준으로 잘못 해석되어 채도·색조가 어긋나 보입니다.
4. 실전 예시: sRGB 빨강과 그에 대응하는 P3 좌표
| 표기 | 값 | 의미 |
|---|---|---|
| CSS sRGB 표기 | #ff0000 / rgb(255,0,0) | sRGB 색공간에서 정의된 표준 빨강 |
| 같은 색을 P3 좌표로 재현 | color(display-p3 0.9175 0.2003 0.1386) | 육안상 동일한 색을 Display P3 좌표로 변환한 값 |
| P3 전용 색(sRGB로 표현 불가) | color(display-p3 1 0 0) | sRGB 삼각형 밖의 색 — 기존 빨강보다 더 채도 높음 |
5. 이 사이트 색상 변환기는 어떤 방식으로 동작하나
modoohub.com의 색상 변환기 코드를 직접 확인한 결과, HEX·RGB·HSL·RGBA 사이의 상호 변환은 hexToRgb·rgbToHex·rgbToHsl 함수로 순수 수치 연산만 처리합니다. color() 함수나 display-p3 좌표계를 다루는 로직은 없으며, 모든 입력·출력값은 항상 sRGB 0~255 정수 범위로 취급됩니다. 즉 이 도구가 계산해 주는 값은 언제나 "sRGB 기준 변환값"이며, 그 값이 P3 디스플레이에서 시각적으로 같은 색으로 보정되는지는 브라우저·OS의 색상 관리 몫입니다. 광색역 색상을 직접 다루고 싶다면 별도로 color(display-p3 ...) 문법을 CSS에 수동으로 작성해야 합니다.
6. 광색역을 웹에서 실제로 다루고 싶다면
CSS Color 4 스펙은 color(display-p3 r g b) 함수와 @media (color-gamut: p3) 미디어쿼리를 지원합니다. 후자로 P3 지원 화면인지 감지한 뒤 더 채도 높은 색을 조건부로 적용하고, 지원하지 않는 화면에는 sRGB 폴백을 그대로 두는 방식이 일반적입니다. 다만 대부분의 실무에서는 sRGB HEX만으로 충분하며, 인쇄물·브랜드 컬러처럼 정확한 색 재현이 중요한 작업에서만 P3까지 신경 쓰면 됩니다. 배경·강조색의 시인성까지 함께 점검하려면 색상 대비 체커나 접근성 색상 검사기를 같이 사용하는 것을 권장합니다. 팔레트 설계에는 CSS 그라디언트 생성기와 Tailwind 색상 생성기도 참고하세요.
자주 묻는 질문
Q. 모든 브라우저가 색상 관리를 지원하나요?
최신 크롬·사파리·파이어폭스는 색상 관리를 지원하지만, OS 설정이나 콘텐츠에 색공간 태그가 누락된 경우 예외적으로 색이 어긋나 보일 수 있습니다.
Q. 스크린샷을 다른 기기로 보내면 왜 색이 달라 보이나요?
P3로 캡처된 이미지를 색상 관리를 하지 않는 뷰어로 열거나 그 반대의 경우, 픽셀 값이 다른 색공간 기준으로 재해석되며 채도가 달라질 수 있습니다.
Q. 이 사이트 색상 변환기로 P3 좌표까지 확인할 수 있나요?
아니요. 현재는 sRGB 기준 HEX/RGB/HSL/RGBA 변환만 지원합니다. P3 값이 필요하면 CSS color() 함수를 직접 작성해야 합니다.
Q. sRGB만 신경 써도 되는 경우는 언제인가요?
대부분의 웹·앱 UI, 텍스트 콘텐츠는 sRGB로 충분합니다. 사진 편집, 브랜드 컬러 인쇄물처럼 색 재현 정확도가 중요한 작업에서만 P3를 추가로 고려하면 됩니다.