색상 코드 이해하기: HEX, RGB, HSL 완벽 설명

웹 개발의 색상 코드

웹에서 보는 모든 색상은 코드로 표현됩니다. 이 코드들을 이해하는 것은 웹 개발자와 디자이너에게 필수적입니다. CSS를 작성하는 것뿐만 아니라 디자이너와 소통하고, 레이아웃 문제를 디버깅하고, 접근성 있는 인터페이스를 구축하는 데도 중요합니다.

일상적으로 만나게 되는 세 가지 주요 색상 형식이 있습니다: HEX, RGB, HSL. 각각 장단점이 있으며, 언제 어떤 것을 사용해야 하는지 알면 작업이 훨씬 수월해집니다.

HEX 색상

HEX(16진수)는 웹에서 가장 흔한 색상 형식입니다. HTML 초기부터 사용되어 왔고, CSS 파일, Figma나 Sketch 같은 디자인 도구, 브랜드 가이드라인 등 어디서나 볼 수 있습니다.

형식: #RRGGBB

• 각 쌍은 빨강, 초록, 파랑(0-255)을 나타냅니다
• 값 범위: 00(0)에서 FF(255)
• # 접두사는 브라우저에게 HEX 색상임을 알려줍니다

예시

• #FF0000 = 순수한 빨강
• #00FF00 = 순수한 초록
• #0000FF = 순수한 파랑
• #FFFFFF = 흰색
• #000000 = 검정

축약형

각 쌍의 숫자가 동일하면 축약할 수 있습니다: #FF6633 → #F63

브라우저가 각 자릿수를 반복하여 확장합니다: #F63은 #FF6633이 됩니다. 하지만 #F37A21은 각 쌍의 숫자가 다르므로 축약할 수 없습니다.

HEX와 알파(투명도)

최신 브라우저는 마지막 두 자리가 불투명도를 제어하는 8자리 HEX 코드를 지원합니다:

color: #3B82F680;  /* 50% 불투명도의 파랑 */

알파 값 80은 16진수로 10진수 128에 해당하며, 최대값 255의 약 50%입니다. 기억해두면 좋은 알파 값:

• FF = 100% (완전 불투명)
• BF = 75%
• 80 = 50%
• 40 = 25%
• 00 = 0% (완전 투명)

RGB 색상

RGB는 Red, Green, Blue의 약자입니다. 각 채널에 10진수(0-255)를 사용하며, 16진수 표기법보다 직관적으로 느끼는 사람이 많습니다.

형식: rgb(빨강, 초록, 파랑)

color: rgb(59, 130, 246);    /* 파랑 */
color: rgba(59, 130, 246, 0.5);  /* 50% 투명한 파랑 */

최신 RGB 구문

CSS에는 rgba()를 없애고 rgb()에 선택적 알파를 추가하는 새로운 구문이 있습니다:

/* 최신 구문 -- 모든 현재 브라우저에서 지원 */
color: rgb(59 130 246);           /* 쉼표 없음 */
color: rgb(59 130 246 / 0.5);    /* 슬래시로 알파 지정 */
color: rgb(59 130 246 / 50%);    /* 퍼센트로 알파 지정 */

이 깔끔한 구문은 모든 최신 브라우저에서 완전히 지원되며, 레거시 시스템을 대상으로 하지 않는다면 채택할 가치가 있습니다.

RGB가 유용한 이유

RGB는 프로그래밍으로 색상을 조작할 때 빛을 발합니다. 각 채널이 0에서 255까지의 단순한 숫자이므로, JavaScript나 다른 프로그래밍 언어에서 색상을 쉽게 조정할 수 있습니다:

// 모든 채널을 높여 색상을 밝게
function lighten(r, g, b, amount) {
  return [
    Math.min(255, r + amount),
    Math.min(255, g + amount),
    Math.min(255, b + amount)
  ];
}

RGB는 대부분의 컬러 피커 API와 이미지 처리 라이브러리의 기본 형식이기도 해서 변환 오버헤드를 피할 수 있습니다.

HSL 색상

HSL은 Hue(색상), Saturation(채도), Lightness(명도)의 약자입니다. 사람이 실제로 색상을 생각하는 방식에 가까워서 더 직관적입니다.

