색상 선택기
온라인 색상 선택 도구, HEX, RGB, HSL 형식 상호 변환, 색상 팔레트 생성
색상 선택기란?
색상 선택기는 프론트엔드 개발과 UI 디자인에서 자주 사용되는 도구로, 색상을 정확하게 선택하고 다른 형식 사이에 변환하는 데 도움이 됩니다. HEX는 16진수를 사용하여 표시하고, RGB는 빨강/녹색/파랑 삼원색을 기반으로 하며, HSL은 색조, 채도, 명도를 기반으로 하여 각각 적용되는 시나리오가 있습니다. 실제 제품에 적용할 색상은 접근성 대비, 다크 모드, 브랜드 팔레트, 모니터 색상 차이를 함께 검토해야 디자인 의도와 사용성이 유지됩니다.
사용 방법
사용 방법
- 색상 선택기를 클릭하여 색상을 선택하거나, 입력 필드에 색상 값을 입력하세요
- HEX, RGB, HSL 형식의 변환 결과를 확인하세요
- 형식 옆의 복사 버튼을 클릭하여 색상 값을 복사하세요
- 보색, 유사색 등의 조합 제안을 위해 색상 스키마를 참조하세요
- 같은 색상의 어둡고 밝은 변형을 위해 음영과 색조를 확인하세요
색상 팁
- 텍스트, 아이콘 또는 컨트롤에 색상을 사용하기 전에 대비를 확인하세요. 시각적으로 만족스러운 색상도 접근성 요구사항을 충족하지 못할 수 있습니다.
- 밝기나 채도를 조정할 때는 HSL을 사용하고, CSS나 디자인 토큰에 값을 복사할 때는 HEX 또는 RGB를 사용하세요.
활용 사례
기술 원리
이 도구의 모든 값은 IEC 61966-2-1에 정의된 sRGB 색 공간에서 다루어지며, 이는 CSS hex 리터럴, rgb() 함수, 모든 <canvas> 읽기에서 기본으로 가정됩니다. HEX #RRGGBB는 24비트 패킹 정수(채널당 8비트, 0-255)이며, HEX #RRGGBBAA는 알파 바이트를 추가합니다. rgb()/rgba()는 정수 또는 백분율로 동일한 채널을 노출하고, hsl()/hsla()는 색조를 도 단위 [0, 360), 채도와 명도를 [0%, 100%]로 하는 원통 좌표로 전환합니다. RGB→HSL 변환에서는 L = (max + min) / 2, 비-zero 크로마에 대해 S = (max - min) / (1 - |2L - 1|), 그리고 어느 채널이 최대값인지에 따른 6구간 분할 공식으로 H를 구합니다. 역변환 HSL→RGB는 표준 t = L < 0.5 ? L(1+S) : L+S-LS 알고리즘을 사용한 뒤 각 채널을 다시 0-255로 스케일링합니다. 실시간 피커는 네이티브 <input type="color"> 요소를 사용하며, 지원 브라우저에서는 EyeDropper API도 제공합니다(Chrome 95+, Edge 95+, 2026년 기준 Safari/Firefox에서는 아직 미지원). EyeDropper는 OS 수준의 화면 샘플을 트리거하고 sRGB hex 문자열을 반환하지만, 교차 출처 iframe이나 DRM 보호 영역 내에서는 샘플링할 수 없습니다. 팔레트 생성은 HSL 색조를 회전합니다: 보색은 +180도, 삼등분색은 +/-120도, 유사색은 +/-30도, 분할 보색은 +150과 +210도입니다. 밝은 톤과 어두운 톤은 색조와 채도를 일정하게 유지하면서 명도를 고정 간격(일반적으로 밝은 톤은 흰색 방향 +10%, 어두운 톤은 검은색 방향 -10%)으로 조절합니다. 대비는 WCAG 2.1 SC 1.4.3/1.4.6을 따릅니다: 각 채널은 sRGB 전달 함수의 구간별 감마 디코딩(0.03928 미만은 선형 구간, 이상은 지수 2.4)을 적용한 뒤, 상대 휘도를 위해 0.2126R + 0.7152G + 0.0722B의 휘도 가중치를 합산하고, 비율은 (L_밝음 + 0.05) / (L_어두움 + 0.05)입니다. 임계값은 AA 일반 텍스트 4.5:1, AA 큰 텍스트 및 UI 구성요소 3:1, AAA 7:1입니다. sRGB는 채널당 8비트 공간이므로, Display P3(Apple) 또는 Rec. 2020를 사용하는 광색역 디스플레이는 동일한 hex 코드를 눈에 띄게 더 채도 높은 원색으로 렌더링할 수 있습니다. 장치 간 색상 중요 작업에는 원시 RGB 삼중값에 의존하지 말고 프로필을 태그하세요.
- IEC 61966-2-1 기준 sRGB 색 공간. 채널당 8비트, 총 16,777,216가지 표현 가능 색상.
- HSL→RGB 변환은 t = L<0.5 ? L(1+S) : L+S-LS를 사용한 뒤 채널별 hue2rgb() 룩업을 적용합니다.
- EyeDropper API는 Chrome/Edge 95 이상과 사용자 제스처가 필요하며, 교차 출처 iframe 표면은 차단됩니다.
- WCAG 대비: sRGB 감마 디코딩, 휘도 가중치 0.2126R + 0.7152G + 0.0722B 적용, (L1+0.05)/(L2+0.05) 계산.
- 보색 = 색조 +180도, 삼등분색 = +/-120도, 유사색 = +/-30도, 분할 보색 = +150/+210도.
- canvas.getImageData는 Uint8ClampedArray RGBA 픽셀을 반환하지만 캔버스가 같은 출처여야 합니다(tainted 이미지 불가).
- Display P3 / Rec. 2020 광색역 모니터는 동일 hex를 더 강한 원색으로 렌더링하므로, 색상 중요 작업에는 프로필을 태그하세요.
예시
브랜드 메인 컬러를 세 가지 형식으로 복사
선택: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
주변 코드 스타일에 맞는 형식을 선택해 복사. 세 값 모두
동일한 sRGB 색상(IEC 61966-2-1, 채널당 8비트)을 표현하며,
페이지는 표준 RGB <-> HSL 변환식으로 상호 변환함.보색 배색 생성
기본: #2563eb (파랑)
보색: #eb7a25 (주황) 색상 +180도
유사색-1: #5a25eb (보라) 색상 +60도
유사색-2: #256beb (하늘) 색상 -30도
3색 조화-1: #25eb56 (초록) 색상 +120도
3색 조화-2: #eb2525 (빨강) 색상 -120도
보색은 강한 대비 강조에, 유사색은 조화로운 배경에,
3색 조화는 생동감 있는 일러스트에 적합. 명도와 채도는
고정한 채 색상(Hue)만 회전함.배포 전 WCAG 명암비 확인
전경: #1f2937 (gray-800, 상대 휘도 0.022)
배경: #ffffff (흰색, 상대 휘도 1.000)
명암비: (1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
일반 텍스트(>= 7:1) 및 큰 텍스트(>= 4.5:1)에 대해 WCAG AAA를
통과하며, UI 컴포넌트 기준 3:1도 충족. 운영 환경에 배포되는
모든 텍스트/배경 조합에 대해 동일한 검사를 실시할 것.
페이지는 sRGB 구간별 전달 함수(감마 디코딩, 가중치
0.2126R + 0.7152G + 0.0722B)로 상대 휘도를 계산함.자주 묻는 질문
어떤 색상 형식을 보여주나요?
HEX(#RRGGBB), RGB(rgb(R, G, B)), HSL(hsl(H, S%, L%))을 보여줍니다. 또한 선택한 색상을 기준으로 보색, 유사색, 삼각 배색, 분할 보색 배색과 틴트(밝은 색상), 셰이드(어두운 색상)도 함께 표시합니다.
HSL과 HSV의 차이는 무엇인가요?
둘 다 색상을 색조(0~360°), 채도, 밝기 비슷한 성분으로 분해합니다. HSL의 세 번째 차원은 명도(Lightness)로, 50%가 가장 채도 높은 색이고 0%는 검정, 100%는 흰색입니다. HSV의 세 번째 차원은 명도(Value)로, 100%가 가장 채도가 높은 색이고 0%는 검정, 흰색은 따로 표현되지 않습니다. 틴트와 셰이드를 직관적으로 만들 때는 HSL이, 화가가 물감을 섞는 방식에 더 가까운 것은 HSV입니다.
색상 변환은 얼마나 정확한가요?
HEX, RGB, HSL은 모두 동일한 sRGB 색상을 표현하는 정확한 수학적 변환입니다. 이 페이지는 표준 공식을 사용해 정밀도 손실 없이 서로 변환합니다.
같은 HEX 색상이 모든 화면에서 똑같이 보이나요?
아니요. sRGB는 웹의 기본 색공간이지만, 색 관리가 적용되지 않은 광색역 디스플레이(P3, Adobe RGB)에서는 같은 HEX 색상이 더 채도 높게 표시될 수 있습니다. 모니터 캘리브레이션 차이도 있죠. 특히 브랜딩 작업에서는 중요한 색상은 반드시 실제 사용 기기에서 확인하세요.
색상 배색은 어떻게 만들어지나요?
채도와 명도를 유지한 채 HSL의 색조 값을 회전시켜 만듭니다. 보색은 +180°, 삼각 배색은 +120°/+240°, 유사색은 ±30°, 분할 보색은 +150°/+210°입니다. 틴트는 명도를 100%(흰색) 쪽으로, 셰이드는 0%(검정) 쪽으로 단계적으로 변경합니다.
이 색상 선택기는 화면용 색상에만 쓸 수 있나요?
이 도구는 sRGB 색공간에서 작동하며, 이는 웹과 대부분의 일반 소비자용 화면에 적합한 모델입니다. CSS와 UI 디자인 작업에서 쓰이는 표준 변환을 사용하므로 안정적입니다.
어떤 데이터든 서버로 업로드되나요?
아니요. 이 페이지는 순수 브라우저 JavaScript로 동작합니다. 색상 값은 저장되지도, 전송되지도 않습니다.