본문으로 건너뛰기

색상 변환기

HEX, RGB, HSL, HSV, CMYK, XYZ, Lab 간 색상을 변환하고 대략적인 Adobe RGB 값을 확인하며, Tailwind 스타일의 음영 스케일과 색상 팔레트를 생성합니다.

#
RGB
HSL
°
%
%

색상 변환 결과

#3B82F6
RGB
-
HSL
-
HSV
-
CMYK
-
XYZ (D65)
-
CIE Lab
-
Adobe RGB (근사치)
-

음영 스케일

입력한 색상에서 생성된 Tailwind 스타일의 50~950 스케일입니다. 음영을 선택하여 현재 색상으로 사용하세요.

팔레트 생성기

팔레트 유형

이용 방법

색 공간 변환은 RGB, HSL, HSV, CMYK, XYZ, Lab 등의 모델 간 색상 값을 변환합니다. RGB, HSL, HSV는 동일한 sRGB 색상을 서로 다른 방식으로 표현하며, CIE XYZ는 Adobe RGB 등 다른 색 공간으로 변환하는 데 사용되는 기기에 독립적인 중간 공간이고, Lab은 명도와 색상을 분리하여 지각적으로 더 균일한 비교를 가능하게 합니다.

  1. 색상 입력

    HEX 코드를 입력하거나 RGB 또는 HSL 슬라이더를 드래그하세요.

  2. 모든 형식 확인

    RGB, HSL, HSV, CMYK, XYZ, Lab 및 대략적인 Adobe RGB 값이 함께 업데이트됩니다.

  3. 스케일 또는 팔레트 생성

    UI 토큰에는 셰이드 스케일을 사용하고, 색 구성표에는 팔레트 생성기를 사용합니다.

CIE XYZ를 통한 변환

각 RGB 색 공간은 기본색과 백색점을 CIE XYZ 삼자극치로 정의합니다. 변환은 3x3 행렬을 적용하여 원본 RGB를 XYZ로 변환한 다음, 두 번째 행렬을 사용하여 XYZ를 대상 RGB로 변환합니다. sRGB와 Adobe RGB는 모두 D65 백색점을 사용하므로 둘 사이에는 색 적응이 필요하지 않지만, DCI-P3 시네마는 다른 백색점을 사용하므로 적응이 필요합니다.

Adobe RGB에서 색상이 다르게 보이는 이유

Adobe RGB는 특히 청록색 영역에서 sRGB보다 현저히 넓은 색재현율을 가집니다. Adobe RGB의 녹색 기본색이 CIE 다이어그램에서 더 바깥쪽에 위치하기 때문에 동일한 RGB 수치는 Adobe RGB에서 더 채도가 높은 색상을 나타냅니다. 애플리케이션이 파일에 포함된 프로필을 무시하고 sRGB로 가정할 경우, Adobe RGB에서만 유효했던 색상은 의도보다 더 탁하게 표시됩니다.

색재현율 초과 색상

정규화된 값 기준으로 어떤 채널이든 0 미만 또는 1 초과가 되면 해당 색상은 대상 공간에서 색재현율을 초과합니다. 지각 렌더링 인텐트는 전체 색재현율을 비례적으로 압축하고, 상대 색도측정은 색재현율 내 색상은 그대로 두고 초과 값만 경계로 클리핑하며, 절대 색도측정은 백색점 차이도 보존합니다.

사진 편집용 sRGB 또는 Adobe RGB

출력 대상이 웹 또는 일반 소비자용 화면이라면 거의 대부분 sRGB를 사용하므로, sRGB 환경에서 편집하면 의도치 않은 과포화를 방지할 수 있습니다. 광색역 잉크젯 프린터나 오프셋 인쇄로 출력하는 경우 Adobe RGB가 녹색 및 청록색 디테일을 더 잘 보존합니다. sRGB와 Adobe RGB는 동일한 D65 백색점(약 x=0.3127, y=0.3290)을 공유하므로, 두 색 공간 간 변환에는 백색점 적응 없이 색역 재매핑만 필요합니다.

