T
color-converter design-tools css frontend-development

전문 색상 변환기: 모든 색 공간을 완벽하게 마스터하세요

HEX, RGB, HSL, HSV, CMYK 간의 정밀한 변환을 지원합니다. 디자이너와 프론트엔드 개발자를 위한 필수 도구.

2026-04-09 이 도구 사용하기

색상 모델이란 무엇인가?

색상 모델은 색을 숫자 튜플로 표현하는 수학적 체계입니다. "따뜻한 오렌지레드"라고 설명하는 대신, 디자이너는 #FF4500, rgb(255, 69, 0), 또는 hsl(16, 100%, 50%)로 정확하게 전달할 수 있습니다. 모호함 없이, 재현 가능하며, 도구와 팀을 가리지 않고 공유할 수 있습니다.

정확한 색상 기술의 필요성은 오래되었습니다. 1666년, 아이작 뉴턴은 유리 프리즘에 흰 햇빛을 통과시켜 무지개 스펙트럼을 만들어, "흰빛"에는 모든 가시광선이 포함되어 있음을 증명했습니다. 그러나 스펙트럼만으로는 색을 체계적으로 혼합하거나 지정하는 방법을 알 수 없었습니다.

최초의 실용적인 색 질서 체계는 1905년 앨버트 먼셀이 만들었습니다. 그는 색을 색상(Hue), 명도(Value), 채도(Chroma)의 세 축에 배치하여 지각적인 나무 구조를 만들었습니다. 이 체계가 HSL과 HSV의 직접적인 선조입니다.

현대 과학의 기반은 1931년에 마련되었습니다. 국제조명위원회(CIE)가 CIE 1931 XYZ 색공간을 발표했는데, 이것은 인간 관찰자의 배색 실험을 바탕으로 한 최초의 수학적으로 엄밀한, 장치 독립적인 색상 기술 표준입니다. 컴퓨팅에서 사용되는 모든 색상 모델은 궁극적으로 이 표준으로 거슬러 올라갑니다.

디지털 시대는 하드웨어 기반 모델을 가져왔습니다. CRT 모니터는 빨강, 녹색, 파랑 형광 점을 혼합해 빛을 내고(RGB), 잉크젯 프린터는 시안, 마젠타, 노랑, 검정 잉크를 분사합니다(CMYK). 각 매체에는 자체 모델이 필요하며, 이들 사이를 변환하는 필요성이 지금 여러분이 사용하는 것과 같은 도구를 탄생시켰습니다.

RGB —— 화면의 언어

RGB(빨강·녹색·파랑)는 가산 혼합 모델입니다. 빛을 더할수록 밝아지고, 세 채널이 모두 최대값(255, 255, 255)이면 흰색, 모두 0이면 검은색이 됩니다. 이는 모니터, TV, 스마트폰 화면이 작동하는 방식과 동일합니다——수백만 개의 픽셀이 각각 빨강, 녹색, 파랑 서브픽셀로 구성되어 다양한 강도로 빛을 내뿜습니다.

각 채널의 범위는 0~255(8비트, 256단계)이며, 256³ = 16,777,216가지 색상을 표현할 수 있습니다. 이것이 흔히 말하는 "24비트 트루 컬러"입니다. HDR 디스플레이의 경우 채널당 10비트(1024단계)가 표준이 되어가고 있습니다.

RGB는 CSS, Canvas API, WebGL 셰이더, 이미지 처리 라이브러리의 기본 언어입니다. 단점은 직관성이 부족하다는 것입니다. 파란색을 조금 밝게 만들고 싶을 때 어떤 숫자를 바꿔야 하는지 직관적으로 알기 어렵습니다.

HEX —— 웹의 간결한 색상 표기

HEX는 단순히 RGB를 16진수로 인코딩한 것입니다. 각 채널(10진수 0255)이 두 자리 16진수 문자열(00FF)이 되고, 전체에 #가 붙습니다.

