P3 색역 테스트

이 도구가 유용했나요? 댓글을 남기거나 팁을 공유하거나 개선할 점을 알려주세요.

이 도구의 기능

이 도구는 브라우저에서 바로 색상환 주위에 균등하게 배치된 12개의 색조에 걸쳐 sRGB와 Display P3를 비교하여, 단순한 합격/불합격 확인이 아니라 디스플레이가 실제로 표준 sRGB보다 얼마나 넓게 어떤 색상을 보여주는지 정확히 확인할 수 있게 합니다.

작동 방식

HSL 색상환 주위에 30도 간격으로 12개의 색조가 생성되며, 각각 완전 채도와 50% 명도로, 해당 색조의 가장 선명한 sRGB 버전을 제공합니다. 그런 다음 동일한 세 개의 숫자 RGB 값이 일반 rgb() 대신 CSS의 color(display-p3 ...) 함수를 사용하여 두 번째로 렌더링되므로, 색상은 sRGB가 아닌 Display P3의 더 넓은 원색에 대해 해석됩니다. P3의 빨강과 초록 원색은 sRGB보다 더 바깥쪽에 있는 반면 파랑 원색은 거의 같기 때문에, 두 색 공간에서 동일한 숫자를 재사용하면 따뜻한 색조에서는 눈에 띄게 더 채도가 높은 결과가, 파랑에서는 거의 동일한 결과가 나와, P3 대 sRGB 색역 차이의 실제 형태를 추상적으로 설명하는 대신 직접 시각화합니다.

해결하는 문제

• P3가 지원되는지 여부뿐만 아니라, 어떤 색조가 광색역 디스플레이에서 가장 큰 혜택을 받는지 정확히 확인하기.
• 현재 브라우저와 디스플레이 조합에서 Display P3 렌더링이 실제로 활성화되어 있는지 확인하기.
• 왜 어떤 색상은 P3 화면에서 극적으로 더 선명해 보이는 반면 다른 색상은 거의 똑같아 보이는지 이해하기.
• 광색역 하드웨어에 투자하기 전에 P3의 장점이 실제로 얼마나 큰지 빠르게 시각적으로 확인하기.

자주 묻는 질문