HEX, RGB, HSL: 웹 색상 코드 이해하기

웹사이트를 편집하다가 CSS에서 #FF5733을 봅니다. 또는 디자이너가 rgb(255, 87, 51)을 보내옵니다. 또는 디자인 도구에서 색상을 hsl(11, 100%, 60%)로 표시합니다. 이 모두가 정확히 같은 색상, 선명한 빨간-주황색을 설명하지만 세 가지 다른 형식입니다.

웹 색상 코드가 혼란스러웠다면, 이 가이드가 5분 안에 정리해 드립니다.

1670만HEX로 사용 가능한 색상 수

3일반적인 색상 형식 수

1996CSS 색상 지원이 시작된 해

디지털 색상의 작동 원리

화면의 모든 색상은 세 가지 빛의 원색을 혼합하여 만들어집니다: 빨강(Red), 초록(Green), 파랑(Blue). 이것이 RGB 색상 모델입니다. 각 채널의 강도를 0(꺼짐)에서 최대(최대 밝기)까지 변화시켜 표준 디스플레이가 표시할 수 있는 약 1670만 가지 색상을 만들 수 있습니다.

Red 255, Green 0, Blue 0 = 순수한 빨강
Red 0, Green 255, Blue 0 = 순수한 초록
Red 0, Green 0, Blue 255 = 순수한 파랑
Red 255, Green 255, Blue 255 = 흰색 (모든 채널 최대)
Red 0, Green 0, Blue 0 = 검정 (모든 채널 꺼짐)
Red 255, Green 255, Blue 0 = 노랑 (빨강 + 초록)

웹에서 사용되는 모든 색상 형식은 단순히 이 채널 값을 표현하는 다른 방식입니다.

알고 계셨나요? 1670만이라는 색상 수는 채널당 256 레벨(0-255)에서 세 채널을 곱한 것입니다: 256 x 256 x 256 = 16,777,216가지 가능한 색상.

HEX 색상

어떻게 보이는가

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

작동 방식

HEX 색상 코드는 해시 기호 뒤에 오는 6자리 문자열입니다. 6자리는 세 쌍으로 나뉘며, 각 쌍은 16진법(base 16)으로 색상 채널을 나타냅니다:

쌍	채널	범위
처음 두 자리	빨강	00~FF
중간 두 자리	초록	00~FF
마지막 두 자리	파랑	00~FF

16진법은 숫자 0-9와 문자 A-F를 사용하며, A=10, B=11, C=12, D=13, E=14, F=15입니다. 따라서 16진법의 FF는 10진법의 255와 같습니다(15 x 16 + 15 = 255).

#FF5733 분석:

FF = Red 255 (최대)
57 = Green 87
33 = Blue 51

이것은 선명한 빨간-주황색을 만듭니다.

축약형

각 쌍이 동일한 두 문자인 경우 세 자리 축약형을 사용할 수 있습니다:

#FF0000은 #F00으로 쓸 수 있음
#3366FF는 #36F로 쓸 수 있음
#000000은 #000으로 쓸 수 있음

팁 HEX 코드는 웹 개발에서 가장 널리 사용되는 형식입니다. 하나의 형식만 배운다면 이것을 배우세요.

RGB 색상

어떻게 보이는가

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

작동 방식

RGB 표기법은 빨강, 초록, 파랑 채널 값을 0~255의 10진수로 직접 명시합니다. 숫자가 각 빛 채널의 강도에 직접 대응하므로 가장 직관적인 형식입니다.

rgb(255, 87, 51)의 의미:

Red: 255 (최대)
Green: 87 (약 1/3)
Blue: 51 (약 1/5)

RGBA: 투명도 추가

RGBA는 불투명도(알파)를 위한 네 번째 값을 추가하며, 0(완전 투명)에서 1(완전 불투명)까지의 범위입니다:

rgba(255, 87, 51, 0.5)   /* 50% 투명 */
rgba(0, 0, 0, 0.8)        /* 80% 불투명 검정 */

이것은 오버레이, 그림자, 뒤의 콘텐츠가 보여야 하는 모든 디자인 요소에 유용합니다.

HSL 색상

어떻게 보이는가

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

작동 방식

HSL은 Hue(색조), Saturation(채도), Lightness(명도)의 약자입니다. 빨강/초록/파랑 채널 혼합으로 생각하는 대신, HSL은 사람이 자연스럽게 색상을 생각하는 방식으로 색상을 설명합니다.

**Hue(색조)**는 색상 자체로, 색상환의 각도(0-360)로 표현됩니다:

0° / 360° = 빨강
60° = 노랑
120° = 초록
180° = 시안
240° = 파랑
300° = 마젠타

**Saturation(채도)**은 색상이 얼마나 선명한지로, 0%(회색)에서 100%(완전 포화)까지입니다.

**Lightness(명도)**는 색상이 얼마나 밝거나 어두운지로, 0%(검정)에서 100%(흰색)까지입니다. 50%가 "보통" 명도입니다.

hsl(11, 100%, 60%)의 의미:

Hue: 11° (약간 주황빛 빨강)
Saturation: 100% (완전히 선명)
Lightness: 60% (보통보다 약간 밝음)

알고 계셨나요? HSL은 색상을 자연스럽게 설명하는 방식에 대응하기 때문에 가장 디자이너 친화적인 색상 형식으로 간주됩니다. "좀 더 밝게"는 L 값을 높이면 됩니다. "덜 선명하게"는 S 값을 낮추면 됩니다. "파란쪽으로 이동"은 H 값을 바꾸면 됩니다. HEX나 RGB에서는 이런 조정을 위해 여러 값을 동시에 변경해야 합니다.

HSLA: 투명도 추가

RGBA처럼 HSLA도 알파 채널을 추가합니다:

hsla(11, 100%, 60%, 0.5)   /* 50% 투명 */

언제 어떤 형식을 사용할까

형식	적합한 용도	장점
HEX	CSS 스타일시트, 디자인 사양	간결, 보편적으로 통용
RGB	프로그래밍적 색상 조작	직관적인 채널 값
HSL	디자인 작업, 색상 체계 만들기	사람의 색상 인식에 부합

웹 개발용

HEX가 사실상의 표준입니다. 대부분의 CSS는 HEX 코드로 작성되는데 간결하고 모든 개발자가 인식하기 때문입니다.

디자인 시스템용

HSL은 일관된 색상 팔레트를 만드는 데 이상적입니다. 브랜드 색상의 밝고 어두운 변형을 만들려면 명도 값만 조정하면 됩니다:

기본: hsl(210, 80%, 50%)
밝은 변형: hsl(210, 80%, 70%)
어두운 변형: hsl(210, 80%, 30%)

색조와 채도는 동일하게 유지되어 변형이 다른 밝기의 같은 "색상"임을 보장합니다.

투명도용

반투명 색상이 필요한 오버레이, 그림자, 글래스 효과에는 RGBA 또는 HSLA를 사용하세요.

색상 선택

적절한 형식 선택

필요시 변환

프로젝트에서 사용

형식 간 변환

형식 간 변환이 자주 필요합니다. 디자이너가 HSL 값을 보내지만 코드베이스는 HEX를 사용합니다. 브랜드 가이드가 RGB를 지정하지만 변형을 만들기 위해 HSL이 필요합니다.

수학은 간단하지만 수동으로 하면 번거롭습니다. 변환 도구가 즉시 처리합니다.

팁 HEX, RGB, HSL 등 간에 변환하세요: 색상 코드 변환 방법. 어떤 형식으로든 색상을 입력하면 다른 모든 형식을 즉시 얻을 수 있습니다.

색상 작업을 시작하세요:

모든 도구는 무료이며 브라우저에서 바로 작동합니다.

HEX, RGB, HSL: 웹 색상 코드 이해하기

웹 색상 코드가 혼란스러웠다면, 이 가이드가 5분 안에 정리해 드립니다.

1670만HEX로 사용 가능한 색상 수

3일반적인 색상 형식 수

1996CSS 색상 지원이 시작된 해

디지털 색상의 작동 원리

Red 255, Green 0, Blue 0 = 순수한 빨강
Red 0, Green 255, Blue 0 = 순수한 초록
Red 0, Green 0, Blue 255 = 순수한 파랑
Red 255, Green 255, Blue 255 = 흰색 (모든 채널 최대)
Red 0, Green 0, Blue 0 = 검정 (모든 채널 꺼짐)
Red 255, Green 255, Blue 0 = 노랑 (빨강 + 초록)

웹에서 사용되는 모든 색상 형식은 단순히 이 채널 값을 표현하는 다른 방식입니다.

알고 계셨나요? 1670만이라는 색상 수는 채널당 256 레벨(0-255)에서 세 채널을 곱한 것입니다: 256 x 256 x 256 = 16,777,216가지 가능한 색상.

HEX 색상

어떻게 보이는가

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

작동 방식

HEX 색상 코드는 해시 기호 뒤에 오는 6자리 문자열입니다. 6자리는 세 쌍으로 나뉘며, 각 쌍은 16진법(base 16)으로 색상 채널을 나타냅니다:

