같은 색상, 네 가지 다른 언어

이 코랄색을 보세요. 정확히 같은 색이지만 네 가지 다른 방식으로 쓸 수 있습니다:

  • HEX: #FF6F61
  • RGB: rgb(255, 111, 97)
  • HSL: hsl(5, 100%%, 69%%)
  • CMYK: 0, 56, 62, 0

각 형식에는 고유한 목적이 있습니다. 잘못된 형식을 선택해도 프로젝트가 망가지지는 않지만, 올바른 형식을 선택하면 시간을 절약하고, 변환 오류를 피하고, 모든 플랫폼에서 브랜드 일관성을 유지할 수 있습니다.

이 가이드는 각각을 언제 사용해야 하는지 실제 예제와 불어 참조표로 정확히 설명합니다.

HEX: 웹 표준

무엇인가: 빨강, 초록, 파랑 값을 나타내는 6자리 16진수 코드. 항상 #로 시작합니다. 예: #FF6F61은 빨강 255, 초록 111, 파랑 97을 의미합니다.

HEX를 사용해야 할 때

  • CSS 스타일시트 — 대부분의 웹 개발자가 사용하고 기대하는 기본 형식입니다.
  • 디자인 도구 — Figma, Sketch, Canva는 색상 선택기에서 HEX를 눈에 띄게 표시합니다.
  • 브랜드 가이드라인 — 대부분의 브랜드 가이드라인은 복사 붙여넣기가 쉬운 HEX로 색상을 기재합니다.
  • 커뮤니케이션 — Slack이나 이메일에서 정확한 색상을 공유할 때 HEX는 보편적으로 이해됩니다.

