유틸리티

HEX 코드를 RGB로 바꾸는 방법 - 웹 색상 코드 이해하기

웹에서 색상을 다룰 때 #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 등 다양한 형식으로 바로 변환됩니다.

언제 어떤 형식을 쓸까?

형식사용처
HEXCSS, HTML, 디자인 툴
RGBCSS, 프로그래밍
HSL색상 조정이 필요할 때
CMYK인쇄물

HSL은 뭐가 다를까?

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다. 같은 계열 색상을 만들거나 밝기를 조절할 때 직관적입니다. HEX RGB 변환 도구에서 HSL 값도 함께 확인할 수 있습니다.

투명도 추가

RGBA, HSLA에서 마지막 A는 Alpha(투명도)입니다. rgba(255, 87, 51, 0.5)는 50% 투명한 주황색입니다. HEX에서는 8자리로 표현합니다: #FF573380

디자이너와 협업할 때

디자이너가 준 색상 코드가 내가 쓰는 형식과 다를 때 웹 색상 코드 변환기로 쉽게 바꿀 수 있습니다. 복사해서 붙여넣기만 하면 됩니다.