색상 형식 안내
화면의 색상은 주로 세 가지 형식으로 표현됩니다. HEX는 #4f46e5처럼 6자리 16진수 코드를 사용합니다. RGB(빨강·초록·파랑)는 0~255 범위의 세 숫자로 표현합니다. HSL(색상·채도·밝기)은 색상환의 각도(0~360°), 채도(0~100%), 밝기(0~100%)로 표현합니다. 세 가지 모두 동일한 색 공간을 나타내며 서로 변환할 수 있습니다.
색상 변환기
HEX 색상 코드를 입력하면 RGB·HSL 값과 색상 미리보기가 즉시 나옵니다.
색상 미리보기
RGB
-
HSL-
HEX 색상-
HEX를 RGB·HSL로 변환하는 법
HEX 색상을 RGB로 바꾸려면 2자리씩 세 쌍으로 나눠 각각 16진수를 10진수(0~255)로 변환합니다. HSL은 그 RGB 값으로 색상·채도·명도를 계산해 구합니다. 예: #4F46E5는 rgb(79, 70, 229), hsl(243, 75%, 59%)로 변환됩니다.
HEX를 RGB·HSL로 변환하는 단계
- # 기호를 떼고 6자리 HEX 코드를 2자리씩 세 쌍으로 나눕니다(#4F46E5라면 4F, 46, E5).
- 각 16진수 쌍을 0~255 사이의 10진수로 바꿔(4F=79, 46=70, E5=229) RGB 값을 구합니다.
- 각 RGB 값을 255로 나눠 0~1 범위로 바꾼 뒤 세 값 중 최댓값·최솟값을 찾습니다.
- 명도는 최댓값과 최솟값의 평균이며, 채도와 색상은 최댓값과 최솟값의 차이를 표준 HSL 공식에 대입해 구합니다.
- 표시를 위해 색상은 정수 도(0~360), 채도·명도는 정수 퍼센트(0~100%)로 반올림합니다.
HEX → RGB → HSL
RGB 채널 = parseInt(16진수 쌍, 16) · 명도 = (R·G·B의 최댓값 + 최솟값) / 2 (0~1로 정규화)
- R, G, B = 빨강·초록·파랑 채널 값, 각각 0~255
- H, S, L = 색상(0~360도), 채도·명도(0~100%)
자주 찾는 색상 변환값
#FF0000은 RGB로 얼마인가요?
#FF0000은 rgb(255, 0, 0)입니다. 빨강 채널이 최댓값이고 초록·파랑은 0인 순수 빨강입니다.
#FFFFFF는 RGB로 얼마인가요?
#FFFFFF는 rgb(255, 255, 255)입니다. 세 채널 모두 최댓값인 순수 흰색입니다.
#000000은 RGB로 얼마인가요?
#000000은 rgb(0, 0, 0)입니다. 세 채널 모두 0인 순수 검정입니다.
rgb(0, 128, 0)은 헥스코드로 얼마인가요?
rgb(0, 128, 0)은 #008000입니다. 10진수 128은 16진수로 80이기 때문입니다(중간 톤 초록).
#FFA500은 RGB로 얼마인가요?
#FFA500은 rgb(255, 165, 0)입니다. 표준 오렌지색입니다.
#00FF00은 RGB로 얼마인가요?
#00FF00은 rgb(0, 255, 0)입니다. 초록 채널만 최댓값인 순수 초록입니다.
#0000FF는 RGB로 얼마인가요?
#0000FF는 rgb(0, 0, 255)입니다. 파랑 채널만 최댓값인 순수 파랑입니다.
rgb(255, 255, 0)은 헥스코드로 얼마인가요?
rgb(255, 255, 0)은 #FFFF00입니다. 빨강과 초록을 최대로 섞은 순수 노랑입니다.
색상 변환 예시
| HEX | RGB | HSL |
|---|---|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
자주 묻는 질문
HEX·RGB·HSL은 어떻게 다른가요?
HEX와 RGB는 색을 빨강·초록·파랑 빛의 양으로 표현하며 표기법만(16진수 대 10진수) 다릅니다. HSL은 같은 색을 색상·채도·명도로 표현해 수작업으로 조정할 때 더 직관적입니다.
흰색은 왜 채도가 0%로 나오나요?
채도는 색이 회색에서 얼마나 떨어져 있는지를 나타냅니다. 흰색·검정·모든 회색조는 빨강·초록·파랑 값이 서로 같으므로 명도와 상관없이 채도는 항상 0%입니다.
#FFF처럼 3자리 HEX 코드도 입력할 수 있나요?
이 도구는 6자리 HEX 형식(#RRGGBB) 기준입니다. #FFF는 각 자리를 두 번씩 반복하는 CSS 축약형(#FFFFFF)이므로 6자리로 풀어서 입력하세요.
빨강·초록·파랑이 모두 다르면 색상(H)은 어떻게 계산되나요?
색상은 세 채널 중 어느 값이 가장 큰지와 나머지 두 채널의 상대적 위치로 계산됩니다. 결과는 360도 색상환의 각도이며 0도는 빨강, 120도는 초록, 240도는 파랑입니다.
이 도구는 웹 표준 6자리 HEX 색상만 변환하며 알파 채널, CSS 색상 이름, HSV·LAB 같은 다른 색 공간은 지원하지 않습니다.
근거·출처: W3C CSS Color Module Level 4
개인정보와 안전성
- 브라우저에서 계산 — 입력한 값은 사용 중인 기기 안에서만 계산됩니다. utilduck 서버로 전송되지 않습니다.
- 암호화된 연결 — 모든 페이지는 HTTPS로 제공되어 통신 구간에서 내용을 읽을 수 없습니다.
- 제3자에게 전달하지 않음 — 입력한 값은 분석·광고 서비스로 넘어가지 않습니다.
- 저장하지 않음 — 계산 결과를 서버에 저장하지 않으며 회원가입도 필요 없습니다.
최종 업데이트: 2026-08-17