HEX·RGB·HSL·OKLCH 색상 코드 변환 완벽 가이드

CSS를 작성하다 보면 HEX, RGB, HSL, HSB, OKLCH 등 다양한 색상 표기 방식이 등장합니다. 각각이 어떤 상황에 쓰이고 어떻게 변환하는지 알면 디자인-개발 협업이 훨씬 매끄러워지고,
CSS 변수로 테마 시스템을 구현하기도 수월해집니다.

이 글은 6가지 주요 색상 공간의 차이와 변환 공식, 한국 주요 브랜드의 실제 색상 코드,
그리고 실무에서 자주 마주치는 색상 표기 문제와 해결법을 정리합니다.

주요 색상 표기 방식 비교#

HEX 색상 코드#

구조#

#RRGGBB
# = HEX 식별자
RR = 빨강(Red) 00–FF
GG = 초록(Green) 00–FF
BB = 파랑(Blue) 00–FF

각 채널은 0–255(10진)를 00–FF(16진)로 표현합니다.

#2563EB
25 = 37 (Red)
63 = 99 (Green)
EB = 235 (Blue)

단축 표기#

각 채널 두 자리가 동일할 때 한 자리로 줄일 수 있습니다.

#FFFFFF → #FFF (흰색)
#000000 → #000 (검정)
#FF0000 → #F00 (빨강)
#AABBCC → #ABC

투명도 포함 (8자리 HEX)#

CSS Color Level 4부터 #RRGGBBAA 형식을 지원합니다.

#2563EBFF → 불투명 (FF = 255 = 100%)
#2563EB80 → 50% 투명 (80 = 128 ≈ 50%)
#2563EB00 → 완전 투명 (00 = 0%)

알파 값을 16진수로 환산하는 공식:

HEX 알파 = round(투명도% × 255 / 100)
50% → 128 → 80
75% → 191 → BF
25% → 64  → 40

RGB 색상#

구조#

rgb(빨강, 초록, 파랑)
각 값: 0–255 정수

