총 87개 서포트 유틸리티
100% 브라우저 자체 연산 (서버 전송 없음)
Zero Latency 실시간 결과
완전 프라이빗 개인정보 보호
디자인 및 컬러 Client Local

Color Picker (색상 추출기)

UI/UX 디자이너, 프론트엔드 개발자 및 그래픽 아티스트를 위해 2D 채도/명도 인터랙티브 피커, 색상환(Hue) 및 불투명도(Alpha) 슬라이더, 실시간 5대 색상 포맷(HEX, RGB, HSL, CMYK, HSV) 양방향 동기화, 보색·유사색·3색 하모니 팔레트 자동 생성, 그리고 W3C WCAG 2.1 표준 명도 대비 검사기를 브라우저 로컬에서 제공하는 올인원 컬러 스튜디오 유틸리티입니다.

선택된 색상 (Selected Color) (직접 입력 가능)
색상환 (Hue)0°
불투명도 (Opacity)100%

색상 포맷 변환 및 값 (Formats & Values)

모든 포맷 직접 입력 & 실시간 동기화 지원

색상 조화 팔레트 (Generated Harmonies)

보색 조화 (Complementary - 180°)
#B32D2D
#2DB3B3
유사색 조화 (Analogous - ±30°)
#B32D70
#B32D2D
#B3702D
3색 배색 (Triadic - 120°)
#B32D2D
#2DB32D
#2D2DB3
단색 음영 조화 (Monochromatic)
#A17070
#8F4444
#B32D2D
#6B1B1B
#3E1010

WCAG 명도 대비 검사기 (Contrast Checker)

Text on WhiteBackground: #FFFFFF
6.31:1
AAAAA
Text on DarkBackground: #1A1A1A
2.76:1
AAAAA

색상 히스토리 및 보관함 (Color History)

클라이언트 사이드 로컬 처리

모든 색상 좌표 변환, 하모니 계산 및 WCAG 명도 대비 측정은 사용자의 웹 브라우저 로컬 자원만을 사용하여 안전하게 수행되며 외부 서버로 전송되지 않습니다.

컴퓨터 그래픽스 및 색채학(Colorimetry) 가이드

디지털 색상 모델(RGB/HSL/CMYK) 수학적 변환 및 WCAG 2.1 명도 대비 이론

디지털 디스플레이와 인쇄 매체는 빛의 혼합 방식과 색 공간(Color Space)의 물리적 특성이 근본적으로 다릅니다. 모니터, 스마트폰, TV 화면은 적색(R), 녹색(G), 청색(B)의 가산 혼합(Additive Color Mixing)을 사용하는 sRGB/DCI-P3 광학 공간을 기반으로 작동하는 반면, 인쇄 매체는 시안(C), 마젠타(M), 옐로우(Y), 블랙(K)의 감산 혼합(Subtractive Color Mixing)을 사용합니다.

인간의 직관적인 색상 인식을 위해 개발된 HSL(색상·채도·명도) 및 HSV(색상·채도·명도값) 원통형 모델은 원색의 각도(Hue 0∘∼360∘0^\circ \sim 360^\circ), 선명도(Saturation), 그리고 밝기 레벨을 독립된 좌표 축으로 분리하여 웹 디자인 및 CSS 스타일링에서 가장 널리 활용됩니다.

본 도구는 부동소수점 정밀도의 색 공간 삼각함수 좌표 변환 알고리즘과 W3C WCAG 2.1 상대 휘도(Relative Luminance) 수식을 결합하여, 실시간 색상 피킹, 오차 없는 포맷 상호 변환, 기하학적 색상환 하모니 팔레트 추출 및 웹 접근성 규격 검증을 브라우저 로컬에서 수행합니다.

5대 표준 색상 포맷 양방향 동기화

HEX, RGB, HSL, CMYK, HSV 간의 상호 변환을 실시간 정밀 연산하여 디자인 도구(Figma)와 웹 코드 간의 완벽한 호환성을 보장합니다.

기하학적 색상환 하모니 팔레트 엔진

색채학의 이텐(Itten) 색상환 원리에 기반하여 보색(180°), 유사색(±30°), 3색(120°), 단색 음영 조화를 즉시 계산하여 제공합니다.

W3C WCAG 2.1 웹 접근성 명도 대비 검증

