색상 모델 변환 도구（RGB・HSL・HSV・CMYK）
HEX 색상 코드를 입력하거나 색상 선택기로 색을 고르면, RGB・HSL・HSV（HSB）・CMYK 네 가지 색상 모델의 값을 한 번에 계산하여 보여줍니다.
각 색상 모델의 차이
| 모델 | 개요 | 주요 용도 |
|---|---|---|
| RGB | 빛의 삼원색（빨강・초록・파랑）을 각각 0〜255의 숫자로 혼합해 색을 표현하는 가산혼합 모델입니다. | 디스플레이・웹 개발（CSS）・이미지 편집 소프트웨어의 기본 형식입니다. |
| HSL | 색상（Hue）・채도（Saturation）・명도（Lightness） 세 요소로 색을 표현하는 모델로, 사람의 직관에 가까운 방식으로 색을 조정하기 쉽습니다. | CSS의 `hsl()` 함수, 배색 도구에서의 색상・채도 조정에 사용됩니다. |
| HSV/HSB | 색상（Hue）・채도（Saturation）・명도（Value/Brightness） 세 요소로 색을 표현하는 모델로, HSL과 비슷하지만 세 번째 축의 정의가 다릅니다. | Photoshop・Illustrator 등 디자인 도구의 색상 선택기에 사용됩니다. |
| CMYK | 시안・마젠타・노랑・검정판（검정） 네 가지 잉크를 겹쳐 색을 표현하는 감산혼합 모델입니다. | 인쇄물 디자인・DTP（종이 매체의 색 재현）에 사용됩니다. |
컬러 모델 변환이란
컬러 모델 변환이란 같은 색을 RGB·HSL·HSV(HSB)·CMYK라는 서로 다른 표색계의 수치로 변환하는 일입니다. RGB는 디스플레이가 빛을 내는 구조에 근거한 수치, HSL·HSV는 색상·채도·휘도(명도)라는 사람의 감각에 가까운 축으로 색을 나타낸 수치, CMYK는 인쇄 잉크의 겹침에 근거한 수치로, 같은 색이라도 보고 있는 축이 완전히 다릅니다.
이 도구는 HEX 컬러 코드나 컬러 피커로 지정한 한 가지 색을, 위의 네 가지 표색계 수치로 한꺼번에 변환해 표시합니다. 웹 제작에서 CSS의 기술 형식을 바꾸고 싶을 때, 디자인 도구 사이에서 색의 지정 방법이 다를 때, 인쇄용으로 CMYK 값을 확인하고 싶을 때처럼, 단일 색 변환만으로는 대응할 수 없는 ‘여러 모델을 동시에 견주어 보고 싶은’ 상황에 적합합니다.
컬러 모델 변환 도구의 사용 방법
- HEX 컬러 코드를 입력합니다 `#`의 유무, 3자리 축약형(`#f60`) 중 어느 쪽으로도 입력하실 수 있습니다.
- 또는 컬러 피커로 색을 고릅니다 고르신 색은 자동으로 HEX 코드란에 반영됩니다.
- 미리보기로 색을 확인합니다 입력값이 올바르게 인식되었는지를 색 견본으로 눈으로 확인하실 수 있습니다.
- RGB·HSL·HSV·CMYK의 변환 결과를 확인합니다 네 가지 표색계의 수치가 동시에 표시됩니다.
- 용도에 따라 값을 사용합니다 CSS의 `hsl()` 함수로의 옮겨 적기나 인쇄용 CMYK 값의 확인 등, 목적에 맞추어 수치를 이용합니다.
더 잘 활용하기 위한 팁
- HEX 코드 입력란에는 `#` 유무, 3자리 축약형（예: `#f60`）과 6자리 완전형 어느 쪽이든 입력할 수 있습니다.
- 색상 선택기로 고른 색은 자동으로 HEX 코드에 반영되므로, 감각적으로 색을 고르면서 정확한 수치를 확인할 수 있습니다.
- CSS에서 배경색이나 글자색을 `hsl()` 함수로 지정하고 싶다면, 여기서 계산된 HSL 값을 그대로 `hsl(H, S%, L%)` 형식으로 사용할 수 있습니다.
- 인쇄용 데이터를 만들 때는 여기 표시되는 CMYK 값이 어디까지나 간이 환산값이며, 실제 인쇄소가 사용하는 ICC 프로파일 기반의 변환값과는 다소 차이가 있을 수 있다는 점에 유의하세요.
컬러 모델 변환의 활용 사례
CSS에서의 색 지정 형식 변환
디자인 시안에서 지정된 HEX 코드를, CSS의 `hsl()` 함수로 색상·채도를 미세 조정하고 싶을 때의 HSL 값으로 변환하실 수 있습니다.
인쇄용 데이터의 CMYK 값 기준 확인
웹용으로 정한 RGB/HEX 배색을 인쇄물에 그대로 쓰기 전에 CMYK 환산값을 확인해 두면, 화면과 종이의 색 차이를 알아차리기 쉬워집니다. 정확한 색 재현이 필요한 경우에는 인쇄소의 ICC 프로파일에 근거한 변환을 별도로 확인해 주세요.
디자인 도구 사이에서의 색 인계
포토샵·일러스트레이터 등은 HSV(HSB)로 컬러 피커를 표시하는 경우가 많아, 웹의 컬러 코드와 수치가 어긋나 보일 때 이 도구로 대응 관계를 확인하실 수 있습니다.
배색의 미세 조정
색상·채도·휘도의 세 값으로 분해해 두면, 색상은 그대로 두고 밝기만 바꾸는 식의 조정 방향을 잡기 쉬워집니다. 세밀한 배색 패턴의 작성에는 별도로 컬러 팔레트 생성 도구도 활용해 주세요.
용어집
- RGB
- 빨강(Red)·초록(Green)·파랑(Blue)의 빛을 섞어 색을 표현하는 가법 혼색 모델입니다. 각 성분을 0~255의 수치로 나타내며, 디스플레이나 CSS의 기본적인 색 지정 방식으로 쓰입니다.
- HSL
- 색상(Hue)·채도(Saturation)·휘도(Lightness)의 세 요소로 색을 나타내는 모델입니다. 수치뿐인 RGB보다 ‘밝기’와 ‘선명함’을 직관적으로 조정하기 쉬운 것이 특징입니다.
- HSV(HSB)
- 색상(Hue)·채도(Saturation)·명도(Value/Brightness)의 세 요소로 색을 나타내는 모델입니다. HSL과 비슷하지만 명도의 정의가 다르며, 포토샵 등의 컬러 피커에서 널리 채용되고 있습니다.
- CMYK
- 사이언(Cyan)·마젠타(Magenta)·옐로(Yellow)·키 플레이트(Key plate, 검정)의 네 가지 잉크를 겹쳐 색을 나타내는 감법 혼색 모델입니다. 인쇄물의 디자인(DTP)에서 쓰입니다.
- 색상(Hue)
- 빨강·초록·파랑 같은 ‘색의 종류’를 0~360도의 각도로 나타낸 값입니다. HSL·HSV에서 공유되는 축으로, 원환 형태로 빨강에서 시작해 노랑·초록·파랑·보라를 거쳐 빨강으로 돌아옵니다.
- 채도(Saturation)
- 색의 선명함의 정도를 나타내는 값입니다. 채도가 0%에 가까울수록 회색에 가까워지고, 100%에 가까울수록 선명한 순색이 됩니다.
- 휘도/명도(Lightness / Value)
- HSL의 휘도(Lightness)는 검정~흰색이 섞인 정도, HSV의 명도(Value)는 그 색에 검정이 얼마나 섞여 있는지를 나타냅니다. 같은 색이라도 모델에 따라 수치의 의미가 다른 대표적인 예입니다.
- 키 플레이트(K)
- CMYK에서의 검정 잉크 성분입니다. 사이언·마젠타·옐로 세 가지만으로는 깊이 있는 검정을 재현하기 어려워, 인쇄에서는 검정 잉크를 따로 겹쳐 문자나 짙은 색을 또렷하게 합니다.
자주 묻는 질문
여담 ― 색상 모델의 역사와 용도 구분
RGB 가산혼합의 개념 자체는 19세기 색채 이론까지 거슬러 올라가지만, 컴퓨터 그래픽에서 널리 쓰이게 된 것은 1970년대 이후입니다. 당시 컬러 텔레비전과 디스플레이는 브라운관의 형광체（빨강・초록・파랑 세 종류）를 발광시켜 색을 만드는 구조였기 때문에, 그 물리적 구조에 그대로 대응하는 수치 모델로 RGB가 채택되었습니다.
HSL과 HSV는 모두 1970년대부터 1980년대에 걸쳐, 컴퓨터 그래픽 연구자들이 「사람이 RGB 수치를 직접 조정하는 것은 직관적이지 않다」는 과제를 해결하기 위해 고안했습니다. 특히 HSV는 1978년 Alvy Ray Smith（훗날 Pixar의 공동 창업자 중 한 명이 된 인물）가 발표한 논문에서 정식화된 것으로 잘 알려져 있습니다.
CMYK는 인쇄 기술의 역사와 함께 발전해 온 색상 체계로, 4색 분판 인쇄（four-color process printing）라는 기법에서 유래했습니다. 시안・마젠타・노랑 세 가지 색만으로는 깊이 있는 검정을 재현하기 어렵다는 인쇄 특유의 과제를 해결하기 위해 K（검정판）가 추가되었으며, 오늘날에도 오프셋 인쇄・잉크젯 프린터 등 많은 인쇄 기술의 표준으로 CMYK가 계속 사용되고 있습니다.