색상 변환기 (HEX, RGB, HSL — 즉시)

헥스 코드, RGB 트리플렛, HSL 값 입력 — 다른 형식이 보이는 미리보기 견본과 함께 즉시 업데이트. 디자이너, 웹 개발자, 도구 간 색상 일치하려는 모든 사람에게 유용.

HEX

RGB

HSL

hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)

작동 방식

같은 색상을 묘사하는 세 가지 방법

HEX, RGB, HSL은 sRGB 색상의 세 표기법. HEX는 RGB의 약어: #FF6B35는 빨강=255, 녹색=107, 파랑=53. RGB는 빨강, 녹색, 파랑 빛을 얼마나 섞을지로 색상 묘사(각 0-255). HSL은 같은 RGB 색상을 색조(어떤 색상), 채도(얼마나 선명), 밝기(얼마나 밝은) 측면에서 재인코딩.

셋 다 등가 — 손실 없이 왕복 가능. 디자이너는 톤 조정에 HSL 선호(밝기 올려도 색조 안정), 개발자는 보통 디자인 도구의 HEX를 CSS에 직접 붙여넣기. RGB는 이미지 처리나 캔버스 API 작업에서 가장 자주 등장.

각각 사용처

HEX: 디자인에서 복사 붙여넣기, Figma 내보내기, 브랜드 가이드라인, CSS 색상 리터럴. 간결하지만 읽기 불투명.

RGB: 프로그래밍 색상 작업(캔버스, 이미지 조작), 접근성 검사(대비 계산은 선형 RGB에서 작동), 정확한 정수 값 다이얼링하고 싶을 때.

HSL: 느낌으로 색상 조정 — '약간 더 채도 있는 버전', '호버 상태용 더 어두운 변형', 또는 색조 단계로 팔레트 생성. 그 작업에 HEX보다 훨씬 추론하기 쉬움.

본 도구에서 보지 못하는 것

지금은 알파 채널(투명도) 생략 — 그러나 #RRGGBBAA는 모든 현대 브라우저에서 작동, 불투명도용 두 헥스 자릿수 추가하면(00 = 투명, FF = 불투명).

또한 더 넓은 색역(P3, Rec.2020, OKLCH) 다루지 않음. 대부분 웹 작업에는 sRGB 기반 HEX/RGB/HSL이 올바른 선택. HDR이나 광색역 디스플레이 타겟이면 CSS Color Module Level 4 구문 조사.

자주 묻는 질문

›HSL에서 HEX로 정밀도 손실 없이 왕복 가능?

대부분. HSL은 정수 도수와 퍼센트로 저장, 그래서 360 × 101 × 101 = 370만 HSL 값이 1670만 RGB 조합에 매핑. 모서리에서 작은 반올림 발생 가능. 정확 저장에 HEX를 표준으로 사용.

›3자리 HEX 코드 지원?

네. #f60은 #ff6600으로 처리. 둘 다 같은 RGB 트리플렛으로 확장.

›왜 HSL은 채도/밝기에서 360까지 안 가나?

색조는 도수(색상 휠 주위 0-360). 채도와 밝기는 퍼센트(0-100).

›HSL과 HSB 또는 HSV 같음?

아니오. HSV(와 HSB)는 '밝기'를 다른 밝기 모델인 '값'으로 대체. HSL의 L=50%는 풀 컬러; HSV의 V=100%는 풀 컬러. CSS와 일치하기 때문에 HSL 사용.

›투명도 지원?

아직. 지금은 HEX에 두 자리 알파 추가(예: 50% 검정에 #00000080).

›왜 RGB가 0-1 부동소수점 표시 안 함?

대부분 컨텍스트(CSS, 디자인 도구)는 0-255 정수 사용. 셰이더 작업이면 255로 나눠 0-1 부동소수점 도출.

›디자이너는 올바른 색상 어디서 얻나?

브랜드 가이드라인, 디자인 토큰, 또는 팔레트 생성기. 본 contrast checker 도구가 전경/배경 쌍이 WCAG AA/AAA 충족하는지 검증 가능.

›계산기 정확?

네. 표준 sRGB 변환 수학 사용. 왕복 차이는 HSL이 정수 양자화된 것에서만 발생.