자주 묻는 질문

파일을 sRGB와 Adobe RGB 간에 이동할 때 색상이 다르게 보이는 이유는 무엇인가요?

Adobe RGB는 특히 청록-녹색 영역에서 훨씬 더 넓은 색역을 가집니다. Adobe RGB의 RGB 값 (0, 200, 0)은 sRGB의 동일 값보다 더 채도가 높은 녹색을 나타내는데, 이는 Adobe RGB의 녹색 원색이 CIE 도표상에서 더 바깥쪽에 위치하기 때문입니다. 임베디드 프로파일을 무시하고 sRGB를 가정하는 응용 프로그램에서 파일을 열면, 이러한 sRGB 범위 밖의 색상이 잘못 표시되어 의도보다 더 탁하게 보일 수 있습니다.

CIE XYZ를 통한 색 공간 변환은 어떻게 작동하나요?

각 RGB 색 공간은 고유한 원색과 백색점을 CIE XYZ 삼자극값으로 정의합니다. 변환 과정에서는 먼저 3x3 행렬을 적용하여 소스 RGB를 XYZ로 변환(절대 비색법)한 다음, 두 번째 행렬을 사용하여 XYZ를 타겟 RGB로 변환합니다. 이 두 행렬은 각 색 공간의 원색으로부터 유도됩니다. 이 2단계 프로세스는 부동소수점 정밀도 내에서 정확하며, 입력과 출력 사이에 눈에 띄는 차이가 있다면 해당 색상이 타겟 색역을 벗어났음을 의미합니다.

변환 중 색상이 색역을 벗어나면 어떻게 되나요?

색역 밖 색상은 대상 공간에서 정규화된 값 기준 하나 이상의 RGB 채널이 0 미만 또는 1 초과인 경우입니다. 렌더링 인텐트는 이러한 색상을 매핑하는 방식을 결정합니다. 지각적 인텐트는 전체 색역을 비례적으로 압축하고, 상대 색도 측정 인텐트는 색역 내 색상을 유지하면서 색역 밖 값을 경계로 클리핑하며, 절대 색도 측정 인텐트는 화이트 포인트 차이도 보존합니다. Photoshop 및 기타 ICC 호환 애플리케이션에서는 변환 시 렌더링 인텐트를 선택할 수 있습니다.

사진 편집은 sRGB와 Adobe RGB 중 어느 것으로 해야 하나요?

출력 대상이 웹이나 일반 소비자용 화면이라면 거의 모두 sRGB를 사용하므로 sRGB로 편집하면 과포화를 방지할 수 있습니다. 광색역 잉크를 사용하는 고품질 잉크젯이나 오프셋 인쇄로 출력하는 경우 Adobe RGB는 CMYK 지원 프린터가 재현할 수 있는 더 많은 녹색 및 청록색 디테일을 보존합니다. 향후 활용을 대비하거나 출력 매체가 불확실한 경우 전문가들은 주로 Adobe RGB나 ProPhoto RGB를 작업 공간으로 사용하고 최종 웹 내보내기 단계에서만 sRGB로 변환합니다.

주요 색상 공간별 올바른 화이트 포인트는 무엇인가요?

sRGB와 Adobe RGB는 모두 D65(약 6,500K, CIE 색도 x=0.3127, y=0.3290)를 사용합니다. DCI-P3 시어터는 영화 상영을 위해 D60 상당의 백색점(약 6,300K, x=0.3140, y=0.3510)을 사용합니다. Apple의 소비자용 변형인 Display P3는 D65를 사용하여 sRGB 워크플로와의 호환성이 더 높습니다. Rec. 2020 역시 D65를 사용합니다. 변환 시 적응 없이 백색점이 일치하지 않으면 색 편향이 발생합니다. 백색점 경계를 넘을 때는 항상 색채 적응(Bradford 또는 Von Kries 행렬)을 적용하세요.