색상 코드 변환기

웹이나 디자인 작업을 하다 보면 #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) 같은 색상 코드를 만나게 됩니다. 모두 같은 색을 가리키는데 표현 방식만 다릅니다. 세 형식이 어떻게 색을 나타내는지, 투명도는 어떻게 다루는지 정리하고 색상 변환기로 형식을 자유롭게 바꾸는 방법을 알아봅니다.

한눈에 보기

• HEX: #RRGGBB. 빨강·초록·파랑 각 채널을 16진수 00FF(0255)로 표기.
• RGB: 빨강·초록·파랑을 각각 0~255 값으로 표기.
• HSL: 색상(Hue 0360°)·채도(Saturation 0100%)·명도(Lightness 0~100%)로 직관적 표현.
• 투명도는 RGBA 또는 8자리 HEX(#RRGGBBAA)로 추가.
• 세 형식 모두 같은 색을 표현 방식만 다르게 나타낸 것입니다.

HEX와 RGB는 다른 색인가요?

아닙니다. 같은 색을 16진수(HEX)와 10진수(RGB)로 다르게 적은 것뿐입니다. #FF0000과 rgb(255, 0, 0)은 동일합니다.

HSL은 왜 쓰나요?

명도나 채도를 조금씩 조정하기 쉽기 때문입니다. 같은 색상(Hue)을 유지하면서 밝기만 바꾸는 식의 작업에 직관적입니다.

투명한 색은 어떻게 표현하나요?

RGBA의 알파 값(0~1)이나 8자리 HEX(#RRGGBBAA)를 사용합니다. 값이 작을수록 더 투명합니다.

형식 변환은 어떻게 하나요?

색상 변환기에 값을 넣으면 HEX·RGB·HSL을 서로 바꿔 줍니다. 색을 직접 고르려면 색상 선택기를 함께 쓰세요.