색상 코드 이해하기: HEX, RGB, HSL 완벽 설명

웹 개발의 색상 코드

웹에서 보는 모든 색상은 코드로 표현됩니다. 이 코드들을 이해하는 것은 웹 개발자와 디자이너에게 필수적입니다.

HEX 색상

HEX(16진수)는 웹에서 가장 흔한 색상 형식입니다.

형식: #RRGGBB

• 각 쌍은 빨강, 초록, 파랑(0-255)을 나타냅니다
• 값 범위: 00(0)에서 FF(255)

예시

• #FF0000 = 순수한 빨강
• #00FF00 = 순수한 초록
• #0000FF = 순수한 파랑
• #FFFFFF = 흰색
• #000000 = 검정

RGB 색상

RGB는 Red, Green, Blue의 약자입니다. 각 채널에 10진수(0-255)를 사용합니다.

형식: rgb(빨강, 초록, 파랑)

color: rgb(59, 130, 246);    /* 파랑 */
color: rgba(59, 130, 246, 0.5);  /* 50% 투명한 파랑 */

HSL 색상

HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 약자입니다. 사람에게 더 직관적입니다.

형식: hsl(색상, 채도%, 명도%)

• 색상(Hue): 0-360 (색상환 위치)
• 채도(Saturation): 0-100% (회색 → 선명)
• 명도(Lightness): 0-100% (검정 → 흰색)

언제 어떤 형식을 사용할까?

형식	적합한 용도
HEX	빠른 인라인 색상, 대부분의 CSS
RGB/RGBA	투명도 제어가 필요할 때
HSL	밝기/채도 조정이 필요할 때

지금 색상을 변환하세요

색상 선택기 & 변환기로 HEX, RGB, HSL, RGBA 간 즉시 변환하세요.