개발자 도구
색상 변환기
HEX, RGB, HSL 형식의 색상 값을 즉시 변환합니다. 색상 코드를 입력하면 세 가지 형식 모두 확인할 수 있습니다.
색상 입력
결과
색상 값이 여기에 표시됩니다.
사용 방법
- HEX(
#1e90ff), RGB(rgb(30,144,255)), HSL(hsl(210,100%,56%)) 중 어떤 형식으로든 색상값을 입력합니다. - 형식이 자동으로 인식되어 세 가지 형식으로 동시에 변환됩니다.
- 변환된 색상이 실시간 미리보기로 표시되며, 각 값을 개별적으로 복사할 수 있습니다.
색상 형식 이해하기
HEX는 빨강, 초록, 파랑 값을 각각 2자리 16진수(00~FF)로 표현합니다. RGB는 동일한 채널을 0~255 사이의 십진수로 표현합니다. HSL(색상·채도·명도)은 색상환에서의 위치(0~360°), 채도와 명도를 백분율로 표현하여 더 직관적입니다. 이 덕분에 기본 색상을 유지하면서 더 밝거나 어둡게, 더 선명하거나 흐리게 변형하기 쉽습니다.
주요 활용
- 디자이너가 전달한 HEX 값을 CSS 변수에 필요한 RGB/HSL로 변환할 때
- 색상(Hue)은 고정하고 명도(Lightness)만 조절해 색상 변형을 만들 때
- 색상 코드가 실제로 어떻게 보이는지 빠르게 미리 확인할 때