형식: hsl(색상, 채도%, 명도%)

• 색상(Hue): 0-360 (색상환 위치)
  • 0/360 = 빨강
  • 120 = 초록
  • 240 = 파랑
• 채도(Saturation): 0-100% (회색 → 선명)
  • 0% = 완전히 탈색 (회색)
  • 100% = 완전히 채도 있음 (선명한 색)
• 명도(Lightness): 0-100% (검정 → 흰색)
  • 0% = 순수한 검정
  • 50% = 순수한 색상
  • 100% = 순수한 흰색

color: hsl(217, 91%, 60%);   /* 파랑 */
color: hsl(0, 100%, 50%);    /* 빨강 */
color: hsl(120, 100%, 50%);  /* 초록 */

HSL이 디자인 시스템에서 강력한 이유

HSL의 진정한 힘은 색상 변형을 만들어야 할 때 드러납니다. 브랜드 기본 색상이 hsl(217, 91%, 60%)이라면, 전체 그라데이션 팔레트를 만드는 것이 매우 간단합니다:

:root {
  --blue-50:  hsl(217, 91%, 97%);   /* 거의 흰색 */
  --blue-100: hsl(217, 91%, 93%);
  --blue-200: hsl(217, 91%, 84%);
  --blue-300: hsl(217, 91%, 72%);
  --blue-400: hsl(217, 91%, 60%);   /* 기본 색상 */
  --blue-500: hsl(217, 91%, 50%);
  --blue-600: hsl(217, 91%, 40%);
  --blue-700: hsl(217, 91%, 30%);
  --blue-800: hsl(217, 91%, 20%);
  --blue-900: hsl(217, 91%, 10%);   /* 거의 검정 */
}

같은 색조와 채도를 유지하고 명도만 조절합니다. 결과는 서로 잘 어울리는 조화로운 그라데이션 세트입니다. HEX 코드로 이것을 하려면 계산기나 디자인 도구가 필요합니다.

HSL로 색상 조화 만들기

색조가 색상환(0-360도)에서의 위치이므로, 색상 조화를 만드는 것은 단순한 산술입니다:

• 보색: 색조에 180을 더함 (hsl(217, 91%, 60%) → hsl(37, 91%, 60%))
• 삼원색 조화: 120과 240을 더함 (hsl(217, ...), hsl(337, ...), hsl(97, ...))
• 유사색: 30을 더하거나 뺌 (hsl(187, ...), hsl(217, ...), hsl(247, ...))

이것이 많은 디자인 시스템과 CSS 프레임워크가 내부적으로 HSL을 사용하는 이유 중 하나입니다.

HSL과 알파

RGB처럼 HSL도 투명도를 지원합니다:

color: hsl(217, 91%, 60%, 0.5);      /* 기존 구문 */
color: hsl(217 91% 60% / 50%);       /* 최신 구문 */

CSS 기본 색상명

CSS에는 red, steelblue, papayawhip, rebeccapurple 같은 147개의 기본 색상명이 포함되어 있습니다. 프로토타이핑이나 빠른 데모에는 편리하지만, 프로덕션 코드에서는 거의 사용하지 않습니다:

• 유연하지 않음 (밝기나 불투명도를 쉽게 조절할 수 없음)
• 이름이 오해를 불러일으킬 수 있음 (darkgray가 실제로 gray보다 밝음)
• 브랜드 색상이 기본 색상명과 정확히 일치할 일이 없음

다만 transparent와 currentColor는 진정으로 유용한 두 가지 기본값입니다. currentColor는 현재 텍스트 색상을 상속받으므로, 주변 텍스트와 일치해야 하는 SVG 아이콘이나 테두리에 편리합니다.

언제 어떤 형식을 사용할까?

형식	적합한 용도
HEX	빠른 인라인 색상, 대부분의 CSS, 브랜드 가이드라인
RGB/RGBA	프로그래밍 색상 조작, 캔버스 작업
HSL/HSLA	디자인 시스템, 그라데이션 팔레트 생성, 테마

