사용 방법
- 색상 코드 입력
변환할 색상 코드를 HEX, RGB, HSL 또는 CMYK 형식으로 입력합니다.
- 변환 실행
변환하기 버튼을 클릭하면 모든 색상 형식으로 동시에 변환됩니다.
- 결과 복사
변환된 색상 코드를 클릭하여 클립보드에 복사하고 미리보기로 색상을 확인합니다.
색상 코드 변환이란?
색상 코드 변환은 동일한 색을 HEX·RGB·HSL 등 서로 다른 표기 체계로 바꾸는 작업입니다. 모니터 화면은 빛의 삼원색인 빨강·초록·파랑을 섞어 색을 만들기 때문에, 모든 색은 결국 RGB 세 채널의 강도로 환원됩니다. HEX는 이 RGB 값을 16진수 6자리(#RRGGBB)로 압축한 표기이고, HSL은 사람이 인지하는 방식대로 색상환 각도·채도·명도로 재구성한 표기입니다.
왜 변환이 필요한가
- CSS 작성 — 디자인 시안의 HEX 코드를 받아 투명도 조절이 쉬운 RGB로 바꿔 씁니다.
- 색 보정 — 명도만 살짝 낮추고 싶을 때 HSL로 변환하면 L 값 하나만 조절하면 됩니다.
- 협업 — 디자이너의 Figma HEX와 개발자의 RGB 변수, 인쇄팀의 색상 기준을 일치시킵니다.
이 변환기는 어떤 형식으로 입력해도 나머지 형식을 한 번에 계산하고 실제 색을 미리보기로 보여줍니다.
계산 공식
HEX → RGB는 16진수 두 자리씩 끊어 10진수로 풉니다.
R = parseInt(hex[0:2], 16), G·B도 동일하게 계산합니다. 예: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).
RGB → HSL은 채널을 0~1로 정규화한 뒤 명도부터 구합니다.
L = (max + min) / 2S = delta / (2 − max − min) (L > 0.5일 때)
여기서 delta = max − min입니다. 위 예시는 max=1, min=0.2 → L = 0.6 (60%), S = 0.8/0.8 = 100%, 색상각 H ≈ 11°가 되어 HSL(11°, 100%, 60%)로 변환됩니다.
자주 묻는 질문
HEX와 RGB의 차이는 무엇인가요?
HEX는 16진수로 색상을 표현하고(#FF5733), RGB는 빨강·초록·파랑 값을 0-255 범위의 10진수로 표현합니다(255, 87, 51). 같은 색상을 다르게 표기하는 방식입니다.
HEX 코드를 RGB로 어떻게 변환하나요?
#RRGGBB에서 두 자리씩 끊어 16진수를 10진수로 바꾸면 됩니다. 예를 들어 #FF5733은 FF=255, 57=87, 33=51이므로 RGB(255, 87, 51)이 됩니다. 각 자리는 00(0)부터 FF(255)까지의 채널 강도를 나타냅니다.
CMYK는 어떤 경우에 사용하나요?
CMYK는 청록·자홍·노랑·검정 잉크를 섞는 인쇄용 색상 모델입니다. 웹과 화면에서는 빛을 더하는 RGB/HEX를 쓰고, 인쇄물 제작 시에는 잉크를 겹치는 CMYK로 변환하여 사용합니다. 두 방식의 색 영역이 달라 화면 색이 인쇄에서 약간 다르게 보일 수 있습니다.
HSL 색상 모델의 장점은 무엇인가요?
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 구성되어 직관적으로 색상을 조절할 수 있습니다. 예컨대 명도(L) 값만 낮추면 색조는 유지한 채 어두운 변형 색을 쉽게 만들 수 있어 호버 효과나 색 팔레트 제작에 편리합니다.
HSL에서 색상(H), 채도(S), 명도(L)는 각각 무엇을 의미하나요?
색상(H)은 0~360도의 색상환 각도로 0°는 빨강, 120°는 초록, 240°는 파랑입니다. 채도(S)는 0~100%의 색 선명도로 0%면 회색, 100%면 가장 또렷한 색입니다. 명도(L)는 0~100%의 밝기로 0%는 검정, 100%는 흰색, 50%가 가장 순수한 색입니다.
흰색과 검은색은 어떻게 표기되나요?
흰색은 모든 채널이 최대인 #FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%)이고, 검은색은 모든 채널이 0인 #000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%)입니다. 회색 계열은 채도(S)가 0%이고 명도(L)만 달라집니다.
RGB 값이 0~255 범위를 벗어나면 어떻게 되나요?
각 채널은 0 미만이면 0으로, 255를 초과하면 255로 자동 보정(clamp)된 뒤 HEX로 변환됩니다. 예를 들어 RGB(300, -10, 128)은 RGB(255, 0, 128)로 처리되어 #FF0080이 됩니다.
변환 결과를 바로 복사할 수 있나요?
네. 변환된 HEX·RGB·HSL 코드를 클릭하면 클립보드에 복사되며, 색상 미리보기로 실제 색을 눈으로 확인할 수 있어 CSS나 디자인 도구에 바로 붙여넣을 수 있습니다.
2026년 최신 디바이스 대응