색상 코드 변환기

HEX · RGB · HSL을 실시간 양방향 변환하는 무료 컬러 피커. CSS에 바로 붙여넣을 수 있는 형식으로 즉시 복사하세요.

HEX · RGB · HSL을 양방향 실시간 변환합니다. 색상 피커로 직접 색을 골라도 됩니다.

색상 피커

아래 칸을 직접 수정해도 다른 값들이 자동으로 동기화됩니다.

HEX

RGB

HSL

h°

HEX (#RRGGBB): 16진수 6자리로 RGB 각 채널(0~255)을 표현. CSS·디자인 툴에서 가장 흔히 쓰이며 짧고 카피하기 좋습니다.
RGB (Red·Green·Blue): 빛의 삼원색 각 채널을 0~255로 표현. 알파 채널을 더한 rgba()로 투명도를 함께 지정할 수 있습니다.
HSL (Hue·Saturation·Lightness): 색상(0~360°)·채도(%)·명도(%)로 표현해 색을 직관적으로 조정할 수 있습니다. 명도만 조절해 다크모드 색상 변형을 만들 때 유용합니다.

자주 묻는 질문

HEX, RGB, HSL은 어떻게 다른가요?

HEX는 16진수 6자리(#RRGGBB)로 색을 표현해 짧고 CSS에서 가장 흔히 쓰입니다. RGB는 빛의 삼원색을 0~255로 표현하며 투명도가 필요하면 rgba()로 확장합니다. HSL은 색상(0~360°)·채도·명도로 표현해 색을 직관적으로 조정할 수 있습니다.

색상 코드를 어떻게 입력하나요?

세 가지 방법이 있습니다. (1) 색상 피커로 직접 색을 선택, (2) HEX 칸에 "#FF5733" 또는 "FF5733" 입력, (3) RGB 또는 HSL 각 채널 숫자를 직접 입력. 어느 칸을 수정해도 다른 값들이 자동으로 동기화됩니다.

3자리 짧은 HEX(#F00)도 지원하나요?

네. CSS 표준에 따라 #F00 같은 3자리 HEX도 #FF0000으로 자동 확장 처리됩니다. 입력 후 결과는 6자리 표준 형식으로 표시됩니다.

CSS에 바로 붙여넣기 좋은 형식은 무엇인가요?

각 색상 칸 옆 복사 버튼을 누르면 "rgb(234, 88, 12)" 또는 "hsl(20, 90%, 48%)"처럼 CSS에 그대로 사용할 수 있는 형태로 클립보드에 복사됩니다.

다크모드 색상 변형을 만들 때 유용한가요?

네. HSL의 L(명도) 값만 조정하면 동일한 색상의 어두운 변형을 쉽게 만들 수 있습니다. 예를 들어 hsl(20, 90%, 48%) → hsl(20, 90%, 30%)로 명도만 낮추면 같은 톤의 다크 버전이 됩니다.

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

아니요. 모든 변환은 브라우저에서 즉시 계산되며 외부 서버로 데이터가 전송되거나 저장되지 않습니다.

불러오는 중…