255 10진수 = FF 16진수
128 10진수 = 80 16진수
  0 10진수 = 00 16진수

rgb(255, 128, 0)은 #FF8000이 됩니다. 간결하고 복사·붙여넣기가 편하며, HTML, CSS, 디자인 도구의 스와치에서 널리 사용됩니다.

각 채널의 두 자리가 동일하면 축약형을 사용할 수 있습니다: #FF8800 → #F80. CSS는 투명도가 있는 색상을 위한 8자리 형식 #RRGGBBAA도 지원합니다(예: #FF800080 = 50% 투명 오렌지).

HEX는 개발자에게 편리하지만 RGB보다 의미적으로 더 명확하지는 않습니다. 컬러 피커 없이 값을 조정하는 것은 여전히 시행착오입니다.

HSL —— 사람을 위한 모델

HSL(색상·채도·명도)은 색공간을 인간의 직관에 맞게 재구성합니다:

  • 색상 H: 색상환 각도, 0°~360°. 빨강 = 0°, 노랑 = 60°, 녹색 = 120°, 시안 = 180°, 파랑 = 240°, 마젠타 = 300°, 다시 빨강 = 360°.
  • 채도 S: 0%~100%. 0%에서 모든 색은 회색이 되고, 100%에서 가장 생생한 색이 됩니다.
  • 명도 L: 0%~100%. 0%는 항상 검은색, 100%는 항상 흰색, 50%가 "순수한" 색상입니다.

이렇게 하면 디자인 작업이 자연스러워집니다: *"이 색을 20% 밝게"*는 L: 50%를 70%로 바꾸면 됩니다. CSS hsl()은 디자인 시스템에서 널리 사용되며, 산술 연산으로 컴포넌트 수준의 색상 조정이 가능합니다.

HSL은 RGB 큐브를 원통형으로 재매핑한 것입니다. 변환은 계산적으로 가볍지만 지각적 약점이 있습니다: hsl(60, 100%, 50%)(노랑)은 hsl(240, 100%, 50%)(파랑)보다 훨씬 밝아 보입니다. 두 색의 L 값은 같은 50%인데도 불구하고요. 지각적 균일성이 필요하다면 Lab 또는 oklch를 사용하세요.

HSV / HSB —— Photoshop의 모델

HSV(색상·채도·명도값)는 HSB(Hue, Saturation, Brightness)라고도 하며, 구조적으로 HSL과 유사하지만 명도(Lightness) 대신 **값(Value)**을 사용합니다:

  • Value V: 0%~100%. V=0%이면 H와 S에 관계없이 항상 검은색. V=100%이면 최고 밝기(반드시 흰색은 아님).

실질적 차이: HSL에서 순수한 색은 L=50%에 있고, HSV에서는 V=100%, S=100%에 있습니다. HSL에서 L을 50% 이상 올리면 흰색이 섞이는(틴팅) 반면, HSV에는 기본적인 틴팅이 없어 S를 낮춰 흰색을 추가합니다.

Adobe Photoshop, Illustrator 등 대부분의 전문 컬러 피커는 HSV/HSB를 사용합니다. "완전 밝기" 모델은 생생한 색상을 고를 때 직관적입니다. 디자이너는 팔레트 제작에 HSV를, 개발자는 CSS 조작에 HSL을 선호하는 경향이 있습니다.

CMYK —— 인쇄 모델

CMYK(시안·마젠타·노랑·검정)는 감산 혼합 모델입니다. 가산 혼합인 RGB(빛을 더하면 흰색)와 달리, 감산 모델은 종이 위의 잉크로 작동합니다——각 잉크는 특정 파장을 흡수(감산)하고, 우리가 보는 것은 반사된 빛입니다.

  • 시안: 빨강을 흡수, 파랑+녹색을 반사
  • 마젠타: 녹색을 흡수, 빨강+파랑을 반사
  • 노랑: 파랑을 흡수, 빨강+녹색을 반사
  • 검정(Key): 그림자 깊이 향상 및 잉크 비용 절감 (CMY 혼합으로는 진짜 검은색이 나오기 어려움)

