색상 코드 변환기 - HEX·RGB·HSL 색상 코드 즉시 변환

색상 코드 변환기란?

색상 코드 변환기는 웹 개발과 디자인 작업에서 자주 사용하는 HEX, RGB, HSL 색상 코드 형식을 즉시 상호 변환해주는 도구입니다. 색상 피커로 원하는 색을 선택하거나 직접 값을 입력하면 모든 형식이 실시간으로 동기화됩니다.

색상 코드 형식 비교

HEX 코드

#RRGGBB 형식으로 각 색상 채널을 16진수 두 자리로 표현합니다. CSS에서 가장 널리 사용되며 짧고 직관적입니다. #FFF처럼 3자리 축약형도 지원됩니다.

RGB

rgb(R, G, B) 형식으로 각 채널을 0~255 범위의 십진수로 표현합니다. 투명도가 필요할 때는 rgba(R, G, B, A)를 사용하며 알파값은 0.0~1.0입니다.

HSL

hsl(H, S%, L%) 형식으로 색상(Hue), 채도(Saturation), 명도(Lightness)를 표현합니다. 색조를 유지하면서 밝기나 채도만 조절하기 쉬워 디자인 시스템 구축에 유리합니다.

웹 개발에서 색상 코드 활용법

• CSS 변수: --primary: #3b82f6;처럼 변수로 선언하여 일관된 색상 관리
• Tailwind CSS: HEX 코드로 커스텀 색상 팔레트 구성 가능
• Figma·Sketch: HEX 또는 RGB 값으로 디자인 시스템 색상 토큰 정의
• 그라디언트: HSL을 사용하면 자연스러운 색상 전환 효과 구현 용이

자주 쓰는 색상 코드 참고

• 흰색: #FFFFFF / rgb(255,255,255) / hsl(0,0%,100%)
• 검정: #000000 / rgb(0,0,0) / hsl(0,0%,0%)
• 빨강: #FF0000 / rgb(255,0,0) / hsl(0,100%,50%)
• 파랑: #0000FF / rgb(0,0,255) / hsl(240,100%,50%)
• 초록: #00FF00 / rgb(0,255,0) / hsl(120,100%,50%)