쌍	채널	범위
처음 두 자리	빨강	00~FF
중간 두 자리	초록	00~FF
마지막 두 자리	파랑	00~FF

16진법은 숫자 0-9와 문자 A-F를 사용하며, A=10, B=11, C=12, D=13, E=14, F=15입니다. 따라서 16진법의 FF는 10진법의 255와 같습니다(15 x 16 + 15 = 255).

#FF5733 분석:

FF = Red 255 (최대)
57 = Green 87
33 = Blue 51

이것은 선명한 빨간-주황색을 만듭니다.

축약형

각 쌍이 동일한 두 문자인 경우 세 자리 축약형을 사용할 수 있습니다:

#FF0000은 #F00으로 쓸 수 있음
#3366FF는 #36F로 쓸 수 있음
#000000은 #000으로 쓸 수 있음

팁 HEX 코드는 웹 개발에서 가장 널리 사용되는 형식입니다. 하나의 형식만 배운다면 이것을 배우세요.

RGB 색상

어떻게 보이는가

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

작동 방식

RGB 표기법은 빨강, 초록, 파랑 채널 값을 0~255의 10진수로 직접 명시합니다. 숫자가 각 빛 채널의 강도에 직접 대응하므로 가장 직관적인 형식입니다.

rgb(255, 87, 51)의 의미:

Red: 255 (최대)
Green: 87 (약 1/3)
Blue: 51 (약 1/5)

RGBA: 투명도 추가

RGBA는 불투명도(알파)를 위한 네 번째 값을 추가하며, 0(완전 투명)에서 1(완전 불투명)까지의 범위입니다:

rgba(255, 87, 51, 0.5)   /* 50% 투명 */
rgba(0, 0, 0, 0.8)        /* 80% 불투명 검정 */

이것은 오버레이, 그림자, 뒤의 콘텐츠가 보여야 하는 모든 디자인 요소에 유용합니다.

HSL 색상

어떻게 보이는가

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

작동 방식

**Hue(색조)**는 색상 자체로, 색상환의 각도(0-360)로 표현됩니다:

0° / 360° = 빨강
60° = 노랑
120° = 초록
180° = 시안
240° = 파랑
300° = 마젠타

**Saturation(채도)**은 색상이 얼마나 선명한지로, 0%(회색)에서 100%(완전 포화)까지입니다.

**Lightness(명도)**는 색상이 얼마나 밝거나 어두운지로, 0%(검정)에서 100%(흰색)까지입니다. 50%가 "보통" 명도입니다.

hsl(11, 100%, 60%)의 의미:

Hue: 11° (약간 주황빛 빨강)
Saturation: 100% (완전히 선명)
Lightness: 60% (보통보다 약간 밝음)

HSLA: 투명도 추가

RGBA처럼 HSLA도 알파 채널을 추가합니다:

hsla(11, 100%, 60%, 0.5)   /* 50% 투명 */

언제 어떤 형식을 사용할까

형식	적합한 용도	장점
HEX	CSS 스타일시트, 디자인 사양	간결, 보편적으로 통용
RGB	프로그래밍적 색상 조작	직관적인 채널 값
HSL	디자인 작업, 색상 체계 만들기	사람의 색상 인식에 부합

웹 개발용

HEX가 사실상의 표준입니다. 대부분의 CSS는 HEX 코드로 작성되는데 간결하고 모든 개발자가 인식하기 때문입니다.

디자인 시스템용

HSL은 일관된 색상 팔레트를 만드는 데 이상적입니다. 브랜드 색상의 밝고 어두운 변형을 만들려면 명도 값만 조정하면 됩니다:

기본: hsl(210, 80%, 50%)
밝은 변형: hsl(210, 80%, 70%)
어두운 변형: hsl(210, 80%, 30%)

색조와 채도는 동일하게 유지되어 변형이 다른 밝기의 같은 "색상"임을 보장합니다.

투명도용

반투명 색상이 필요한 오버레이, 그림자, 글래스 효과에는 RGBA 또는 HSLA를 사용하세요.

색상 선택

적절한 형식 선택

필요시 변환

프로젝트에서 사용

형식 간 변환

수학은 간단하지만 수동으로 하면 번거롭습니다. 변환 도구가 즉시 처리합니다.

팁 HEX, RGB, HSL 등 간에 변환하세요: 색상 코드 변환 방법. 어떤 형식으로든 색상을 입력하면 다른 모든 형식을 즉시 얻을 수 있습니다.

색상 작업을 시작하세요:

모든 도구는 무료이며 브라우저에서 바로 작동합니다.