색상 변환기

HEX·RGB·HSL 색상값을 서로 변환하고 컬러피커로 고릅니다.

HEX RGB HSL

디자이너에게 받은 시안에는 #1A56DB라고 적혀 있는데, 정작 코드에서는 rgba()로 투명도를 넣어야 할 때가 있습니다. 반대로 CSS 변수는 HSL로 관리하는데 색상 코드는 HEX로만 들어오기도 합니다.

이 도구는 HEX·RGB·HSL 세 형식을 한 화면에 두고, 어느 칸을 고치든 나머지가 즉시 따라오게 만든 변환기입니다. 컬러피커로 눈으로 고르는 것도 됩니다.

어떻게 계산되나요

쓰는 방법

위쪽 색상 선택 피커로 색을 고르거나, HEX·RGB·HSL 칸 중 아무 데나 값을 직접 입력하면 됩니다. 입력한 칸을 기준으로 나머지 두 형식이 다시 계산되고, 미리보기 사각형 색도 함께 바뀝니다. 각 줄의 복사 버튼을 누르면 그 형식의 값이 클립보드로 들어갑니다.

입력 형식

형식	예시	허용 범위
HEX	`#1a56db`, `#1ad` (3자리 축약 가능)	0–9, a–f
RGB	`rgb(26, 86, 219)`	각 채널 0–255
HSL	`hsl(220, 79%, 48%)`	H 0–360, S·L 0–100%

숫자 세 개만 알아보면 되므로 괄호나 rgb 접두어가 조금 달라도 인식합니다. 다만 RGB 값이 255를 넘거나 HEX 자릿수가 맞지 않으면 아래에 오류 안내가 뜨고 변환은 멈춥니다.

세 형식은 어떻게 다른가

HEX와 RGB는 사실상 같은 값을 16진수와 10진수로 표기한 차이입니다. HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 나눠 표현하기 때문에, "같은 색인데 조금 더 밝게" 같은 조정이 훨씬 직관적입니다. 다크 모드 대응이나 호버 색을 만들 때 HSL의 L값만 조절하는 방식이 자주 쓰입니다.

변환 과정에서 소수점이 반올림되므로, HSL로 바꿨다가 다시 HEX로 되돌리면 원래 값과 1~2 정도 차이가 날 수 있습니다. 브랜드 색처럼 정확한 값이 중요한 경우에는 원본 HEX를 기준값으로 보관해 두는 편이 안전합니다.

용어 정리

HEX: 색을 16진수 여섯 자리로 적는 표기법. `#RRGGBB` 순서로 빨강·초록·파랑 값을 담습니다.
RGB: 빨강·초록·파랑을 각각 0~255로 적는 표기법. CSS에서 `rgba()`로 투명도를 붙이기 좋습니다.
HSL: 색상(0~360°)·채도(%)·명도(%)로 색을 나누는 표기법. 밝기나 채도만 따로 조절하기 편합니다.
색상(Hue): 색상환에서의 각도. 0°는 빨강, 120°는 초록, 240°는 파랑 부근입니다.
채도(Saturation): 색의 선명한 정도. 0%면 회색, 100%면 가장 진한 색이 됩니다.
명도(Lightness): 색의 밝기. 0%는 검정, 50%가 순색, 100%는 흰색입니다.

자주 묻는 질문

HEX를 3자리로 써도 되나요?

됩니다. `#1ad`처럼 세 자리로 쓰면 각 자리를 두 번 반복한 `#11aadd`와 같은 색으로 처리됩니다. 다만 표현할 수 있는 색이 4,096가지로 줄어들기 때문에, 정확한 브랜드 색은 여섯 자리로 적는 편이 안전합니다.

HSL로 바꿨다가 다시 HEX로 돌리면 값이 조금 달라져요

변환 과정에서 소수점이 반올림되기 때문입니다. 눈으로는 구분되지 않는 수준이지만, 값이 정확히 일치해야 한다면 원본 HEX를 기준으로 삼고 HSL은 참고용으로 쓰는 것을 권합니다.

투명도(알파)도 변환되나요?

이 도구는 불투명한 색상값만 다룹니다. 투명도가 필요하면 변환된 RGB 값을 가져다 `rgba(26, 86, 219, 0.5)` 형태로 네 번째 값을 직접 붙이면 됩니다.

입력한 색상값이 서버로 전송되나요?

아니요. 모든 변환은 브라우저 안에서 자바스크립트로 처리되며, 입력한 값은 어디에도 저장되거나 전송되지 않습니다.

CSS 변수로 색을 관리할 때 어떤 형식이 좋나요?

정답은 없지만, 호버·활성 상태처럼 같은 색의 밝기만 바꾸는 변형이 많다면 HSL이 관리하기 편합니다. 반대로 디자인 시안과 값을 그대로 맞춰야 하는 상황에서는 HEX가 대조하기 쉽습니다.