모든 CSS 파일에는 색상 형식이 섞여 있습니다. 디자이너가 HEX 코드를 전달하고, 브랜드 가이드에는 RGB 값이 있고, 애니메이션 라이브러리는 HSL을 기대합니다. 직접 변환하려면 공식을 외우거나 계산기를 열어야 합니다. 색상 변환기가 이 계산을 즉시 처리합니다.

색상 온라인 변환 →

4가지 주요 색상 형식

HEX

6자리 16진수가 빨강, 초록, 파랑 채널을 00(0%)부터 FF(100%)로 표현합니다:

color: #1a73e8;   /* Google 파랑 */
color: #fff;      /* #ffffff의 단축형 */

HEX는 웹 CSS에서 가장 많이 사용되는 형식입니다. 각 채널 자릿수가 반복되면 단축형(#rgb)을 사용할 수 있습니다——#ff6600 → #f60.

RGB

빨강, 초록, 파랑 세 정수(0〜255). CSS는 알파 채널(0〜1)이 있는 rgba()도 허용합니다:

color: rgb(26, 115, 232);
color: rgba(26, 115, 232, 0.8);  /* 80% 불투명도 */

RGB는 모니터 하드웨어에 직접 대응합니다. 채널을 프로그래밍 방식으로 조작할 때 유용합니다.

HSL

Hue(색조, 0〜360°), Saturation(채도, 0〜100%), Lightness(명도, 0〜100%):

color: hsl(217, 80%, 51%);
color: hsla(217, 80%, 51%, 0.8);

HSL은 가장 사람이 읽기 쉬운 형식입니다. 명도만 조정하면 색조나 채도를 변경하지 않고도 틴트와 셰이드를 만들 수 있습니다——색상 스케일 구축에 이상적입니다.

HSB / HSV

Hue(색조, 0〜360°), Saturation(채도, 0〜100%), Brightness(밝기, 0〜100%). CSS 네이티브 지원은 없지만 Figma, Photoshop, Illustrator의 기본 색상 모델입니다:

H: 217°  S: 89%  B: 91%

디자이너가 HSB 값을 전달하면 CSS 작성 전에 HEX 또는 RGB로 변환하세요.

HEX ↔ RGB: 변환 원리

HEX에서 RGB로: 2자리씩 분할하여 각각 16진수에서 10진수로 변환.

#1a73e8
  1a = 26
  73 = 115
  e8 = 232
→ rgb(26, 115, 232)

RGB에서 HEX로: 각 채널을 10진수에서 16진수로 변환하고 2자리가 되도록 0 패딩.

rgb(26, 115, 232)
  26 = 1a
 115 = 73
 232 = e8
→ #1a73e8

변환기가 두 방향 모두 즉시 처리합니다. 암산 불필요.

RGB ↔ HSL: 변환 원리

RGB와 HSL 변환에는 채널을 [0, 1]로 정규화하고, 최솟값/최댓값을 찾고, 색조, 채도, 명도에 각각 다른 공식을 적용하는 과정이 필요합니다. 코드로 작성하면 약 20줄입니다. 직접 계산하는 것보다 도구를 사용하세요.

중요한 것은 멘탈 모델입니다:

  • Hue(색조) = 어떤 색상 계열인가 (빨강, 노랑, 초록, 시안, 파랑, 마젠타)
  • Saturation(채도) = 얼마나 선명한가 vs 회색에 가까운가
  • Lightness(명도) = 검정(0%)에 얼마나 가까운가, 흰색(100%)에 얼마나 가까운가

실용적인 사용 사례

색상 스케일 구축

브랜드 HEX에서 시작해 HSL로 변환하고 명도만 변경합니다:

--brand-100: hsl(217, 80%, 95%);  /* 가장 밝은 틴트 */
--brand-300: hsl(217, 80%, 75%);
--brand-500: hsl(217, 80%, 51%);  /* 기본 색상 */
--brand-700: hsl(217, 80%, 35%);
--brand-900: hsl(217, 80%, 20%);  /* 가장 어두운 셰이드 */

L만 변경하면 지각적으로 일관된 틴트와 셰이드가 생성되기 때문에 이 기법이 효과적입니다.

디자인 인수인계 매칭

Figma와 Photoshop은 HSB가 기본입니다. 디자이너가 H:217 S:89 B:91을 공유할 때:

  1. 변환기의 HSB 입력에 붙여 넣기
  2. HEX 출력 복사
  3. CSS에서 사용

명암 대비 확인

전경색과 배경색 모두 RGB 휘도 값으로 변환하고 WCAG 공식 사용. 대부분의 명암 대비 체크기는 HEX 입력을 허용합니다——변환기가 어떤 소스 형식에서든 빠르게 HEX로 변환합니다.

CSS 사용자 정의 속성

CSS 변수 사용 시 HSL은 전처리기 없이 변형을 만드는 가장 쉬운 형식입니다:

:root {
  --primary-hue: 217;
  --primary-sat: 80%;
  --primary: hsl(var(--primary-hue), var(--primary-sat), 51%);
  --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 35%);
}

색상 형식 빠른 참조

형식예사용처
HEX#1a73e8HTML, CSS, SVG
RGBrgb(26, 115, 232)CSS, Canvas
RGBArgba(26, 115, 232, 0.8)CSS (투명도 포함)
HSLhsl(217, 80%, 51%)CSS, 색상 스케일
HSLAhsla(217, 80%, 51%, 0.8)CSS (투명도 포함)
HSB/HSVH:217 S:89 B:91Figma, Photoshop

자주 하는 실수

HSL 명도와 HSB 밝기 혼동: HSL L=50%는 “순수한” 색상입니다. HSB B=100%는 완전한 채도의 순수한 색상입니다. 같은 스케일이 아닙니다.

불투명도 잊기: rgb()는 불투명합니다. 디자인에서 투명도를 사용한다면 rgba() 또는 hsla()가 필요합니다.

JavaScript에서 단축형 HEX: #f60은 유효한 CSS이지만 일부 JavaScript 색상 파싱 라이브러리에서는 유효하지 않습니다. 확신이 없으면 #ff6600으로 확장하세요.

브라우저 DevTools와 디자인 앱을 오가는 것을 그만하세요. 색상 변환기 사용하기 →