흰색/검은색 배경 대비 상대 휘도(LL)를 계산하여 텍스트 가독성을 위한 AA(4.5:1) 및 AAA(7:1) 규격 통과 여부를 실시간 진단합니다.

2D 인터랙티브 채도/명도 캔버스 피커

부드러운 마우스 드래그를 통해 미세한 채도와 명도를 직관적으로 탐색하고 투명도(Alpha)를 세밀하게 제어할 수 있습니다.

1. 디지털 색상 모델(Color Models) 특성 및 구조 비교

디지털 디자인 및 출판 인쇄에서 사용되는 5대 색상 표현 체계의 특성과 수치 범위 비교표입니다.

색상 모델 (Color Model)구성 채널 (Channels)수치 범위 (Data Range)주요 활용 분야혼합 특성
HEX (16진수 코드)#RRGGBB / #RRGGBBAA00 ~ FF (0 ~ 255)HTML/CSS 웹 표준, UI 디자인 시스템가산 혼합 (sRGB 압축)
RGB / RGBARed, Green, Blue, Alpha0 ~ 255, Alpha 0.0 ~ 1.0디스플레이 하드웨어, WebGL, Canvas빛의 3원색 가산 혼합
HSL / HSLAHue, Saturation, LightnessH: 0~360°, S/L: 0~100%CSS 컬러 팔레트 조작, 테마 동적 생성원통형 직관적 색상 모델
HSV / HSBHue, Saturation, Value/BrightnessH: 0~360°, S/V: 0~100%포토샵, 피그마 2D 컬러 피커원뿔형 페인팅 모델
CMYKCyan, Magenta, Yellow, Key(Black)0 ~ 100%오프셋 인쇄, 패키지 디자인, 출판물잉크의 감산 혼합

2. 색 공간 상호 변환 및 상대 휘도(Relative Luminance) 수학 공식