각 채널은 0~100%의 백분율로 표현됩니다. CMYK는 오프셋 인쇄, 패키징, 잡지 등 종이에 잉크를 인쇄하는 모든 매체의 표준입니다.

중요 경고: RGB와 CMYK는 완전히 호환되지 않습니다. 많은 선명한 RGB 색상(형광 녹색, 전기 파랑)은 CMYK 색역을 벗어나며 인쇄 시 더 칙칙하게 보입니다. 인쇄소에 파일을 보내기 전에 반드시 CMYK로 교정하세요.

CIE L*a*b* —— 지각적 균일성

Lab(CIELAB)은 동일한 수치적 거리가 동일한 지각적 색차에 대응하도록 설계된 장치 독립적 색공간입니다. 이전 모델들의 지각적 불균일성을 해결하기 위해 CIE가 1976년에 만들었습니다.

  • L*: 명도, 0(검정)~100(흰색)
  • a*: 녹색(음수)빨강(양수), 약 −128+127
  • b*: 파랑(음수)노랑(양수), 약 −128+127

Lab은 색채 과학의 황금 표준으로, 이미지 편집(Photoshop의 Lab 모드)과 색차 계산(ΔE)에 사용됩니다. ΔE < 1은 인간의 눈으로 구별 불가, ΔE < 3은 대부분의 인쇄 작업에서 허용 범위입니다.

Lab은 현대 CSS oklch()의 기반이며, 더 쉽게 사용할 수 있도록 극좌표계(명도·채도·색상)로 재포장되었습니다.

RGBA와 HSLA —— 투명도 추가

RGB와 HSL 모두 알파 채널을 지원합니다——0(완전 투명)~1(완전 불투명)의 네 번째 값으로, 각각 RGBA와 HSLA를 형성합니다.

rgba(255, 99, 71, 0.5)   /* 토마토 색, 50% 불투명 */
hsla(9, 100%, 64%, 0.7)  /* 같은 색, 70% 불투명 */

현대 CSS는 슬래시 구문도 지원합니다: rgb(255 99 71 / 50%). 알파 합성은 Porter-Duff "over" 연산을 따르며, 레이어 색상과 배경 콘텐츠를 알파 값에 따라 혼합합니다.

수학적 변환 공식

RGB ↔ HEX

// RGB를 HEX로 변환
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => Math.round(v).toString(16).padStart(2, '0'))
    .join('');
}

// HEX를 RGB로 변환
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

RGB ↔ HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // 무채색
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

색공간과 프로파일

색공간은 장치나 파일이 표현할 수 있는 가시 색상의 부분집합을 정의합니다:

색공간 커버 범위 주요 용도
sRGB 가시광의 약 35% 웹·표준 모니터·JPEG
Adobe RGB 가시광의 약 50% 전문 사진·인쇄
Display P3 가시광의 약 45% iPhone·Mac·최신 디스플레이
ProPhoto RGB 가시광의 약 90% RAW 사진 편집
Rec. 2020 가시광의 약 75% HDR 영상·4K 방송

웹 디자이너 대부분은 sRGB 환경에서 작업합니다. 이것이 CSS, PNG, JPEG의 기본 색공간입니다. 그러나 Safari와 Chrome은 이제 광색역 디스플레이를 위한 color(display-p3 ...) CSS 함수와 sRGB를 넘어서는 색상을 참조할 수 있는 oklch() 함수를 지원하고 있습니다.

ICC 프로파일은 색상 수치를 실제 빛에 어떻게 매핑할지를 소프트웨어에 알려주는 데이터 파일입니다. 이미지를 "프로파일 포함"으로 내보내면 ICC 프로파일이 파일에 포함되어 장치 간에 일관된 렌더링이 보장됩니다.

CSS에서의 색상 활용

CSS는 기본적인 HEX 값에서 풍부한 색상 생태계로 발전했습니다:

