웹에서 색상을 다룰 때 #FF5733, rgb(255, 87, 51) 같은 표기를 보게 됩니다. 둘 다 같은 색인데 왜 표기가 다를까요? 색상 코드 체계와 변환 방법을 알아보겠습니다.
HEX 색상 코드란?
HEX는 16진수(Hexadecimal)의 줄임말입니다. #으로 시작하고 6자리 숫자/문자로 구성됩니다. 앞 2자리는 빨강(R), 중간 2자리는 초록(G), 마지막 2자리는 파랑(B)을 나타냅니다.
RGB 색상이란?
Red, Green, Blue 세 가지 빛의 조합입니다. 각각 0~255 사이의 값을 가집니다. rgb(255, 0, 0)은 순수한 빨강, rgb(0, 255, 0)은 순수한 초록입니다.
HEX → RGB 변환
#FF5733을 RGB로 바꾸면:
- FF (빨강) = 255
- 57 (초록) = 87
- 33 (파랑) = 51
- 결과: rgb(255, 87, 51)
간편하게 변환하기
16진수 계산이 복잡하다면 색상 변환기를 사용하세요. HEX 코드를 입력하면 RGB, HSL 등 다양한 형식으로 바로 변환됩니다.
언제 어떤 형식을 쓸까?
| 형식 | 사용처 |
|---|---|
| HEX | CSS, HTML, 디자인 툴 |
| RGB | CSS, 프로그래밍 |
| HSL | 색상 조정이 필요할 때 |
| CMYK | 인쇄물 |
HSL은 뭐가 다를까?
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다. 같은 계열 색상을 만들거나 밝기를 조절할 때 직관적입니다. HEX RGB 변환 도구에서 HSL 값도 함께 확인할 수 있습니다.
투명도 추가
RGBA, HSLA에서 마지막 A는 Alpha(투명도)입니다. rgba(255, 87, 51, 0.5)는 50% 투명한 주황색입니다. HEX에서는 8자리로 표현합니다: #FF573380
디자이너와 협업할 때
디자이너가 준 색상 코드가 내가 쓰는 형식과 다를 때 웹 색상 코드 변환기로 쉽게 바꿀 수 있습니다. 복사해서 붙여넣기만 하면 됩니다.