HEX를 사용하지 말아야 할 때

  • 투명도가 필요할 때 — HEX는 알파를 기본적으로 지원하지 않습니다. 8자리 HEX(#FF6F6180)를 사용할 수 있지만 도구 간 지원이 일관되지 않습니다.
  • 프로그래밍 색상 조작 — HEX 색상을 밝게 하거나 어둡게 하려면 먼저 변환이 필요합니다.
  • 인쇄 디자인 — 인쇄는 CMYK를 사용합니다. HEX를 인쇄소에 보내면 색상 불일치가 보장됩니다.

실제 예시: CSS 변수

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: 화면 색상 모델

무엇인가: 빨강, 초록, 파랑을 나타내는 세 숫자(0–255) — 화면이 방출하는 실제 빛의 색상. 예: rgb(255, 111, 97).

RGB를 사용해야 할 때

  • 투명도 (RGBA) — rgba(255, 111, 97, 0.5)로 불투명도를 정확하게 제어할 수 있습니다. CSS에서 반투명 색상을 위한 가장 널리 지원되는 방법입니다.
  • 앱 개발 — Swift, Kotlin, Flutter는 내부적으로 RGB 값을 사용합니다. RGB로 작업하면 불필요한 변환을 피할 수 있습니다.
  • LED 조명 및 IoT — LED 스트립과 스마트 전구는 RGB 값을 기대합니다.
  • 색상 수학 — 두 색을 섞거나 보간하는 것은 RGB에서 간단한 산술입니다.

RGB를 사용하지 말아야 할 때

  • 인쇄 디자인 — RGB 값은 잉크 혼합에 직접 대응하지 않습니다. 인쇄소에 보내기 전에 항상 CMYK로 변환하세요.
  • 채도나 밝기 조정 — RGB에서 채도를 변경하려면 복잡한 공식이 필요합니다. HSL이 훨씬 쉽습니다.

실제 예시: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: 디자이너의 형식

무엇인가: 세 값 — 색상(0–360°, 색상환에서의 위치), 채도(0–100%%, 회색에서 선명함까지), 명도(0–100%%, 검정에서 흰색까지). 예: hsl(5, 100%%, 69%%).

HSL을 사용해야 할 때

  • 디자인 시스템 — 색상과 채도를 고정하고 명도만 변경하여 완전한 색상 스케일을 만들 수 있습니다.
  • 다크 모드 — 어두운 변형을 생성하는 것은 명도를 줄이는 것만큼 간단합니다. 추측도 공식도 필요 없습니다.
  • 프로그래밍 색상 생성 — 등간격의 12색이 필요하신가요? 채도와 명도를 같게 유지하고 색상을 30°씩 증가시키세요.
  • 접근성 — 명도 값을 직접 읽을 수 있어 대비 확인이 더 직관적입니다.

HSL을 사용하지 말아야 할 때

  • 팀 간 커뮤니케이션 — 대부분의 사람들은 색상/채도/명도로 생각하지 않습니다. 대화에서는 HEX나 RGB가 더 명확합니다.
  • 인쇄 워크플로우 — HSL에는 인쇄의 직접적인 등가물이 없습니다. 먼저 CMYK로 변환하세요.

실제 예시: Tailwind CSS 색상 스케일

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK: 인쇄 형식

무엇인가: 네 값 — 시안, 마젠타, 노랑, 검정(Key). RGB(빛을 더함)와 달리 CMYK는 감산혼색 — 흰 종이에서 빛을 흡수하는 잉크의 양을 설명합니다. 예: 0, 56, 62, 0.

CMYK를 사용해야 할 때

  • 모든 인쇄물 — 명함, 포스터, 패키지, 잡지. 인쇄소를 거치는 것이라면 CMYK여야 합니다.
  • InDesign과 인쇄 워크플로우 — 색역 밖 색상으로 인한 놓라움을 피하기 위해 처음부터 CMYK로 디자인하세요.
  • 색상 교정 — 화면 교정은 프린터 출력을 시뮬레이션하는데, 소스 색상이 이미 CMYK인 경우에만 작동합니다.

CMYK를 사용하지 말아야 할 때

  • 화면 — 모니터는 빛(RGB)을 사용합니다. CMYK 값은 변환이 필요하며, 변환은 항상 근사치입니다.
  • 사진 편집 — 편집 중에는 RGB로 작업하세요. 인쇄할 경우에만 마지막 단계로 CMYK로 변환하세요.

실제 예시: Illustrator에서 내보내기

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

빠른 참조 표

형식예시최적 용도색역투명도가독성인쇄 안전
HEX#FF6F61웹, CSS, 브랜드 가이드1670만 색제한적 (8자리)높음아니오
RGBrgb(255,111,97)화면, 앱, LED1670만 색예 (RGBA)보통아니오
HSLhsl(5,100%%,69%%)디자인 시스템, 테마1670만 색예 (HSLA)높음아니오
CMYK0,56,62,0인쇄, 패키지RGB보다 작음아니오낮음예

치트 시트: 프로젝트 유형 → 색상 형식

프로젝트 유형형식이유
CSS 웹사이트HEX업계 표준, 빠른 복사 붙여넣기
모바일 앱 (iOS/Android)RGB / RGBA네이티브 프레임워크가 내부적으로 RGB 사용
디자인 시스템 / 토큰HSL명도만 변경하여 쉽게 스케일 생성
다크 모드HSL명도 줄이고, 색상과 채도 유지
HTML 이메일HEX이메일 클라이언트와 최상의 호환성
명함CMYK인쇄소에서 정확한 잉크 일치
SNS 그래픽HEX / RGB화면 표시용, 둘 다 가능
LED 조명 / IoTRGB하드웨어가 3개의 8비트 채널 기대
접근성 검사HSL명도가 대비를 빠르게 표시
제품 패키지CMYK + Pantone브랜드를 위한 정확한 잉크 색상

변환: 알아야 할 것들

  • HEX ↔ RGB — 무손실 변환. 같은 색상 모델의 다른 표현입니다. #FF6F61은 정확히 rgb(255, 111, 97)입니다.
  • RGB ↔ HSL — 무손실 변환. 같은 색상 세트의 다른 수학적 표현입니다.
  • RGB → CMYK — 손실 변환. CMYK의 색역은 RGB보다 작습니다. 화면의 선명한 색상은 인쇄 시 척척해 보일 수 있습니다.
  • CMYK → RGB — 결과는 사용된 ICC 프로파일에 따라 달라집니다. 같은 CMYK 값이라도 프로파일이 다르면 다르게 보일 수 있습니다.

Color Picker Camera 앱은 네 가지 형식을 동시에 표시합니다. 현실 세계의 어떤 색상에든 향하여 HEX, RGB, HSL, CMYK를 즉시 확인하세요. 수동 변환이 필요 없습니다.

흔한 실수 (그리고 피하는 방법)

1. RGB를 인쇄소에 보내기

프린터는 잉크를 섞지, 빛을 섞지 않습니다. RGB 파일을 보내면 인쇄소 소프트웨어가 CMYK 변환을 추측하며, 화면에서 보이는 것과 일치하는 경우는 거의 없습니다. 인쇄는 항상 처음부터 CMYK로 디자인하세요.

2. HEX를 투명도에 사용하기

8자리 HEX(#FF6F6180)는 존재하지만 많은 도구가 인식하지 못합니다. 신뢰할 수 있는 투명도를 위해 rgba() 또는 hsla()를 사용하세요.

3. HEX만으로 디자인 시스템 구축하기

HEX 코드에서 밝은 톤과 어두운 톤을 생성하려면 시행착오가 필요합니다. HSL을 사용하면 명도를 직접 변경하여 색상 스케일을 예측 가능하고 일관되게 만들 수 있습니다.

4. CMYK → HEX 변환 시 같은 색상 기대하기

CMYK는 RGB/HEX보다 색역이 작습니다. 다시 변환하면 색상이 근사치로 표현되어 척척해 보이거나 약간 변할 수 있습니다. 항상 시각적으로 확인하세요.

자주 묻는 질문

HEX와 RGB의 차이점은?

사용 가능한 색상 측면에서는 차이가 없습니다. 둘 다 동일한 1670만 색을 커버합니다. HEX는 RGB 값을 16진수 표기법으로 짧게 쓴 것입니다. #FF6F61 = rgb(255, 111, 97). 유일한 실용적 차이는 투명도 지원입니다: RGB에는 RGBA가 내장되어 있지만 8자리 HEX는 지원이 제한적입니다.

CMYK는 언제 사용해야 하나요?

디자인이 물리적으로 인쇄될 때마다: 명함, 브로셔, 포스터, 패키지. 화면에서만 볼 것이라면 HEX, RGB 또는 HSL을 사용하세요.

HSL이 RGB보다 낫나요?

더 낫은 것이 아니라 디자이너에게 더 이해하기 쉼습니다. 색상 스키마 생성, 다크 모드 테마 생성, 접근성 대비 확인에는 HSL이 더 직관적입니다. 프레임워크가 RGB 값을 기대하는 앱 개발에는 RGB를 사용하세요.

4가지 색상 형식을 동시에 보여주는 앱이 있나요?

네. Color Picker Camera를 사용하면 스마트폰을 현실 세계의 어떤 색상에든 향하여 한 화면에서 HEX, RGB, HSL, CMYK 값을 즉시 확인할 수 있습니다. iOS와 Android에서 사용 가능합니다.

결론

웹에는 HEX. 앱과 화면에는 RGB. 디자인 시스템과 테마에는 HSL. 인쇄에는 CMYK.

현실 세계의 색상을 다룬다면 — 페인트칠된 벽, 원단 샘플, 간판의 로고 — Color Picker Camera가 현실 세계 색상 계산기로 작동합니다. 향하고, 캡처하고, 네 가지 형식을 즉시 얻으세요.

iOS용 다운로드 Android용 다운로드