🎚️ HEX·RGB·HSL 변환
HEX·RGB·HSL 중 아무 형식이나 입력하면 나머지 두 형식으로 즉시 변환합니다.
사용 방법
- 색상값을 입력합니다. #1a2b3c, rgb(26,43,60), hsl(210,40%,17%) 모두 인식합니다.
- HEX·RGB·HSL 세 형식과 색상 미리보기가 즉시 표시됩니다.
- 필요한 형식 옆의 복사 버튼을 누릅니다.
이럴 때 유용해요
- 디자이너가 준 HEX 코드를 rgba() 투명도 조절용 RGB로 바꿀 때
- CSS의 hsl() 값이 실제 어떤 색인지 확인할 때
- 포토샵(RGB)과 웹(HEX) 사이에서 색 코드를 옮길 때
알아두면 좋은 팁
- #abc처럼 3자리 축약 HEX도 인식합니다(#aabbcc와 동일).
- HSL은 색상(H)·채도(S)·밝기(L) 구조라 '같은 색을 조금 어둡게'처럼 사람 감각대로 조절할 때 가장 편합니다.
- 투명도가 필요하면 변환된 RGB 값에 알파를 붙여 rgba(26, 43, 60, 0.5)처럼 쓰면 됩니다.
자주 묻는 질문
HEX, RGB, HSL의 차이가 뭔가요?
모두 같은 색을 다르게 표기하는 방식입니다. HEX(#1a2b3c)는 16진수 표기로 CSS에서 가장 간결하고, RGB는 빨강·초록·파랑 0~255 값, HSL은 색상 0~360°·채도·밝기 %로 표현해 색 조절이 직관적입니다.
HSL이 개발할 때 왜 편한가요?
hover 시 살짝 어둡게, 비활성화 시 채도 낮게 같은 변형을 L·S 숫자만 바꿔 만들 수 있기 때문입니다. HEX로는 매번 새 색을 뽑아야 하지만 HSL은 hsl(255, 88%, 66%) → hsl(255, 88%, 56%)처럼 규칙적으로 관리됩니다.
rgb(255 255 255) 처럼 쉼표 없는 표기도 되나요?
네. 숫자만 추출해 해석하므로 쉼표 유무와 관계없이 인식합니다. CSS Color Level 4의 공백 구분 표기도 그대로 붙여넣으면 됩니다.
CMYK 변환은 안 되나요?
이 도구는 화면용 색 형식(HEX·RGB·HSL) 전용입니다. 인쇄용 CMYK 변환이 필요하면 'RGB CMYK 변환' 도구를 이용하세요.
입력한 색이 어딘가로 전송되나요?
아니요. 변환은 100% 브라우저 안에서 자바스크립트로 처리되며 서버로는 아무것도 전송되지 않습니다.
