색상 선택 도구 - RGB, 헥스, CMYK 및 HSV 색상 코드 변환

색상 선택기란?

색상 선택기는 색상을 고르고 그 값을 다양한 색상 형식으로 확인하는 도구입니다. 이 도구는 RGB(빨강, 초록, 파랑), 헥스, CMYK(청록, 자홍, 노랑, 검정), HSV(색상, 채도, 명도)를 동시에 표시합니다. 한 형식의 값을 변경하면 다른 형식의 값도 즉시 업데이트됩니다.

색상 선택기 사용 방법

색상을 선택하는 방법은 세 가지입니다.

스펙트럼 상자의 아무 곳이나 클릭하여 색상과 채도를 선택합니다. 가로 위치는 색상 계열(빨강이나 파랑 등)을 정합니다. 세로 위치는 색상이 얼마나 선명하거나 흐릿하게 보이는지를 나타내는 채도를 정합니다. 스펙트럼 아래의 슬라이더는 왼쪽의 검정에서 오른쪽의 최대 밝기까지 명도를 조절합니다.

정확한 값을 직접 입력할 수도 있습니다. 헥스 필드에는 #2ECC71 같은 코드를 # 없이 또는 포함하여 입력할 수 있습니다. RGB 필드에는 각각 0부터 255까지의 정수를 입력할 수 있습니다. CMYK 필드에는 각각 0부터 100까지의 정수를 입력할 수 있습니다. 허용 범위를 초과한 값은 최댓값으로 제한됩니다.

각 색상 형식 옆에는 복사 버튼이 있습니다. 이 버튼을 클릭하면 해당 값이 클립보드에 복사되고 잠시 "복사됨!"이라는 메시지가 표시됩니다.

색상 모델 설명

RGB

RGB는 빨강, 초록, 파랑 빛을 혼합하여 색상을 나타내며, 화면이 모든 픽셀을 만드는 데 사용하는 세 가지 색과 같습니다. 각 채널의 범위는 0부터 255까지입니다. RGB(255, 0, 0)은 순수한 빨강이고, RGB(0, 0, 0)은 검정입니다. 브라우저, 앱, 동영상 소프트웨어는 모두 화면의 작동 방식에 맞는 RGB를 사용합니다.

헥스

헥스 코드는 RGB 색을 10진법이 아니라 16진법으로 적은 것입니다. #2ECC71은 문자 쌍 세 개로 이루어지며, 빨강은 2E, 초록은 CC, 파랑은 71입니다. 각 쌍의 범위는 00부터 FF까지입니다. 헥스 코드는 CSS가 직접 받아들이고 rgb()보다 입력하기 짧아서 웹 디자인에서 흔히 쓰입니다. 세 글자 약식 표기도 있어서 #0F0은 #00FF00과 같은 뜻입니다.

CMYK

CMYK는 인쇄에 사용됩니다. 프린터는 흰 종이 위에 청록, 자홍, 노랑, 검정 잉크를 겹쳐 색상을 만들므로 빛을 더하는 대신 빼는 방식으로 작동합니다. 각 채널은 0부터 100까지의 백분율입니다. CMYK(0, 0, 0, 0)은 잉크가 전혀 없는 상태이므로 흰 종이가 그대로 보입니다. CMYK는 화면에 표시되는 모든 색상을 재현할 수 없습니다. 특히 일부 밝은 파랑과 초록은 인쇄하면 더 탁하게 보입니다.

HSV

HSV는 색상, 채도, 명도를 따로 나타냅니다. 색상은 색상 계열을 뜻하며 0°부터 360°까지의 각도로 표시합니다. 0°는 빨강, 120°는 초록, 240°는 파랑입니다. 채도는 색상이 얼마나 선명한지를 나타내며 0%(회색)부터 100%(완전히 선명한 색상)까지입니다. 명도는 얼마나 밝은지를 나타내며 0%(검정)부터 100%(최대 밝기)까지입니다. HSV는 사람들이 자연스럽게 색상을 설명하는 방식과 비슷하므로 이 도구의 스펙트럼과 명도 슬라이더도 HSV를 중심으로 구성되어 있습니다.

RGB에서 헥스로 변환하는 공식

0부터 255까지의 숫자인 각 RGB 채널을 두 자리 십육진수로 변환한 다음, 세 쌍을 앞에 #을 붙여 연결합니다.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

RGB에서 CMYK로 변환하는 공식

먼저 각 RGB 채널을 0과 1 사이의 분수로 환산합니다. 검정(K)은 가장 큰 채널을 기준으로 정합니다. 그런 다음 나머지 채널과 K를 사용하여 청록, 자홍, 노랑을 계산합니다.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

K가 1일 때(색상이 순수한 검정일 때)는 0으로 나누는 것을 피하기 위해 C, M, Y를 모두 0으로 설정합니다.

RGB에서 HSV로 변환하는 공식

먼저 RGB를 0과 1 사이의 분수로 환산합니다. 세 값 중 가장 큰 값을 $C_{max}$, 가장 작은 값을 $C_{min}$, 두 값의 차이를 $\Delta$라고 합니다.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ 그 외의 경우 } \frac{\Delta}{C_{max}}\times 100\%$

