guide
HEX, RGB, HSL 색상 코드 완벽 이해 — 언제 무엇을 써야 할까?
2026-03-20 · 6분 읽기
왜 색상 코드가 여러 가지일까?
웹 디자인과 개발을 하다 보면 같은 색을 #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) 등 여러 방식으로 표현하는 것을 볼 수 있습니다. 세 가지 모두 완전히 같은 색입니다. 그렇다면 왜 여러 형식이 존재하고, 언제 어느 것을 써야 할까요?
각 형식은 색을 표현하는 방식이 다르며, 각각 강점이 있는 상황이 따로 있습니다.
HEX 색상 코드
기본 개념
HEX(Hexadecimal, 16진수) 코드는 #RRGGBB 형식으로 색을 표현합니다.
RR: 빨간색(Red) 강도 (00-FF)GG: 초록색(Green) 강도 (00-FF)BB: 파란색(Blue) 강도 (00-FF)
16진수에서 00은 최솟값(0), FF는 최댓값(255)입니다.
#FF0000 /* 순수 빨간색 */
#00FF00 /* 순수 초록색 */
#0000FF /* 순수 파란색 */
#FFFFFF /* 흰색 */
#000000 /* 검정 */
#808080 /* 중간 회색 */단축 표기
세 쌍이 각각 같은 글자로 이루어진 경우 3자리로 줄여 쓸 수 있습니다.
#FF6600 → #F60
#AABBCC → #ABC
#FFFFFF → #FFF투명도(Alpha) 포함
8자리 HEX로 투명도도 표현할 수 있습니다 (#RRGGBBAA):
#FF573380 /* 50% 투명도의 주황-빨간색 */
#00000000 /* 완전 투명 */
#000000FF /* 완전 불투명 검정 */HEX의 장점과 단점
장점:
- 웹 디자인에서 가장 많이 쓰이는 형식
- CSS, HTML, 디자인 도구(Figma, Photoshop) 어디서나 사용
- 복사-붙여넣기 편리 (6자리 문자열)
- 색상 팔레트 라이브러리 대부분 HEX 제공
단점:
- 값만 보고 어떤 색인지 직관적으로 파악하기 어려움
#4A9CDB가 어떤 색인지 계산하지 않고 알 수 없음
RGB 색상 코드
기본 개념
RGB는 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 혼합해 색을 표현합니다. 각 채널은 0~255의 정수값을 가집니다.
rgb(255, 0, 0) /* 빨간색 */
rgb(0, 128, 255) /* 하늘색 */
rgb(128, 128, 128) /* 회색 */투명도를 포함할 때는 rgba():
rgba(255, 87, 51, 0.5) /* 50% 투명도 */
rgba(0, 0, 0, 0.8) /* 80% 불투명 검정 (오버레이에 자주 사용) */RGB의 장점과 단점
장점:
- 모니터, 디스플레이의 실제 작동 방식과 일치
- 각 채널 값이 0~255로 직관적
- JavaScript로 색상을 동적으로 조작할 때 편리
// 빨간색 채널만 변경
const r = 200;
const color = `rgb(${r}, 100, 50)`;- 이미지 처리 라이브러리에서 자주 사용
단점:
rgb(75, 156, 219)가 어떤 색조인지 바로 알기 어려움- 색상을 약간 밝게 하거나 채도를 낮추려면 세 값을 모두 계산해야 함
HSL 색상 코드
기본 개념
HSL은 **Hue(색조), Saturation(채도), Lightness(명도)**의 약자로, 사람이 색을 인식하는 방식에 가깝게 색을 표현합니다.
hsl(색조, 채도%, 명도%)- Hue(색조): 0~360도. 색상환에서의 위치
- 0° / 360°: 빨강
- 60°: 노랑
- 120°: 초록
- 180°: 청록
- 240°: 파랑
- 300°: 보라
- Saturation(채도): 0%(무채색 회색) ~ 100%(선명한 색)
- Lightness(명도): 0%(검정) ~ 50%(순수한 색) ~ 100%(흰색)
hsl(0, 100%, 50%) /* 순수 빨간색 */
hsl(240, 100%, 50%) /* 순수 파란색 */
hsl(0, 0%, 50%) /* 중간 회색 (채도 0) */
hsl(120, 50%, 70%) /* 연한 초록색 */HSL이 강력한 이유 — 색상 조작의 편리함
HSL의 진짜 강점은 색상 변형이 직관적이라는 점입니다.
/* 같은 색조, 다른 밝기 — 버튼 상태 표현 */
.button-bg { background: hsl(220, 80%, 50%); } /* 기본 */
.button-hover { background: hsl(220, 80%, 45%); } /* 살짝 어둡게 */
.button-light { background: hsl(220, 80%, 90%); } /* 배경색으로 사용 */
/* 같은 색조, 다른 채도 — 강조 vs 비활성화 */
.active { color: hsl(220, 80%, 50%); } /* 선명 */
.disabled { color: hsl(220, 20%, 60%); } /* 흐리게 */HEX나 RGB로 이런 작업을 하려면 매번 계산이 필요하지만, HSL은 숫자 하나만 바꾸면 됩니다.
HSLA — 투명도 포함
hsla(220, 80%, 50%, 0.5) /* 50% 투명도 */세 형식 비교 요약
| 비교 항목 | HEX | RGB | HSL |
|---|---|---|---|
| 가독성 | 보통 | 보통 | 높음 |
| 직관성 | 낮음 | 낮음 | 높음 |
| 색상 수정 용이성 | 낮음 | 보통 | 높음 |
| 도구 호환성 | 최상 | 높음 | 높음 |
| 디자이너 선호도 | 높음 | 보통 | 높음 (최근 증가) |
| JavaScript 동적 조작 | 낮음 | 높음 | 최상 |
언제 어느 형식을 쓸까?
HEX를 쓸 때
- 디자인 시스템에서 색상 토큰을 정의할 때
- Figma 등 디자인 도구에서 개발자에게 색상 전달할 때
- CSS에서 고정된 색상 값을 사용할 때
RGB/RGBA를 쓸 때
- 투명 오버레이가 필요할 때 (
rgba(0,0,0,0.5)) - JavaScript로 이미지 픽셀을 직접 조작할 때
- Canvas API 사용 시
HSL/HSLA를 쓸 때
- CSS 변수(Custom Properties)로 테마를 설계할 때
- 다크 모드처럼 밝기만 바꿔 변형 색상을 만들 때
- 동적으로 색상을 조작하는 애니메이션 효과
/* HSL + CSS 변수 활용 — 테마 시스템 예시 */
:root {
--primary-h: 220;
--primary-s: 80%;
--primary-l: 50%;
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--primary-light: hsl(var(--primary-h), var(--primary-s), 90%);
--primary-dark: hsl(var(--primary-h), var(--primary-s), 30%);
}색상 코드 변환
HEX, RGB, HSL 사이를 쉽게 변환하려면 색상 변환 도구를 사용해보세요. 원하는 형식으로 즉시 변환하고, 색상을 시각적으로 미리 볼 수 있습니다.