실무 권장사항: 새 프로젝트에서는 HSL을 기본으로 사용하세요. 테마 색상을 HSL 커스텀 프로퍼티로 정의하면 명도 값만 조절하여 라이트/다크 모드 전환이 쉬워집니다. 디자인 도구에서 색상을 가져올 때는 HEX도 괜찮지만, 변수에는 HSL로 변환하세요.

색상 변환 공식

HEX → RGB

6자리 16진수 문자열을 세 쌍으로 나누고 각각을 16진수에서 10진수로 변환합니다:

#3B82F6 → 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGB → HSL

이 변환은 더 많은 수학이 필요합니다. 대략적인 단계:

1. R, G, B를 0-1 범위로 정규화 (255로 나눔)
2. 최대값과 최소값 찾기
3. 명도 = (최대 + 최소) / 2
4. 최대와 최소가 같으면 채도는 0 (회색)
5. 그렇지 않으면 명도에 따라 채도 계산
6. 어떤 채널이 최대인지에 따라 색조 계산

이것을 외울 필요는 없습니다. 도구를 사용하세요. 하지만 관계를 이해하면 색상 문제를 디버깅하는 데 도움이 됩니다.

자주 하는 색상 실수와 피하는 방법

1. 대비 비율 무시

WCAG 2.1은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 대비 비율을 요구합니다. 흰 배경 위의 연한 회색 텍스트가 목업에서는 우아해 보일 수 있지만, 접근성 기준에 미달하며 밝은 햇빛이나 저가 모니터에서는 읽기가 정말 어렵습니다.

2. 순수한 검정과 순수한 흰색 사용

#000000 위에 #FFFFFF는 최대 대비(21:1)를 만들어 장시간 읽기에 눈의 피로를 유발할 수 있습니다. 많은 디자인 시스템은 #1a1a1a과 #FAFAFA 같이 약간 부드러운 조합을 사용합니다. WCAG AAA를 통과하면서도 눈에 더 편합니다.

3. 맥락에서 색상 테스트 안 하기

작은 색상 칩에서 좋아 보이는 색상이 큰 배경 영역에 적용하면 압도적일 수 있습니다. 항상 실제 크기에서 테스트하세요. 전체 화면을 배경색으로 채우고 실제 텍스트를 올려본 후에 확정하세요.

4. 너무 많은 색상

초보자의 흔한 실수는 너무 많은 고유한 색상을 사용하는 것입니다. 대부분의 전문 사이트는 2-3개의 기본 색상과 중립 팔레트(회색 계열)를 사용합니다. 여섯 번째나 일곱 번째 고유한 색조를 찾고 있다면, 한 발 물러서서 단순화하세요.

5. 색상에만 의존하기

정보 전달에 색상만 사용하지 마세요. 오류 메시지가 빨간 텍스트로만 표시되면, 색각 이상자(남성의 약 8%)가 놓칠 수 있습니다. 항상 아이콘, 패턴 또는 텍스트 라벨과 색상을 함께 사용하세요.

실무 색상 워크플로우

대부분의 웹 프로젝트에서 잘 작동하는 실용적인 워크플로우입니다:

1. 기본 색조 선택 HSL로 (예: hsl(217, 91%, 60%))
2. 그라데이션 스케일 생성 명도를 5%에서 97%까지 변화
3. 중립 회색 선택 기본 색조의 힌트를 포함 (예: hsl(217, 10%, 50%))
4. 회색 그라데이션 생성 같은 방법으로
5. 강조 색상 추가 절제하여 -- 성공(초록), 오류(빨강), 경고(황색) 각 하나씩
6. 모든 텍스트/배경 조합의 대비 확인
7. 모든 것을 CSS 커스텀 프로퍼티로 정의 테마 전환이 쉽도록

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 93%);
  --primary-dark: hsl(217, 91%, 35%);
  --text: hsl(217, 15%, 15%);
  --text-muted: hsl(217, 10%, 45%);
  --surface: hsl(217, 20%, 98%);
  --error: hsl(0, 72%, 51%);
  --success: hsl(142, 71%, 45%);
}

지금 색상을 변환하세요

색상 선택기 & 변환기로 HEX, RGB, HSL, RGBA 간 즉시 변환하세요. 색상 대비 검사기로 대비 비율도 확인할 수 있습니다.