색상은 어떤 채널이 가장 큰지에 따라 달라집니다.

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## 계산 예시 초록 계열 색상인 RGB(46, 204, 113)에서 시작합니다. **헥스:** 헥스 표기에서 46은 `2E`, 204는 `CC`, 113은 `71`이므로 결과는 `#2ECC71`입니다. **CMYK:** 환산하면 R′ = 0.180, G′ = 0.800, B′ = 0.443입니다. G′가 가장 크므로 K = 1 − 0.800 = 0.20이며, 검정 잉크는 20%입니다. 그런 다음 C = (1 − 0.180 − 0.20) / 0.800 × 100 ≈ 77%, M = (1 − 0.800 − 0.20) / 0.800 × 100 = 0%, Y = (1 − 0.443 − 0.20) / 0.800 × 100 ≈ 45%입니다. 결과는 CMYK(77, 0, 45, 20)입니다. **HSV:** $C_{max}$ = 0.800(초록), $C_{min}$ = 0.180이므로 Δ = 0.620입니다. 명도 = 80%입니다. 채도 = 0.620 / 0.800 × 100 ≈ 77%입니다. 초록이 가장 크므로 H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0.443 − 0.180) / 0.620 + 2) ≈ 145°입니다. 결과는 HSV(145°, 77%, 80%)입니다. ## 색상 선택의 접근성 높이기 대략 [남성 12명 중 1명 (2.5 cm)](https://www.nei.nih.gov/eye-health-information/eye-conditions-and-diseases/color-blindness)과 여성 200명 중 약 1명 (2.5 cm)이 어떤 형태로든 색각 이상이 있으며, 가장 흔한 것은 빨강과 초록을 구별하는 능력이 떨어지는 경우입니다. 아이콘이나 라벨이 없는 빨간 오류 메시지처럼 색만으로 의미를 전달하는 디자인은 이런 사용자에게 통하지 않습니다. 색과 함께 텍스트 라벨, 아이콘 또는 패턴을 더하면 이 문제가 해결됩니다. 텍스트는 배경과도 충분한 대비가 필요합니다. 웹 콘텐츠 접근성 지침(WCAG)은 명암비로 [일반 텍스트에는 최소 4.5:1, 큰 텍스트에는 3:1](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)을 권장합니다. 이 도구는 명암비를 직접 계산하지 않으므로, 이를 측정하려면 전용 명암비 검사기가 필요합니다. ## 자주 묻는 질문 **RGB와 CMYK는 무엇이 다릅니까?** RGB는 화면용이며 빨강, 초록, 파랑 빛을 더해서 색을 만듭니다. CMYK는 인쇄용이며 종이 위에 잉크를 겹쳐서 색을 만드는데, 이는 오히려 빛을 빼는 방식입니다. 잉크는 화면이 내는 색의 범위를 따라갈 수 없으므로 RGB는 CMYK보다 더 밝은 색을 낼 수 있습니다. **인쇄한 색이 화면과 다르게 보이는 이유는 무엇입니까?** 화면은 빛을 직접 내지만, 인쇄된 종이는 닿는 빛만 반사합니다. 또한 CMYK 잉크는 RGB 빛보다 표현할 수 있는 색의 범위가 좁아서, 화면의 밝은 색 일부는 종이에서 똑같이 재현할 수 없습니다. **헥스 코드의 # 기호는 무엇을 뜻합니까?** 뒤따르는 문자가 십육진수 색상 코드임을 나타내는 표시로, 초기 HTML과 CSS에서 비롯된 관례입니다. 이 기호가 없으면 브라우저는 그 값을 색으로 인식하지 못합니다. **일부 헥스 코드는 왜 세 글자뿐입니까?** 세 글자 코드는 각 쌍이 같은 숫자를 반복하는 여섯 글자 코드의 약식 표기입니다. `#0F0`은 `#00FF00`으로 확장됩니다. **형식 간 변환은 정확합니까?** RGB에서 헥스로의 변환은 같은 숫자를 다른 진법으로 적는 것이므로 정확합니다. RGB에서 CMYK로의 변환은 근삿값입니다. 서로 다른 물리적 과정이며 색 범위도 다른 빛과 잉크 사이를 변환하기 때문입니다. **이 도구는 이미지나 웹페이지에서 색을 직접 추출할 수 있습니까?** 아니요. 브라우저 확장 프로그램이나 운영 체제에 내장된 색상 추출 도구(macOS의 Digital Color Meter 등)로 화면에서 색을 읽을 수 있으며, 얻은 값을 이 도구에 입력하면 변환할 수 있습니다. ## 참고 자료 1. 월드 와이드 웹 컨소시엄(W3C). *CSS Color Module Level 4*. [CSS 색상 모듈 레벨 4](https://www.w3.org/TR/css-color-4/) — 헥스 색상은 빨강, 초록, 파랑에 각각 00부터 ff까지의 쌍을 사용하며, 3자리 형식은 각 자리를 두 번 반복하므로 #123은 #112233과 같습니다. 2. 미국 국립안과연구소. *Color Blindness*. [색각 이상](https://www.nei.nih.gov/eye-health-information/eye-conditions-and-diseases/color-blindness) — 남성 약 12명 중 1명 (2.5 cm)이 색각 이상이 있으며, 남성은 여성보다 위험이 훨씬 높습니다. 3. 월드 와이드 웹 컨소시엄(W3C). *Understanding Success Criterion 1.4.3: Contrast (Minimum)*. [대비(최소)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — 텍스트에는 최소 4.5:1의 명암비가 필요하며, 큰 텍스트는 3:1입니다.