서버전송 없음 · 브라우저 처리

색상 코드 변환

HEX·RGB·HSL을 상호 변환하고 색을 미리 보여줘요.

즐겨찾기하면 홈에서 바로 찾을 수 있어요

이럴 때 쓰세요

#1B64DA → rgb(27, 100, 218), hsl(219, 79%, 48%)

디자이너가 준 RGB 값을 CSS용 HEX로

브랜드 색의 HSL을 알아 밝기만 조절한 변형 만들기

이렇게 사용하세요

11단계값을 입력하세요

22단계값을 바꾸면 결과가 바로 갱신돼요

33단계결과를 저장하거나 복사할 수 있어요

결과가 예상과 다를 때

결과가 예상과 달라요

단위와 기준을 먼저 확인해 주세요. 값을 바꾸면 결과가 바로 갱신돼요.

처음 값으로 되돌리고 싶어요

초기화를 누르면 처음 상태로 돌아가요.

자주 하는 실수

8자리 HEX의 알파는 0~255라 '투명도 80%'의 숫자가 아닙니다. #RRGGBB80은 알파 128로 약 50%입니다. rgba의 네 번째 값(0~1)에는 0.5를 넣어야 해요.
HSL 범위를 벗어나면 색이 무시됩니다. 색조(H)는 0~360도, 채도·명도(S·L)는 0~100입니다. 360도나 120%를 넣으면 화면에 아무 변화가 없습니다.
HEX에서 #을 빼먹으면 색 코드로 인식되지 않습니다. 복사·붙여넣기에서 앞의 #이 잘려 나가는 경우가 많습니다.
명도 대비를 셀 때 HSL의 밝기(L)를 그대로 쓰면 결과가 틀립니다. 대비는 채도를 없앤 상대 휘도로 계산하기 때문에, sRGB 50% 회색(#808080)의 실제 상대 휘도는 약 0.216입니다.

계산 근거

HEX는 CSS Color에서 #RRGGBB(각 8비트) 또는 알파를 붙인 #RRGGBBAA입니다. RGB는 0~255의 정수 세 개, HSL은 색조 0~360도(0° 빨강, 120° 초록, 240° 파랑)와 채도·명도 0~100%로 정의됩니다. WCAG 2.2의 명도 대비는 sRGB 상대 휘도(0.2126R + 0.7152G + 0.0722B, 채널을 0~1로 정규화)로 계산합니다.

실제로 계산해 보면

#FF6600을 RGB와 HSL로 바꾸면?

16진수를 자리별로 나누면 255, 102, 0이므로 rgb(255, 102, 0). 가장 큰 값과 가장 작은 값의 차이가 전체 범위와 같아 채도 100%, 명도는 (255 + 0) ÷ 2 ÷ 255 = 50%. 색조는 빨강이 기준이라 24°가 되어 hsl(24, 100%, 50%)입니다.

#1B64DA80의 알파는 얼마인가요?

마지막 두 자리가 0x80 = 128이라 128 ÷ 255 ≈ 0.502, 다시 말해 약 50%입니다. rgb(27, 100, 218, 0.5)와 같은 값이고 앞 여섯 자리도 27·100·218로 그대로 읽힙니다.

흰 배경 위 본문 색 대비는?

흰색의 상대 휘도는 1.0, 검은색은 0.0이라 (1.0 + 0.05) ÷ (0 + 0.05) = 21:1입니다. #1B64DA는 상대 휘도 약 0.144라 흰색 대비 약 5.4:1로 나옵니다. WCAG 2.2 기준 일반 텍스트 AA는 4.5:1, AAA는 7:1입니다.

더 궁금한 것

브랜드 색을 단계별로 만들려면요?

색조(H)를 하나로 고정하고 명도·채도만 단계적으로 나눠 50·100·500·900처럼 이름 붙입니다. 같은 이름 체계로 밝은 배경용과 어두운 배경용을 한 쌍씩 준비하면 화면 전환이 자연스럽습니다.

화면마다 같은 색이 다르게 보일까요?

대체로 비슷하지만, 넓은 색역을 가진 화면과 일반 화면은 채도 높은 색에서 차이가 납니다. 그래서 빛으로 인쇄한 결과와 화면의 색은 숫자가 달라도 같은 이름으로 부르기도 합니다.

인쇄용 수치를 알 수 있나요?

HEX는 RGB라 CMYK로 옮기면 밝기가 크게 달라집니다. 형광펜처럼 넓은 영역을 차지하는 색은 특히 그렇습니다. 인쇄까지 고려한다면 RGB 값을 CMYK로 옮긴 값도 같이 보관하는 편이 안전합니다.

알아둘 경계값

8자리 HEX·투명도 입력은 인식되지 않아 이전 결과가 그대로 남으니 확인해요.
색 이름이나 rgb() 함수 표기는 입력으로 받지 않으니 HEX로 바꿔요.
잘못 입력해도 오류 없이 이전 색이 남아 착각하기 쉬우니 색을 봐요.
복사는 HEX·RGB·HSL 따로라 세 값을 한 번에 가져올 수 없으니 나눠야 해요.
HSL 값은 정수로 반올림돼 미세한 차이가 잘리니 감안해야 해요.
3자리 축약은 6자리로 펼쳐져 복사값이 길게 나오니 확인해야 해요.

결과를 믿기 전 확인 목록

투명도가 필요하다면 알파 값을 따로 메모해야 해요.
입력 후 미리보기 색이 바뀌었는지 눈으로 꼭 확인해요.
복사한 뒤 붙여넣어 값이 들어갔는지 꼭 확인해요.
red 같은 색 이름은 HEX 코드로 고쳐 넣어야 해요.
HSL을 옮길 때는 기호를 떼야 하는지 미리 확인해요.
어두운 배경용이라면 배경 위에서 직접 대조해야 해요.
브랜드 색이라면 변환값을 팔레트에 함께 적어 둬야 해요.
3자리로 넣었다면 복사값이 6자리로 바뀌는지 꼭 확인해요.
같은 색을 두 번 변환해 값이 같은지 꼭 확인해요.

자주 묻는 질문

투명도도 되나요?

네. 8자리 HEX와 rgba의 알파값을 함께 변환합니다.

8자리 HEX는 뭔가요?

끝 두 자리가 투명도(알파)이에요. #RRGGBBAA 형식으로, FF면 불투명, 00이면 완전 투명이에요.