색상 변환기
HEX, RGB, HSL 색상 코드를 실시간으로 변환하세요.
색상 선택
색상 선택기를 클릭하거나 아래에서 값을 직접 입력하세요
HEX
RGB
HSL
색상 변형
밝기 변형
채도 변형
조화 색상
다른 유틸리티
색상 변환기란?
색상 변환기는 다양한 색상 표기법(HEX, RGB, HSL) 간의 변환을 실시간으로 수행하는 도구입니다. 웹 개발, 그래픽 디자인, UI/UX 작업에서 필수적으로 사용됩니다.
색상 표기법 비교
| 표기법 | 형식 | 특징 |
|---|---|---|
| HEX | #RRGGBB | 웹에서 가장 많이 사용, 16진수 |
| RGB | rgb(R, G, B) | 빨강, 초록, 파랑 0-255 |
| HSL | hsl(H, S%, L%) | 색상, 채도, 명도로 직관적 |
HEX 색상 코드
HEX(헥사데시멀) 색상은 #으로 시작하며 6자리 16진수로 표현됩니다. 앞의 2자리는 빨강(R), 중간 2자리는 초록(G), 마지막 2자리는 파랑(B)을 나타냅니다. 예를 들어 #FF0000은 순수한 빨강색입니다.
RGB 색상
RGB는 빛의 3원색인 빨강(Red), 초록(Green), 파랑(Blue)의 조합으로 색상을 표현합니다. 각 값은 0부터 255까지의 범위를 가지며, rgb(255, 0, 0)은 빨강, rgb(0, 255, 0)은 초록, rgb(0, 0, 255)는 파랑입니다.
HSL 색상
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색상을 표현합니다. 색상은 0-360도의 색상환에서의 위치, 채도는 색의 선명도(0-100%), 명도는 밝기(0-100%)를 나타냅니다. 직관적으로 색상을 조절할 수 있어 디자이너들이 선호하는 방식입니다.
보색과 유사색
보색은 색상환에서 180도 반대편에 위치한 색상으로, 서로 대비가 강해 눈에 띄는 조합을 만듭니다. 유사색은 색상환에서 인접한 색상으로, 조화롭고 편안한 느낌을 줍니다.
자주 묻는 질문
Q. HEX와 RGB 중 어떤 것을 사용해야 하나요?
CSS에서는 두 가지 모두 사용 가능합니다. HEX는 더 간결하고, RGB는 투명도(RGBA)를 추가할 때 편리합니다.
Q. HSL은 언제 사용하나요?
색상의 밝기나 채도만 조절하고 싶을 때 HSL이 편리합니다. 예를 들어 호버 효과로 색상을 밝게 만들 때 L값만 조절하면 됩니다.
Q. 웹 접근성을 위한 색상 선택은?
텍스트와 배경 색상은 충분한 명도 대비(최소 4.5:1)를 유지해야 합니다. 이 도구에서 밝기 변형을 참고하여 적절한 대비를 찾을 수 있습니다.
