색상 변환기
HEX, RGB, HSL 색상 코드를 상호 변환합니다.
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
무엇을 계산해 주나요
HEX·RGB·HSL 세 형식을 서로 바꿔 주는 도구다. 한 형식으로 색을 넣으면 나머지 두 형식이 곧바로 환산되고, 위쪽 미리보기 박스에 실제 색이 떠서 눈으로 확인할 수 있다. 각 코드 옆 복사 버튼을 누르면 클립보드로 바로 들어가니, CSS를 짜거나 디자인 가이드 문서에 색값을 옮길 때 손이 덜 간다.
변환식은 W3C CSS Color Module Level 3의 알고리즘을 그대로 쓴다.HEX는 #RRGGBB 6자리 16진수, RGB는 빨강·초록·파랑을 각각 0~255 세기로,HSL은 색상(Hue 0~360°)·채도(Saturation 0~100%)·명도(Lightness 0~100%)로 적은 표기다. 셋 다 같은 sRGB 색을 다르게 표기한 것뿐이라 변환은 일정하게 떨어지지만, HSL은 0~100% 정수로 반올림하는 탓에 왕복 변환에서 1 안팎의 미세한 차이가 날 수 있는 참고용 환산값이다.
입력값 설명
- 입력 형식HEX / RGB / HSL 중 선택. 한 형식 입력 시 나머지 두 형식이 자동 환산.
- HEX 코드#RRGGBB 6자리 16진수. 대소문자 모두 인식하며 # 기호는 생략 가능.
- RGB(0~255)R·G·B 각각 0에서 255 사이 정수. 범위를 벗어나면 0~255로 잘린다(클리핑).
- HSL(H 0~360, S/L 0~100)색상(°)·채도(%)·명도(%). S=0이면 색상값과 무관하게 회색.
산식 풀이
· HEX → RGB: 16진수 두 자리(RR·GG·BB)씩 분리해 각각 10진수(0~255)로 변환
· RGB → HEX: 각 채널을 16진수 두 자리로 0 패딩 후 #으로 연결
· RGB → HSL: L = (max + min) / 2, 채도 S는 L이 0.5 초과면 d/(2−max−min) 아니면 d/(max+min), 색상 H는 최대 채널 기준 계산(d = max − min)
· HSL → RGB: q = L<0.5 ? L(1+S) : L+S−L·S, p = 2L−q 를 두고 hue2rgb 보간 함수로 채널별 0~255 환산
기준은 W3C CSS Color Module Level 3 변환식입니다. HSL 값은 정수 %로 반올림하고, CMYK·LAB 같은 인쇄용 색공간은 다루지 않습니다.
이런 경우라면
브랜드 컬러 HEX → RGB·HSL
모두계산 브랜드 파랑 #3B82F6을 입력하면 16진수 3B·82·F6이 각각 10진수 59·130·246으로 풀립니다.
여기서 max=246, min=59이므로 명도 L=(246+59)/2÷255 ≈ 60%, 채도 S ≈ 91%, 색상 H ≈ 217°.
결과: RGB(59, 130, 246) = HSL(217, 91%, 60%).
순수 빨강과 흰색
빨강 #FF0000 → RGB(255, 0, 0) → HSL(0, 100%, 50%): 한 채널만 최대값이라 채도 100%, 명도 50%.
흰색 #FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%): 세 채널이 같아 채도 0%, 명도 100%.
HSL → RGB·HEX (역방향)
입력 형식을 HSL로 바꾸고 HSL(120, 100%, 50%)을 넣으면 색상 120°는 순수 초록입니다.
q=1·(1+1)이 아닌 L+S−L·S=1로 계산되어 RGB(0, 255, 0), HEX #00FF00이 됩니다.
결과를 읽는 법
세 카드 중 어느 값을 집어 들지는 색을 어디에 붙여 넣느냐로 갈린다. 스타일시트에 짧게 박을 거면 HEX, 나중에 투명도를 얹을 여지가 있으면 채널이 따로 떨어진 RGB, 명도·채도를 손으로 조금씩 밀어 볼 작정이면 HSL 쪽이 다루기 편하다. 셋 다 같은 색을 표기만 바꿔 적어 둔 것이라, 목적에 맞는 카드의 코드만 그대로 읽어 쓰면 된다.
값을 신뢰하기 전에 위쪽 색 박스를 한 번 보고 가자. 머릿속에 그려 둔 색과 박스가 어긋난다면 대개 입력 칸에 숫자를 잘못 넣은 것이라, 코드를 의심하기보다 박스를 기준으로 되짚는 편이 빠르다. 카드 속 코드는 고정폭 글꼴로 떠서 0과 O, 1과 l이 섞이지 않는다.
카드 오른쪽 복사 버튼을 누르면 그 코드가 클립보드로 넘어가고 버튼이 잠깐 체크 표시로 바뀐다. 다만 HSL은 채도·명도를 정수 %로 반올림해 담는 구조라, 끝자리 1쯤 차이는 같은 색으로 봐도 무방한 참고용 환산값이다. 픽셀 단위로 정밀하게 맞춰야 하는 상황이라면 반올림이 끼지 않는 HEX나 RGB를 원본으로 잡고 가자.
디자인에 쓸 색이라면 고르고 끝이 아니라 글자색과 배경색의 대비도 함께 봐야 한다. 웹 접근성 지침(WCAG)은 본문 글자에 4.5:1, 큰 글자(약 18pt 이상)에 3:1 이상의 명도 대비를 권한다. 이 도구가 대비 수치를 직접 재 주지는 않지만, 두 색의 HSL 명도(L) 차이가 클수록 대비가 커진다고 보면 가늠이 된다. 예컨대 L 60%대 파랑(#3B82F6)과 흰색은 대비가 약 3.7:1이라 큰 제목엔 무난하지만 작은 본문엔 빠듯하고, 같은 파랑 위 옅은 회색은 대비가 많이 모자라다. 통과 여부를 엄밀히 따져야 하면 대비 검사 도구로 한 번 더 확인하자.
자주 틀리는 케이스
- HEX 3자리 단축 표기(#F00)를 그대로 입력 — 이 도구는 6자리 풀 표기만 인식하므로 #FF0000처럼 적어야 한다.
- RGB 값에 소수점이나 % 기호를 입력 — RGB는 0~255 정수만 받으며, 소수·퍼센트는 의도와 다른 색이 된다.
- HSL의 H를 0~100으로 착각 — 색상(H)은 0~360° 각도이고, 채도·명도(S·L)만 0~100%다.
- rgb(255, 0, 0) 전체 문자열을 RGB 칸에 붙여넣기 — R·G·B 칸에 숫자만 따로 입력해야 한다.
결과가 실제와 달라지는 경우
- CMYK·Pantone로 지정된 인쇄용 색을 그대로 입력 — 이 도구는 화면용 sRGB만 환산하므로 실제 인쇄 색과 다를 수 있습니다.
- RGB↔HSL을 여러 번 왕복 변환 — HSL을 정수 %로 반올림하는 과정에서 채널값이 1 안팎으로 미세하게 달라질 수 있습니다.
- 모니터·스마트폰 화면 캘리브레이션이 제각각이라, 같은 코드라도 기기마다 눈에 보이는 색감은 달라질 수 있습니다.
- P3·Rec.2020 같은 광색역(wide gamut) 색을 sRGB 6자리 HEX로 표현하면 일부 채도가 표현 범위 밖이라 근사치가 됩니다.
알아둘 예외
- HEX 3자리 단축 표기(예: #F00)는 인식하지 않으니, 6자리 풀 표기로 입력하자.
- sRGB 색공간만 지원한다. CMYK·LAB·Pantone 같은 인쇄·전문 색공간은 별도 도구를 써야 한다.
- RGB 값이 0~255 범위를 벗어나면 자동으로 잘려(클리핑) 색상이 달라진다.
- 같은 회색이라도 HSL 색상값은 여러 개로 나올 수 있어(예: H=0과 H=360이 같은 색), 색상값만으로 비교할 때는 주의하자.
- HSL 값은 정수 %로 반올림되므로, 원본 RGB로 다시 변환하면 1 정도 차이가 날 수 있는 참고용 환산값이다.
자주 받는 질문
HEX와 RGB는 어떻게 다른가요?⌄
같은 색을 표기법만 달리한 것이다. HEX는 16진수 6자리(#RRGGBB)로, RGB는 10진수 0~255 세 값으로 적을 뿐이고, 컴퓨터 안에서는 똑같은 색으로 저장된다.
CSS에서 어떤 형식을 써야 하나요?⌄
셋 다 된다. HEX는 짧아서 가장 많이 쓰이고, 투명도를 얹을 땐 rgba가 편하며, 명도·채도를 슬슬 조절해 보고 싶을 땐 HSL이 직관적이다.
RGBA·HSLA의 알파값은?⌄
이 계산기는 RGB·HSL만 다루므로 알파값(투명도)은 지원하지 않는다. 알파값이 필요하다면 HEX 8자리(#RRGGBBAA)나 rgba(r,g,b,a) 형식으로 직접 적으면 된다.
색상 코드를 한 번에 복사할 수 있나요?⌄
결과 영역에서 각 형식 옆 "복사" 버튼을 누르면 그 값이 바로 클립보드로 들어간다. 복사되면 잠깐 체크 아이콘이 떴다가 사라진다.
RGB와 HSL을 왕복하면 값이 살짝 바뀌는 이유는?⌄
HSL은 채도·명도를 0~100% 정수로 반올림해 담기 때문이다. RGB→HSL→RGB로 되돌리면 그 반올림 오차가 남아 채널값이 1 정도 어긋날 수 있다. 정밀한 색이 필요할 땐 HEX나 RGB 원본 값을 기준으로 잡는 편이 안전하다.
화면에서 본 색이 인쇄물과 다른데 왜 그런가요?⌄
이 도구는 화면용 sRGB 색공간을 기준으로 환산한다. 인쇄는 잉크 기반의 CMYK 색공간을 쓰기 때문에 표현 범위가 달라, 같은 코드라도 인쇄 결과는 다르게 보일 수 있다. 인쇄가 목적이라면 CMYK·Pantone 전용 도구로 다시 확인하자.
요율 마지막 업데이트 · 2026-06-03
콘텐츠 마지막 검토 · 2026-06-04
참고 자료 · W3C CSS Color Module Level 4, sRGB 색공간 (IEC 61966-2-1)
결과는 공개 기준으로 계산한 참고용 추정치이며 법적·세무적 효력이 없습니다. 면책 조항 · 오류 제보 yuseong2099@gmail.com