① RGB 정규화 (r,g,b∈[0,1]r, g, b \in [0, 1]):
- r=R255,g=G255,b=B255r = \frac{R}{255}, \quad g = \frac{G}{255}, \quad b = \frac{B}{255}
② RGB →\rightarrow HSL 변환 유도 (M=max⁡(r,g,b),m=min⁡(r,g,b),d=M−mM = \max(r,g,b), m = \min(r,g,b), d = M - m):
- 명도(Lightness): L=M+m2L = \frac{M + m}{2}
- 채도(Saturation): S={0if d=0d1−∣2L−1∣if d>0S = \begin{cases} 0 & \text{if } d = 0 \\ \frac{d}{1 - |2L - 1|} & \text{if } d > 0 \end{cases}
- 색상환 각도(Hue): H={0∘if d=060∘×(g−bd mod 6)if M=r60∘×(b−rd+2)if M=g60∘×(r−gd+4)if M=bH = \begin{cases} 0^\circ & \text{if } d = 0 \\ 60^\circ \times \left( \frac{g - b}{d} \bmod 6 \right) & \text{if } M = r \\ 60^\circ \times \left( \frac{b - r}{d} + 2 \right) & \text{if } M = g \\ 60^\circ \times \left( \frac{r - g}{d} + 4 \right) & \text{if } M = b \end{cases}
③ RGB →\rightarrow CMYK 인쇄 색상 변환:
- K=1−max⁡(r,g,b)K = 1 - \max(r, g, b)
- C=1−r−K1−K,M=1−g−K1−K,Y=1−b−K1−K(K<1일때)C = \frac{1 - r - K}{1 - K}, \quad M = \frac{1 - g - K}{1 - K}, \quad Y = \frac{1 - b - K}{1 - K} \quad (K < 1일 때)
④ W3C WCAG 2.1 상대 휘도(LL) 및 명도 대비율(Contrast Ratio) 계산식:
- 감마 보정 정규화 계수 c∈{r,g,b}c \in \{r, g, b\}에 대해:
clin={c12.92if c≤0.04045(c+0.0551.055)2.4if c>0.04045c_{lin} = \begin{cases} \frac{c}{12.92} & \text{if } c \le 0.04045 \\ \left( \frac{c + 0.055}{1.055} \right)^{2.4} & \text{if } c > 0.04045 \end{cases}
- 상대 휘도 공식: L=0.2126rlin+0.7152glin+0.0722blinL = 0.2126 r_{lin} + 0.7152 g_{lin} + 0.0722 b_{lin}
- 명도 대비율(Contrast Ratio CRCR): CR=L1+0.05L2+0.05(L1>L2)CR = \frac{L_1 + 0.05}{L_2 + 0.05} \quad (L_1 > L_2)
- 일반 텍스트 기준 CR≥4.5:1CR \ge 4.5:1 (AA 달성), CR≥7:1CR \ge 7:1 (AAA 달성).

3. 색채학의 배색 이론과 하모니 팔레트(Color Harmonies) 구성 원리

① 보색 배색 (Complementary - H+180∘H + 180^\circ):
- 색상환에서 정반대에 위치한 두 색상의 조합으로 강렬한 시각적 대비와 높은 주목성을 부여합니다. CTA(Call To Action) 버튼이나 핵심 하이라이트에 이상적입니다.
② 유사색 배색 (Analogous - H−30∘,H,H+30∘H - 30^\circ, H, H + 30^\circ):
- 색상환에서 서로 인접한 세 가지 색상의 조합으로 시각적 편안함, 자연스러움, 그리고 통일감 있는 무드를 조성합니다.
③ 3색 배색 (Triadic - H,H+120∘,H+240∘H, H + 120^\circ, H + 240^\circ):
- 색상환을 정확히 3등분(정삼각형)하는 색상의 조화로 다채로우면서도 균형 잡힌 활기찬 비주얼을 완성합니다.
④ 단색 조화 (Monochromatic - 동일 HH, 상이한 SS 및 LL):
- 단일 색상에서 채도(Saturation)와 명도(Lightness) 단계만을 조절하여 모던하고 정갈한 미니멀 디자인 시스템을 구축할 때 사용됩니다.

4. 웹 개발 및 CSS 스타일링에서의 동적 색상 제어 코드 예시

자주 묻는 질문 (FAQ)

Q.HEX 코드의 6자리와 8자리는 어떤 차이가 있나요?

6자리 HEX(#RRGGBB)는 Red, Green, Blue의 24비트 색상 정보만을 담고 있으며, 8자리 HEX(#RRGGBBAA)는 마지막 2자리에 00(완전 투명)부터 FF(완전 불투명)까지의 알파 채널(투명도) 값을 추가로 표현합니다.

Q.WCAG 명도 대비 기준인 AA와 AAA는 무엇을 의미하나요?

W3C 웹 접근성 표준(WCAG 2.1)에서 AA는 일반 본문 텍스트 기준 4.5:1 이상(큰 텍스트는 3:1 이상)을 충족해야 통과하며, AAA는 보다 엄격한 최상위 가독성 기준으로 일반 텍스트 7:1 이상(큰 텍스트는 4.5:1 이상)을 요구합니다.

Q.화면에서 보이는 색상과 인쇄물(CMYK) 색상이 다르게 나오는 이유는 무엇인가요?

모니터 디스플레이는 빛을 발산하는 RGB 가산 혼합 방식이므로 색 영역(Gamut)이 넓고 밝은 반면, 인쇄물은 종이에 흡수된 빛을 반사하는 CMYK 잉크 감산 혼합 방식이므로 RGB의 밝고 채도 높은 형광빛 영역을 온전히 인쇄하지 못하기 때문입니다.

Q.HSL 색상 체계가 RGB보다 웹 디자인에 유리한 이유는 무엇인가요?

RGB는 빨강, 초록, 파랑의 비율을 외우기 어려워 색을 조금 더 밝게 하거나 덜 선명하게 만들 때 값을 직관적으로 수정하기 어렵습니다. 반면 HSL은 색상(H)을 고정한 채 명도(L)나 채도(S) 숫자만 올리거나 내려 손쉽게 호버(Hover) 효과나 다크 모드 파생 색상을 계산할 수 있습니다.

Q.내가 선택한 색상 데이터가 외부 서버에 전송되거나 수집되나요?

전송되지 않습니다. 본 도구는 모든 색상 삼각함수 좌표 변환, 하모니 추출, 명도 대비 연산을 브라우저 로컬 자바스크립트 엔진 안에서 즉시 수행합니다.

관련 도구

웹 안전 색상(Web Safe Colors) 표

216가지 표준 웹 안전 색상(Web Safe Colors) 팔레트와 16진수 코드 검색 사전

도구 열기

RGB to HSL/HSV/HEX 색상 변환기

RGB, HSL, HSV, HEX, CMYK 색상 코드를 실시간 상호 변환하고 슬라이더로 조절하는 100% 로컬 컬러 변환기

도구 열기