:root {
  --primary: #3B82F6;
  --primary-hsl: hsl(217, 91%, 60%);
  /* P3 광색역을 위한 oklch */
  --accent: oklch(70% 0.2 250);
}

.text-accessible {
  color: #1a1a1a;       /* 흰 배경에서 16.1:1 — AAA 레벨 */
  background: #ffffff;
}

명명된 색상: CSS는 aliceblue부터 yellowgreen까지 140개의 명명된 색상을 정의합니다. 가독성은 높지만 체계적인 디자인에는 유연성이 부족합니다.

현대 함수들:

  • rgb(255 99 71) — 공백 구분 현대 구문
  • hsl(9deg 100% 64%) — 읽기 쉽고 조정 용이
  • oklch(70% 0.2 250) — 지각적 균일, 광색역 지원
  • color(display-p3 1 0.389 0.279) — 명시적 광색역

CSS 사용자 정의 속성(변수)은 현대 테마링의 초석입니다. HSL 기반 변수로 산술 연산만으로 완전한 색상 스케일을 생성할 수 있고, 다크 모드 전환도 우아하게 처리할 수 있습니다.

접근성과 대비 비율

WCAG(웹 콘텐츠 접근성 지침)는 읽기 쉬운 텍스트를 위한 대비 비율 요건을 정의합니다:

  • AA 레벨: 일반 텍스트 4.5:1, 큰 텍스트 3:1(18pt 또는 14pt 굵게)
  • AAA 레벨: 일반 텍스트 7:1, 큰 텍스트 4.5:1

대비 비율은 상대 휘도로 계산합니다:

대비 비율 = (L1 + 0.05) / (L2 + 0.05)

L1은 밝은 색, L2는 어두운 색의 휘도입니다.