빛의 삼원색 기반. 모두 0이면 검정(#000000), 모두 255면 흰색(#FFFFFF)입니다. CSS Color Level 4부터는 정수 외에도 0–100% 비율 표기, 그리고 공백 구분 신문법도 지원합니다.

/* 신문법(권장) */
color: rgb(37 99 235);
color: rgb(37 99 235 / 0.5);

/* 비율 표기 */
color: rgb(14% 39% 92%);

HEX ↔ RGB 변환 공식#

HEX → RGB: 각 채널을 16진수에서 10진수로 변환
RGB → HEX: 각 채널을 10진수에서 16진수로 변환

#2563EB → rgb(37, 99, 235)
2(hex) × 16 + 5 = 37
6(hex) × 16 + 3 = 99
E(hex) × 16 + B(11) = 235

JavaScript 변환 예:

const hexToRgb = (hex) => {
  const v = hex.replace("#", "");
  return [
    parseInt(v.substring(0, 2), 16),
    parseInt(v.substring(2, 4), 16),
    parseInt(v.substring(4, 6), 16),
  ];
};

HSL 색상#

구조#

hsl(색조, 채도%, 명도%)
색조(Hue): 0–360 (색상환 각도)
채도(Saturation): 0–100% (0%=회색)
명도(Lightness): 0–100% (0%=검정, 100%=흰색)

색조(Hue) 값 참고#

HSL이 편리한 이유#

색상 조작에 직관적입니다.

밝기 조정: 명도(L)만 변경

hsl(221, 83%, 53%)  /* 기본 파란색 */
hsl(221, 83%, 70%)  /* 더 밝게 */
hsl(221, 83%, 35%)  /* 더 어둡게 */

채도 조정: 채도(S)만 변경

hsl(221, 83%, 53%)  /* 선명한 파랑 */
hsl(221, 30%, 53%)  /* 흐린 파랑 */
hsl(221,  0%, 53%)  /* 회색 */

CSS 변수와 결합하면 테마 시스템 구현이 쉽습니다.

:root {
  --primary-hue: 221;
  --primary: hsl(var(--primary-hue), 83%, 53%);
  --primary-light: hsl(var(--primary-hue), 83%, 90%);
  --primary-dark: hsl(var(--primary-hue), 83%, 35%);
  --primary-50: hsl(var(--primary-hue), 83%, 96%);
  --primary-500: hsl(var(--primary-hue), 83%, 53%);
  --primary-900: hsl(var(--primary-hue), 83%, 20%);
}

HSB(HSV): Figma·Photoshop 표기#

HSB(또는 HSV)는 디자인 도구에서 가장 흔한 표기입니다. HSL과 달리 B(Brightness) 는 흰색을 더하는 개념이 아니라 검정을 빼는 개념입니다.

같은 색을 두 공간으로 표기하면 채도·명도 값이 다릅니다.

파랑 #2563EB
HSL: hsl(221, 83%, 53%)
HSB: hsv(221, 84%, 92%)

Figma·Sketch에서 색상 패널을 열면 H·S·B 슬라이더가 보입니다. CSS는 HSB를 직접 지원하지 않으므로, 디자이너가 보낸 HSB 값을 HSL로 변환해 사용합니다.

OKLCH: 인지 균일 색상 공간#

2023년 이후 모든 주요 브라우저(Chrome 111+, Safari 16.4+, Firefox 113+)가 OKLCH 를 지원합니다. OKLCH는 인간의 색 인지에 가까운 균일한 밝기 분포를 제공해,
같은 명도(L) 값을 주면 시각적으로도 동일한 밝기로 느껴집니다.

/* HSL의 한계: 같은 L=50%인데 노랑이 파랑보다 훨씬 밝아 보임 */
color: hsl(60, 100%, 50%);   /* 노랑 — 매우 밝게 느껴짐 */
color: hsl(240, 100%, 50%);  /* 파랑 — 어둡게 느껴짐 */

/* OKLCH: 같은 L=0.7이면 실제로 비슷한 밝기 */
color: oklch(0.7 0.15 90);   /* 노랑 계열 */
color: oklch(0.7 0.15 260);  /* 파랑 계열 */

OKLCH의 3채널:

• L(Lightness): 0–1, 인지 균일 밝기
• C(Chroma): 0–0.4 정도, 채도(상한은 색조에 따라 다름)
• H(Hue): 0–360, 색조

다크모드 토큰 설계, 데이터 시각화 색상 시리즈 생성 시 OKLCH가 HSL보다 안정적입니다. 단, 디자인 도구에서 OKLCH 값을 직접 보내주는 경우는 아직 드물어
일반 협업에서는 HEX를 기본으로 사용합니다.

CMYK: 인쇄용 색상#

CMYK는 화면에서는 사용하지 않습니다. 인쇄물(명함·브로슈어·포스터)에서 잉크 4색(Cyan·Magenta·Yellow·blacK)의 비율로 색을 표현합니다.

cmyk(84, 58, 0, 8)
C = 84% Cyan
M = 58% Magenta
Y = 0%  Yellow
K = 8%  blacK

RGB의 모든 색을 CMYK로 정확히 재현할 수 없으며(색역 차이),
같은 HEX 코드라도 모니터와 인쇄물의 색이 달라 보입니다. 인쇄물 작업 시에는 인쇄소에 CMYK 값을 별도로 전달하거나, Adobe 색상 프로파일을 적용해야 합니다.

한국 주요 브랜드 색상 참고#

브랜드 가이드라인에서 공개된 색상 코드를 정리했습니다(2026년 기준).

각 브랜드의 정확한 색상 사용 규정은 공식 브랜드 가이드라인을 따라야 하며,
위 값은 디자인 학습용 참고치입니다.

어떤 형식을 언제 쓸까?#

흔한 실수와 해결법#

1. HEX 7자리·9자리 입력#

#2563EBA0(8자리 알파)는 유효하지만 #2563EBA(7자리)는 잘못된 형식입니다. CSS는 무시하고 기본 색을 적용합니다. 도구에서 색상 코드 복사 시 자릿수를 확인합니다.

2. RGB 값 0–1 vs 0–255 혼동#

OpenGL·WebGL·Canvas API는 0–1 정규화 값을 받습니다. CSS의 rgb(255, 0, 0)을 그대로 넣으면 모두 1로 클램핑되어 흰색이 나옵니다.

// WebGL용 변환
const r = 255 / 255; // 1.0
const g = 0 / 255;   // 0.0
const b = 0 / 255;   // 0.0

3. HSL 색조 단위 누락#

CSS Color Level 4는 hsl(221deg, 83%, 53%)처럼 단위를 명시할 수 있고, 단위 없이도 동작합니다. 하지만 hsl(221rad, 83%, 53%)처럼 잘못된 단위를 넣으면 무시됩니다.

4. 모니터 색상 프로파일 차이#

같은 #2563EB 코드라도 모니터(sRGB·DCI-P3·Adobe RGB)에 따라 보이는 색이 다릅니다. 디자인 작업은 sRGB 색공간을 기본으로 하고,
인쇄·영상 등 특수 워크플로에서는 색상 프로파일을 명시해야 합니다.

실전 워크플로#

Figma → CSS 변환#

1. Figma에서 색상 선택 → HEX 복사
2. CSS에 color: #2563EB 그대로 입력
3. 투명도가 필요하면 HSLA 또는 8자리 HEX로 변환

Photoshop → 웹 변환#

1. Photoshop 색상 피커 열기
2. HSB 값 확인(디자이너가 채도·명도로 작업했을 가능성)
3. 우측 하단 #______ HEX 코드 복사
4. CSS에 적용 시 반드시 sRGB 모드로 저장된 PSD인지 확인

다크모드 토큰 자동 생성(HSL 활용)#

:root {
  --bg: hsl(0, 0%, 100%);
  --fg: hsl(0, 0%, 10%);
  --primary: hsl(221, 83%, 53%);
}

[data-theme="dark"] {
  --bg: hsl(0, 0%, 10%);
  --fg: hsl(0, 0%, 95%);
  --primary: hsl(221, 83%, 65%);  /* 명도만 +12 */
}

명도 값만 조정하면 일관된 다크모드가 자동으로 만들어집니다.

색상 변환 도구 활용#

복잡한 계산 없이 색상 변환 도구에 색상 코드를 입력하면 HEX·RGB·HSL·HSB를 즉시 상호 변환할 수 있습니다.

피그마에서 복사한 HEX 코드를 CSS용 RGB로, 또는 팀원이 공유한 RGB 값을 HEX로 변환할 때 유용합니다. 8자리 HEX 알파 값도 함께 처리합니다.

색상 코드 변환에 익숙해졌다면 보색·유사색·트라이아드 등 체계적인 배색 이론을 활용해 팔레트를 만들어 보세요. 색상 팔레트 완전 가이드에서 5가지 핵심 배색 방식과 60-30-10 법칙을 설명합니다. CSS 그라디언트로 두 색을 부드럽게 연결하는 방법은 CSS 그라디언트 완전 가이드를 참고하세요.