색상 코드 변환기 – HEX, RGB, HSL 상호 변환

웹 디자인을 하다 보면 HEX 코드(#FF5733)는 아는데 RGB 값이 필요할 때가 있고, 반대인 경우도 있습니다. 포토샵에서 뽑은 색상을 CSS에 넣으려면 변환이 필요하죠. HEX, RGB, HSL 세 가지 형식을 자유롭게 변환하고 미리보기까지 할 수 있습니다.

사용 방법

HEX 코드, RGB 값, 또는 HSL 값 중 아무거나 입력하면 나머지 형식으로 자동 변환됩니다. 색상 미리보기도 함께 표시됩니다.

자주 묻는 질문

Q. HEX와 RGB의 차이가 뭔가요?

표현 방식만 다를 뿐 같은 색상입니다. HEX는 16진수(#FF5733), RGB는 10진수(255, 87, 51)로 표현합니다. CSS에서는 둘 다 사용 가능합니다.

Q. HSL은 언제 쓰나요?

HSL(색상/채도/명도)은 색상 조합을 잡을 때 직관적입니다. 같은 색상에서 채도만 낮추거나 밝기만 조절하기 쉬워서, 디자인 시스템을 만들 때 유용합니다.

Q. 투명도(알파)는 어떻게 설정하나요?

CSS에서 투명도가 필요하면 rgba(255, 87, 51, 0.5) 형태로 네 번째 값에 0~1 사이의 알파값을 추가하면 됩니다. HEX에서는 #FF573380 처럼 뒤에 2자리를 추가합니다.