일반적인 안전한 조합: 검정(#000000) on 흰색(#ffffff) = 21:1(완벽한 AAA); #767676 회색 on 흰색 = 정확히 4.5:1(AA 통과).

디자인 도구에서의 색상 처리

Figma: 내부적으로 RGB로 색상을 저장합니다. 컬러 피커는 HEX, RGB, HSL, HSB, CSS 표기를 제공합니다. 디자인 토큰(변수)은 Figma Variables API를 통해 코드로 내보낼 수 있으며, CSS 사용자 정의 속성이나 JSON으로 출력됩니다.

Sketch: RGB 명명 스와치와 공유 색상 라이브러리를 사용합니다. 인쇄 결과물을 위한 CMYK 내보내기를 지원하며, Stark 같은 플러그인으로 WCAG 대비 검사가 가능합니다.

Adobe Photoshop / Illustrator: CMYK, Lab, 색상 프로파일 워크플로를 네이티브 지원합니다. Photoshop의 컬러 피커는 HSB(HSV)를 기본으로 사용합니다. Illustrator의 "아트웍 색상 변경"은 팔레트 조화 작업에 HSB를 사용합니다.

활용 사례: 브랜드, 토큰, 크로스미디어 일관성

브랜드 가이드라인은 조직의 권위 있는 색상 세트를 정의합니다. 완전한 브랜드 색상 사양은 다음과 같습니다:

Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6

이 다중 형식 사양은 티셔츠에 실크스크린으로 인쇄되든, 브로셔에 인쇄되든, 웹사이트에 표시되든 파란색이 일관되게 보이도록 보장합니다.

디자인 토큰은 의미론적 역할을 색상 값에 매핑하는 명명된 변수입니다. Style Dictionary 같은 도구로 토큰을 플랫폼별 파일로 변환할 수 있습니다: 웹용 CSS 변수, iOS용 Swift 상수, Android용 XML 리소스 등.

비교: HSL vs HSV, sRGB vs 광색역

HSL vs HSV: 둘 다 RGB에서 파생되며 지각적 균일성이 없습니다. HSL의 순수한 색은 L=50%에, HSV의 순수한 색은 V=100%, S=100%에 있습니다. HSV는 컬러 피커 UI에, HSL은 CSS 조작에 더 적합합니다. 진정한 지각적 균일성을 위해서는 oklch/Lab을 사용하세요.

sRGB vs 광색역: sRGB는 CIE 1931 가시광의 약 35%를 커버하며, 대부분의 웹 작업에 충분합니다. Display P3는 약 45%를 커버하며, 최신 Apple/Samsung 화면에서 더 선명한 녹색과 빨강을 표시할 수 있습니다. CSS @media (color-gamut: p3)으로 점진적 향상이 가능합니다.

색상 관리 모범 사례

  1. 색공간을 일찍 정한다——sRGB를 기본으로, P3로 점진적으로 확장.
  2. CSS 변수에는 HSL을 사용——수학적 색상 스케일 생성과 테마 전환이 용이.
  3. 브랜드 색상은 다중 형식으로 지정——Pantone, CMYK, RGB, HEX 모두 포함.
  4. 모든 텍스트-배경 조합에서 WCAG 대비를 확인.
  5. 내보낸 이미지에 ICC 프로파일을 포함.
  6. 디자인 시스템에서는 원시 HEX보다 의미론적 토큰 우선.
  7. 다크 모드에서 색상 테스트: HSL 기반 변수로 다크 모드 테마링이 우아해집니다.
  8. RGB = CMYK라고 가정하지 말 것: 중요한 색상 자산은 인쇄 업체와 교정을 확인하세요.
  9. 현대 CSS에는 oklch 고려——지각적 균일성과 광색역 지원을 겸비.
  10. 색상 결정을 문서화: 접근성 근거, 브랜드 역사, 감정적 의도를 기록하세요.

자주 묻는 질문

Q1: HEX와 RGB의 차이는 무엇인가요? 같은 정보를 다르게 표현한 것입니다. #FF8000과 rgb(255, 128, 0)은 완전히 동일한 색상으로, HEX는 단지 16진수 표기를 사용한 것입니다. HEX가 더 간결하고, RGB는 큰 숫자를 더 직관적으로 읽을 수 있습니다.

Q2: RGB 색상을 인쇄했더니 다르게 보이는 이유는? 화면은 가산 혼합(발광), 인쇄는 감산 혼합(잉크)입니다. 많은 선명한 화면 색상——특히 전기 파랑, 형광 녹색——은 잉크로 재현할 수 없어 가장 가까운 인쇄 가능한 색상으로 "색역 매핑"되어 더 칙칙하게 보입니다.

Q3: HSL과 HSV 중 어떤 것을 사용해야 하나요? CSS 작성이나 디자인 토큰 구축에는 HSL을 사용하세요. Photoshop/Illustrator 컬러 피커 작업이나 커스텀 컬러 피커 컴포넌트를 만들 때는 HSV를 사용하세요.

Q4: oklch란 무엇이고 HSL보다 왜 더 나은가요? oklch는 Oklab 지각 색공간을 사용하는 CSS 색상 함수입니다. HSL과 달리 색상에 걸쳐 일관된 지각적 밝기를 유지하며 광색역 Display P3 색상도 지원합니다.

Q5: 두 색상의 대비가 충분한지 어떻게 확인하나요? 각 색상의 상대 휘도를 계산한 후 (밝은 색 + 0.05) / (어두운 색 + 0.05)를 적용합니다. WCAG AA를 충족하려면 결과가 4.5 이상이어야 합니다. 본 도구에는 대비 검사기가 내장되어 있습니다.

Q6: 이 도구의 RGB→CMYK 변환은 정확한가요? 수학적 변환은 장치 독립적인 근사값입니다. 전문 인쇄 작업에는 특정 프린터와 용지에 맞는 ICC 색상 프로파일이 필요합니다. 본 도구는 추정치 참고에 적합합니다; 실제 인쇄 전에는 반드시 인쇄 업체와 교정을 확인하세요.

블로그로 돌아가기 색상 변환기 →