프론트엔드, 웹 퍼블리싱/디자인을 위한 필수 색상 포맷 총정리 (HEX, RGB, HSL, CMYK 등)

웹사이트를 만들거나 디자인 작업을 하다 보면 HEX(#3B82F6)부터 RGB, HSL, 인쇄용 CMYK까지 수많은 색상 표기법을 마주하게 된다.

 

"이 색이 저 색 같은데, 왜 이렇게 다양한 포맷이 존재할까요?"

 

모니터 화면의 빛을 다룰 때, 사람이 눈으로 색을 인지할 때, 그리고 종이 인쇄물에 잉크를 얹을 때 최적화된 수학적 모델이 저마다 다르기 때문이다. 각 포맷의 개념과 투명도(Alpha)를 지원하는 방식까지 정확히 이해하고 있다면, 상황에 맞는 최적의 색상을 선택하고 다루는 데 큰 도움이 된다.

 

이번 포스팅에서는 디지털과 인쇄 전반에서 가장 널리 쓰이는 주요 색상 포맷들의 특징과 차이점을 알기 쉽게 정리해보았다.

---

RGB (Red, Green, Blue)

• 개념: 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 혼합하여 색을 표현하는 디지털 화면의 가장 기본적인 표준 모델
• 구조: 각각 0 ~ 255 사이의 정수 값 3개로 이루어져 있으며, 값이 모두 0이면 검은색, 모두 255이면 하얀색이 이다.
• 예시
  • RGB(59, 130, 246)
  • 빨강 (Red): RGB(255, 0, 0)
  • 초록 (Green): RGB(0, 255, 0)
  • 파랑 (Blue): RGB(0, 0, 255)
  • 검은색 (Black): RGB(0, 0, 0) (값이 모두 0)
  • 흰색 (White): RGB(255, 255, 255) (값이 모두 255)

RGBA (Red, Green, Blue, Alpha)

• 개념: 기본 RGB 모델에 투명도(Alpha) 개념을 추가한 확장 포맷입니다. 웹 디자인에서 요소가 겹치거나 배경을 반투명하게 처리할 때 필수적으로 쓰인다.
• 구조: RGB 값(0~255) 3개 뒤에 투명도를 나타내는 알파 값(0 ~ 1 사이의 실수, 또는 0% ~ 100%) 1개가 추가되어 총 4개의 값이으로 구성된다. (0 은 완전 투명, 1 은 완전 불투명)
• 예시
  • RGBA(59, 130, 246, 0.5) (50% 투명)
  • 빨강 (Red): RGBA(255, 0, 0, 0.1) (10% 투명)
  • 초록 (Green): RGBA(0, 255, 0 , 0.2) (20% 투명)
  • 파랑 (Blue): RGBA(0, 0, 255 , 0.3) (30% 투명)
  • 검은색 (Black): RGBA(0, 0, 0 , 0.4) (40% 투명)
  • 흰색 (White): RGBA(255, 255, 255 , 0.5) (50% 투명)

HEX (Hexadecimal)

• 개념: 16진수 코드를 기반으로 웹과 디지털 화면에서 가장 널리 쓰이는 표기법
• 구조: #RRGGBB, # 뒤에 붙는 6자리(또는 3자리) 문자로 구성되며, 앞의 2자리는 빨강(R), 중간 2자리는 초록(G), 뒤의 2자리는 파랑(B)의 강도를 나타낸다.
• 예시
  • #3b82f6
  • 빨강 (Red): #FF0000
  • 초록 (Green): #00FF00
  • 파랑 (Blue): #0000FF
  • 검은색 (Black): #000000
  • 흰색 (White): #FFFFFF

Hex with Alpha (Alpha가 포함된 HEX)

• 개념: 기존 HEX 코드 뒤에 투명도를 뜻하는 2자리가 추가된 형태
• 구조: #RRGGBBAA 형태로 구성되며, 마지막 두 자리는 알파 값의 16진수 투명도(00은 완전 투명, FF는 완전 불투명)를 나타낸다.
• 예시
  • 3b82f680 (50% 투명)
  • 빨강 (10% 투명): #FF00001A
  • 초록 (20% 투명): #00FF0033
  • 파랑 (30% 투명): #0000FF4D
  • 검은색 (40% 투명): #00000066
  • 흰색 (50% 투명): #FFFFFF80

HSL (Hue, Saturation, Lightness)

• 개념: 인간이 색을 인지하는 방식(색상, 채도, 명도)에 가장 가깝게 설계된 모델
• 구조:
  • Hue (색상): 색의 종류를 나타내는 각도 (0° ~ 360°). (예: 0°=빨강, 120°=초록, 240°=파랑)
  • Saturation (채도): 색의 선명함/탁함 정도 (0% ~ 100%). 값이 높을수록 원색에 가까워진다.
  • Lightness (명도): 밝고 어두운 정도 (0% ~ 100%). 0%는 완전한 검은색, 50%는 순수한 색, 100%는 완전한 흰색이다.
• 예시
  • hsl(217, 91%, 60%)
  • 빨강 (Red): hsl(0, 100%, 50%)
  • 초록 (Green): hsl(120, 100%, 50%)
  • 파랑 (Blue): hsl(240, 100%, 50%)
  • 검은색 (Black): hsl(0, 0%, 0%)
  • 흰색 (White): hsl(0, 0%, 100%)

HSLA (Hue, Saturation, Lightness, Alpha)

• 개념: 기존 HSL(색상, 채도, 명도) 모델에 투명도(Alpha)를 추가한 포맷입니다.
• 구조: HSL 값 뒤에 알파 값(0 ~ 1 사이의 실수)가 추가
• 예시
  • hsl(217, 91%, 60%, 0.5) (50% 투명)
  • 빨강 (10% 투명): hsl(0, 100%, 50%, 0.1)
  • 초록 (20% 투명): hsl(120, 100%, 50%, 0.2)
  • 파랑 (30% 투명): hsl(240, 100%, 50%, 0.3)
  • 검은색 (40% 투명): hsl(0, 0%, 0%, 0.4)
  • 흰색 (50% 투명): hsl(0, 0%, 100%, 0.5)

HWB (Hue, Whiteness, Blackness)

• 개념: HSL보다 사람이 색상을 직관적으로 믹스하는 방식(원색에 하얀색을 섞거나 검은색을 섞는 과정)에 가깝게 만든 모델. CSS4 표준에 도입되었다.
• 구조:
  • Hue (색상): HSL과 같은 색상 각도 (0° ~ 360°).
  • Whiteness (백분율 흰색): 섞인 흰색의 양 (0% ~ 100%).
  • Blackness (백분율 검은색): 섞인 검은색의 양 (0% ~ 100%).
• 예시
  • hwb(217 23% 4%)
  • 빨강 (Red): hwb(0 0% 0%)
  • 초록 (Green): hwb(120 0% 0%)
  • 파랑 (Blue): hwb(240 0% 0%)
  • 검은색 (Black): hwb(0 0% 100%)
  • 흰색 (White): hwb(0 100% 0%)

HWBA (Hue, Whiteness, Blackness, Alpha)

• 개념: HWB(색상, 흰색, 검은색) 모델에 투명도를 추가한 최신 CSS 표준 포맷
• 구조: HWB 값 뒤에 알파 값(0 ~ 1 사이의 실수)가 추가
• 예시
  • hwb(217 23% 4% / 0.5) (50% 투명)
  • 빨강 (10% 투명): hwb(0 0% 0% / 0.1)
  • 초록 (20% 투명): hwb(120 0% 0% / 0.2)
  • 파랑 (30% 투명): hwb(240 0% 0% / 0.3)
  • 검은색 (40% 투명): hwb(0 0% 100% / 0.4)
  • 흰색 (50% 투명): hwb(0 100% 0% / 0.5)

OKLCH (Lightness, Chroma, Hue)

• 개념
  • 기존 색상 모델(HSL 등)이 가진 왜곡을 해결하기 위해 사람의 실제 시각 인지 능력(CIE Lab 기반)을 바탕으로 설계된 차세대 현대적 색상 포맷
  • 최신 웹 표준(CSS Color Module Level 4)에서 다크모드, 동적 테마, 자연스러운 그라데이션을 구현할 때 가장 주목받고 있다.
• 구조:
  • L (Lightness, 명도): 인간이 느끼는 실제 밝기 비율 (0 ~ 1 사이의 실수, 또는 0% ~ 100%). 기기나 디스플레이의 설정과 상관없이 숫자가 같으면 인간의 눈에도 항상 똑같은 밝기로 느껴진다.
  • C (Chroma, 채도): 색의 선명함/순수함의 정도 (0 부터 시작하며 이론상 상한선이 없으나 보통 0.4 안팎까지 사용). 색이 맑고 진할수록 숫자가 커진다.
  • H (Hue, 색상): 색상환 각도 (0° ~ 360°).
• 예시
  • oklch(60% 0.2 250) (투명도가 없는 기본 형태)
  • oklch(60% 0.2 250 / 0.5) (투명도 50%가 포함된 OKLCHA 형태)

OKLCHA (OKLCH with Alpha)

• 개념
  • 인간이 인지하는 밝기와 채도의 균일함을 완벽하게 맞춘 차세대 색상 모델(OKLCH)에 투명도 채널이 결합된 형태
  • 현대 웹 디자인에서 정교한 그라데이션이나 다크모드 투명 처리에 널리 채택되고 있다.
• 구조: OKLCH 값 뒤에 슬래시(/)와 함께 알파 값(0 ~ 1 사이의 실수)가 추가
• 예시: oklch(60% 0.2 250 / 0.5)

CMYK (Cyan, Magenta, Yellow, Key/Black)

• 개념
  • 모니터 같은 빛의 삼원색(RGB)이 아니라, 인쇄물(프린터, 책, 포스터 등)에서 사용하는 감색혼합 모델
  • 잉크를 섞을수록 어두워진다.
• 구조: 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 그리고 검은색을 뜻하는 키(Key/Black) 4가지 잉크의 비율(0% ~ 100%)을 나타낸다.
• 예시: cmyk(76%, 48%, 0%, 4%)

NCOL (Natural Color Logic / Natural Color System 계열)

• 개념
  • 인간의 시각적 자연색 감각(NCS 시스템 기반)에 기반하여 색상을 표현하는 표기법
  • 자연스러운 색의 유사성과 조합을 다룰 때 사용
• 구조: 주요 순수 자연색 기호(R: Red, Y: Yellow, G: Green, C: Cyan, B: Blue, M: Magenta)와 비율 숫자를 조합하여 나타낸다.
• 예시: B27R (파란색에서 빨간색 쪽으로 일정 비율 치우친 형태 등)

---

CMYK와 NCOL은 투명도가 없나요?

CMYK와 NCOL은 수학적·이론적으로는 투명도 개념이 존재하지 않으며 사용하지 않는다.

• CMYK의 경우:
  • CMYK는 모니터 빛이 아니라 종이 인쇄(프린터 잉크)를 위한 색상 모델
  • 종이 위에 인쇄하는 잉크(청록, 자홍, 노랑, 검정)는 빛을 투과시키는 게 아니라 종이에 흡수시켜 반사되는 빛을 차단하는 물리적 물질이다.
  • 물리적인 인쇄 잉크에는 디지털 화면처럼 '반투명하게 겹쳐서 뒤가 비치게 하는 투명도(Alpha)'라는 개념을 적용할 수 없기 때문에 투명도 채널이 없다.
• NCOL의 경우:
  • NCOL(Natural Color Logic)은 인간의 눈이 인지하는 자연색의 유사성과 비율을 기호(R, Y, G 등)로 나타내는 순수 색상 표기법(시각적 색상 위치)
  • 레이어의 투명도를 조절하는 목적의 데이터가 아니라 오직 '색상의 성향과 위치'만을 나타내기 때문에 알파 채널을 포함하지 않다.