색상 변환기

마지막 업데이트: 2026-06-25

한줄 요약

색상 변환기는 HEX, RGB, HSL 색상 코드를 양방향으로 변환하고 실시간 미리보기를 보여주는 무료 도구입니다.

CSS에 바로 붙여넣을 수 있는 코드를 제공하며, 모든 변환은 브라우저에서 실행됩니다.

색상 코드 입력

색상 입력 — HEX(#RRGGBB), RGB(r,g,b), HSL(h,s%,l%) 중 한 형식의 값을 입력하거나 색상 선택기를 사용합니다.
변환 실행 — 해당 형식의 변환 버튼을 누르면 나머지 형식이 자동으로 채워집니다.
미리보기·복사 — 색상 미리보기로 결과를 확인하고, 원하는 형식의 값을 선택해 복사합니다.

웹과 디자인에서 같은 색을 여러 방식으로 표기합니다. 상황에 맞는 형식을 알아 두면 작업이 빨라집니다.

HEX와 RGB는 단순 진법 차이로, 각 채널을 16진수(00~FF)와 10진수(0~255)로 표현합니다. 16진수 변환 자체가 궁금하다면 진법 변환기를, 색상 코드를 JSON에 담아 관리한다면 JSON 포맷터를 함께 사용하세요.

HEX와 RGB는 무엇이 다른가요?

둘 다 같은 색을 다르게 표기한 것입니다. HEX는 #RRGGBB처럼 16진수로, RGB는 rgb(255,0,0)처럼 10진수 0~255로 빨강·초록·파랑 채널을 나타냅니다. 예를 들어 #FF0000과 rgb(255,0,0)은 같은 빨강입니다.

HSL은 어떤 색 모델인가요?

HSL은 색상(Hue 0~360°), 채도(Saturation 0~100%), 명도(Lightness 0~100%)로 색을 표현하는 모델입니다. 색조를 유지하면서 밝기나 채도를 조절하기 쉬워 디자인 작업에 직관적입니다.

3자리 HEX 코드도 변환되나요?

예. #abc 같은 3자리 단축 HEX는 #aabbcc로 확장해 변환합니다. # 기호는 있어도 없어도 인식합니다.

변환이 서버에서 이루어지나요?

아니요. 모든 색상 변환은 브라우저의 자바스크립트로 계산되며 입력값은 서버로 전송되지 않습니다.