색상 선택 도구 - 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%)입니다. ## 색상 선택의 접근성 높이기 대략 남성 (2.5 cm) 1명 중 12명, 여성 (2.5 cm) 1명 중 200명에게 어떤 형태로든 색각 이상이 있으며, 가장 흔한 증상은 빨강과 초록을 구분하는 능력이 떨어지는 것입니다. 아이콘이나 레이블 없이 빨간색 오류 메시지를 표시하는 것처럼 색상만으로 의미를 전달하는 디자인은 이러한 사용자에게 제대로 작동하지 않습니다. 색상과 함께 텍스트 레이블, 아이콘 또는 패턴을 추가하면 이 문제가 해결됩니다. 텍스트는 배경과 충분한 대비를 이루어야 합니다. 웹 콘텐츠 접근성 지침(WCAG)은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 명암 대비율을 권장합니다. 이 도구 자체는 명암 대비율을 계산하지 않으므로 이를 측정하려면 전용 대비 확인 도구가 필요합니다. ## 자주 묻는 질문 **RGB와 CMYK의 차이는 무엇인가요?** RGB는 화면에 사용되며 빨강, 초록, 파랑 빛을 더해 색상을 만듭니다. CMYK는 인쇄에 사용되며 종이 위에 잉크를 겹쳐 색상을 만들므로 빛을 빼는 방식으로 작동합니다. 잉크는 화면이 방출할 수 있는 색상 범위를 따라갈 수 없기 때문에 RGB가 CMYK보다 더 밝은 색상을 만들 수 있습니다. **인쇄된 색상이 화면과 다르게 보이는 이유는 무엇인가요?** 화면은 빛을 직접 방출하지만 인쇄된 페이지는 페이지에 닿는 빛을 반사할 뿐입니다. 또한 CMYK 잉크는 RGB 빛보다 더 좁은 색상 범위를 가지므로 일부 밝은 화면 색상은 종이에서 정확히 재현할 수 없습니다. **헥사 코드에서 # 기호는 무엇을 의미하나요?** 뒤에 오는 문자가 헥사 색상 코드임을 나타내는 기호로, 초기 HTML과 CSS에서 비롯된 관례입니다. 이 기호가 없으면 브라우저는 해당 값을 색상으로 인식하지 못합니다. **일부 헥사 코드가 세 문자뿐인 이유는 무엇인가요?** 세 문자 코드는 각 쌍이 같은 숫자를 반복하는 여섯 문자 코드의 축약형입니다. `#0F0`은 `#00FF00`으로 확장됩니다. **형식 간 변환은 정확한가요?** RGB에서 헥사로의 변환은 같은 숫자를 다른 진법으로 표기하는 것이므로 정확합니다. RGB에서 CMYK로의 변환은 빛과 잉크라는 서로 다른 물리적 과정과 색상 범위 사이를 변환하므로 근사값입니다. **이 도구로 이미지나 웹페이지에서 직접 색상을 선택할 수 있나요?** 아니요. 브라우저 확장 프로그램이나 운영 체제에 내장된 색상 선택기(macOS의 Digital Color Meter 등)를 사용하면 화면에서 색상을 읽을 수 있습니다. 그런 다음 얻은 값을 이 도구에 입력하여 변환할 수 있습니다.