색상 코드 변환 가이드 - HEX, RGB, HSL 완벽 이해

색상 코드 체계 이해하기

웹 디자인과 개발에서 사용하는 주요 색상 코드 체계를 알아봅니다.

HEX (16진수)

형식

#RRGGBB 또는 #RGB

예시

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

특징

가장 널리 사용되는 형식
CSS, HTML에서 표준
6자리 또는 3자리 축약형

축약형

#FF0000 → #F00
#00FFCC → #0FC

RGB (Red, Green, Blue)

형식

rgb(R, G, B) - 각 값은 0-255

예시

rgb(255, 0, 0) = 빨강
rgb(0, 255, 0) = 초록
rgb(0, 0, 255) = 파랑

특징

빛의 3원색 기반
0-255 범위의 직관적인 값
JavaScript에서 계산하기 편리

RGBA (투명도 포함)

rgba(255, 0, 0, 0.5) = 50% 투명한 빨강

HSL (Hue, Saturation, Lightness)

형식

hsl(H, S%, L%)

H (색조): 0-360도 (색상환 각도)
S (채도): 0-100% (선명함)
L (명도): 0-100% (밝기)

색조(Hue) 값

각도	색상
0°	빨강
60°	노랑
120°	초록
180°	청록
240°	파랑
300°	자홍

예시

hsl(0, 100%, 50%) = 순수 빨강
hsl(120, 100%, 50%) = 순수 초록
hsl(240, 100%, 50%) = 순수 파랑

장점

색상 조정이 직관적
명도/채도 조절 용이
색상 팔레트 만들기 편리

변환 공식

HEX → RGB

#FF5733
FF = 255 (R)
57 = 87 (G)
33 = 51 (B)
→ rgb(255, 87, 51)

RGB → HSL

복잡한 수학 공식 필요 - 도구 사용 권장

실용적인 색상 조합

브랜드 컬러 예시

브랜드	HEX
카카오 노랑	#FEE500
네이버 초록	#03C75A
삼성 파랑	#1428A0
쿠팡 빨강	#E00034

웹 기본 색상

이름	HEX
white	#FFFFFF
black	#000000
red	#FF0000
blue	#0000FF
gray	#808080

색상 선택 팁

대비(Contrast)

배경과 텍스트 대비율 4.5:1 이상 권장 (WCAG)
접근성을 위해 충분한 대비 필요

조화로운 배색

보색: 색상환 반대편 (예: 파랑-주황)
유사색: 색상환 인접 (예: 파랑-청록-초록)
삼원색: 120도 간격 (예: 빨강-노랑-파랑)

색상 변환하기

다양한 형식의 색상 코드를 쉽게 변환하세요!

👉 색상 변환 도구 바로가기

결론

HEX, RGB, HSL 각각의 특성을 이해하고 상황에 맞게 활용하면 더 효율적인 디자인 작업이 가능합니다.