색상 변환기 완벽 가이드 - HEX·RGB·HSL 한 번에 변환 | HMApps

색상 코드, 매번 헷갈리지 않으셨나요?

웹 개발이나 UI 디자인을 하다 보면 색상 코드를 다루는 일이 생각보다 훨씬 잦습니다. 디자이너가 Figma에서 #1A73E8을 건네줬는데, 코드에는 rgba()로 넣어야 할 때, 또는 CSS filter를 쓰려면 HSL 값이 필요한데 HEX밖에 없을 때 — 이럴 때마다 구글 검색창을 열거나 계산기를 꺼내 쓰셨다면, 오늘 소개할 HMApps 색상 변환기가 그 불편함을 해소해 드립니다.

색상 변환기는 HEX, RGB, HSL, HSV 네 가지 색상 형식을 실시간으로 상호 변환해 주는 도구입니다. 별도 설치 없이 브라우저에서 바로 사용할 수 있고, 변환 결과를 클립보드에 복사하는 기능까지 내장되어 있어 개발 워크플로우에 바로 녹여 쓸 수 있습니다.

색상 형식 4가지, 각각 언제 쓰나요?

먼저 4가지 색상 형식의 개념과 사용 맥락을 간단히 살펴보겠습니다.

1. HEX (16진수 색상)

#RRGGBB 형식으로 표기하며, 각 채널(빨강·초록·파랑)을 00~FF 범위의 16진수 두 자리로 나타냅니다. HTML 속성, CSS, SVG 파일, 디자인 툴에서 가장 보편적으로 쓰입니다.

/* 예시 */
color: #1A73E8;        /* 구글 블루 */
background: #FF6B6B;   /* 코랄 레드 */
border-color: #2ECC71; /* 에메랄드 그린 */

• 축약형: #RGB (예: #F0A = #FF00AA)
• 투명도 포함: #RRGGBBAA (CSS4 지원)

2. RGB (빨강·초록·파랑)

각 채널을 0~255 범위의 정수로 표현합니다. CSS에서 rgb() 또는 rgba() 함수로 사용하며, 투명도가 필요할 때 rgba(R, G, B, A) 형태로 씁니다.

color: rgb(26, 115, 232);
background: rgba(26, 115, 232, 0.15); /* 15% 불투명 */

자바스크립트 Canvas API, WebGL, SVG 필터 등에서 자주 쓰입니다.

3. HSL (색조·채도·명도)

색상 이론에 가장 직관적인 형식입니다. H(Hue, 색조)는 색상환 각도 0~360°, S(Saturation, 채도)와 L(Lightness, 명도)은 0~100% 퍼센트로 표현합니다.

color: hsl(214, 80%, 51%);             /* 구글 블루와 동일 */
background: hsla(214, 80%, 51%, 0.2); /* 투명도 추가 */

왜 HSL이 유용할까요? 같은 색조(H)를 유지하면서 명도만 올리면 밝은 변형색, 채도만 낮추면 회색조 변형색을 쉽게 만들 수 있습니다. 테마 색상 팔레트를 코드로 직접 조작할 때 HSL이 가장 강력합니다.

4. HSV / HSB (색조·채도·명도)

HSL과 비슷하지만 V(Value, 값) 또는 B(Brightness, 밝기) 개념이 다릅니다. HSV에서 V=100%는 "가장 밝은 그 색상 자체", HSL에서 L=100%는 흰색에 해당합니다. 포토샵, 일러스트레이터, Sketch 등 그래픽 툴의 색상 피커가 대부분 HSV를 사용합니다.

색상 변환기 사용법

색상 변환기는 매우 직관적으로 설계되어 있습니다. 아래 순서로 사용하세요.

Step 1: 색상 입력

색상 피커(팔레트 아이콘)를 클릭하거나, HEX 입력란에 직접 코드를 붙여넣습니다. # 기호 유무와 관계없이 인식하며, 3자리 축약형(F0A)도 자동으로 6자리로 확장합니다.

Step 2: 실시간 변환 확인

입력과 동시에 HEX, RGB, HSL, HSV 네 가지 형식의 결과값이 모두 화면에 표시됩니다. 색상 미리보기 블록도 함께 업데이트되어 실제 색상을 즉시 확인할 수 있습니다.

Step 3: 원하는 형식 복사

각 형식 옆의 복사 버튼을 클릭하면 해당 값이 클립보드에 복사됩니다. 예를 들어 RGB 값을 복사해 CSS 파일에 바로 붙여넣기 할 수 있습니다.

Step 4: 다른 형식으로 역변환

HEX 외에 RGB나 HSL 값을 직접 입력해도 다른 형식으로 변환됩니다. HSL 슬라이더를 드래그하며 색상을 탐색하는 방식도 지원합니다.

실전 활용 사례 5가지

사례 1: 디자이너-개발자 협업

Figma나 Zeplin에서 추출한 #E53935(레드) 값을 CSS 변수로 관리하면서, 동시에 JavaScript 애니메이션 라이브러리에 RGB 형식으로 넘겨야 할 때:

/* 색상 변환기 결과 */
HEX: #E53935
RGB: rgb(229, 57, 53)
HSL: hsl(1, 76%, 55%)
HSV: hsv(1, 77%, 90%)

/* CSS 변수로 선언 */
:root {
  --color-danger: #E53935;
  --color-danger-rgb: 229, 57, 53; /* rgba() 조합용 */
}

/* 사용 */
background: rgba(var(--color-danger-rgb), 0.1);

사례 2: CSS filter로 SVG 아이콘 색상 변경

img 태그로 불러온 SVG 아이콘의 색상을 CSS로 바꾸려면 filter 속성에 HSL 기반 계산이 필요합니다. 색상 변환기로 목표 색상의 HSL 값을 확인한 뒤 CSS Filter Generator 도구와 조합해 사용합니다.

사례 3: 테마 팔레트 생성

브랜드 컬러 hsl(214, 80%, 51%)를 기준으로 명도(L)만 조절해 자연스러운 색상 단계를 만들 수 있습니다:

--color-primary-100: hsl(214, 80%, 95%); /* 매우 밝음 */
--color-primary-300: hsl(214, 80%, 75%);
--color-primary-500: hsl(214, 80%, 51%); /* 기준 */
--color-primary-700: hsl(214, 80%, 35%);
--color-primary-900: hsl(214, 80%, 20%); /* 매우 어두움 */

사례 4: 접근성(대비율) 검토

WCAG 2.1 기준 텍스트 가독성을 위해서는 배경과 텍스트 색상 간 대비율이 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상이어야 합니다. 색상 변환기로 RGB 값을 확인하고, 상대 휘도(relative luminance) 공식에 대입해 검토합니다.

/* 상대 휘도 계산 (간략화) */
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

사례 5: 그라디언트 중간값 계산

두 색상 사이의 자연스러운 그라디언트를 만들 때, 시작과 끝 색상을 RGB로 변환한 뒤 채널별로 선형 보간하면 원하는 단계의 중간 색상을 정확히 구할 수 있습니다.

/* 파랑 #1A73E8 → 초록 #2ECC71 중간색 (50%) */
R: Math.round((26 + 46) / 2) = 36   → #24
G: Math.round((115 + 204) / 2) = 160 → #A0
B: Math.round((232 + 113) / 2) = 173 → #AD

결과: #24A0AD (청록색 계열)

색상 변환 공식 — 직접 이해하고 싶은 분들을 위해

HEX → RGB

각 두 자리 16진수를 10진수로 변환합니다.

#1A73E8
R = 0x1A = 26
G = 0x73 = 115
B = 0xE8 = 232
→ rgb(26, 115, 232)

RGB → HSL

R, G, B 값을 0~1 범위로 정규화한 뒤 수식을 적용합니다.

r = 26/255 = 0.102, g = 115/255 = 0.451, b = 232/255 = 0.910

max = 0.910 (b), min = 0.102 (r)
L = (max + min) / 2 = 0.506 → 약 51%
S = (max - min) / (1 - |2L - 1|) = 0.808 / 0.988 ≈ 0.80 → 80%
H = 60 × (r - g) / (max - min) + 240 = 214°

→ hsl(214, 80%, 51%)

RGB → HSV

max = 0.910, min = 0.102
V = max = 0.910 → 91%
S = (max - min) / max = 0.808 / 0.910 ≈ 0.888 → 89%
H = 214° (위와 동일 방식)

→ hsv(214, 89%, 91%)

색상 변환기 활용 팁 & 주의사항

✅ 유용한 팁

• CSS 변수 시스템에 HEX 대신 HSL 사용하기: --primary: 214 80% 51%처럼 숫자만 저장하면 hsl(var(--primary)), hsla(var(--primary) / 0.5)로 유연하게 활용 가능합니다.
• 다크 모드 대응: HSL에서 L(명도)만 낮추면 동일한 색조의 다크 버전을 쉽게 만들 수 있습니다. hsl(214, 80%, 51%) → hsl(214, 80%, 65%) (다크 모드에서 더 밝게)
• Tailwind CSS 커스텀 색상: Tailwind v3+에서는 HSL 값을 그대로 CSS 변수로 연결해 사용합니다. 색상 변환기로 HSL을 확인하고 tailwind.config에 등록하세요.
• 투명도 처리: HEX에 투명도를 추가하려면 뒤에 두 자리를 더 붙입니다. #1A73E8FF(불투명) → #1A73E880(50% 투명). 하지만 브라우저 호환성을 위해 rgba()나 hsla()가 더 안전합니다.

⚠️ 주의사항

• HSL ↔ HSV 혼동 주의: 두 형식 모두 H(색조)는 같지만 S와 L/V 값이 다릅니다. 포토샵에서 복사한 HSB 값을 CSS의 HSL로 착각하고 붙여넣으면 색상이 달라집니다.
• 색역(Color Gamut) 한계: 모든 변환은 sRGB 색역 내에서 이루어집니다. Display P3나 AdobeRGB 등 넓은 색역 색상은 sRGB로 변환 시 색상 손실이 발생할 수 있습니다.
• 반올림 오차: 부동소수점 연산 특성상 HEX → HSL → HEX 역변환 시 마지막 자리에서 ±1 오차가 생길 수 있습니다. 디자인 토큰 관리 시 원본 HEX를 기준 소스로 사용하세요.
• 구형 브라우저 대응: hsl()은 IE9+부터 지원되지만 CSS4의 hsl(H S% L% / alpha) 슬래시 문법은 IE에서 지원하지 않습니다. IE 지원이 필요하면 hsla()를 사용하세요.

개발자가 자주 만나는 색상 코드 치트시트

마무리 — 색상은 도구가 대신 계산하게 하세요

HEX, RGB, HSL, HSV — 네 가지 형식은 모두 동일한 색상을 다른 방식으로 표현할 뿐입니다. 각 형식이 왜 존재하는지, 언제 어떤 형식이 적합한지를 이해하는 것이 중요하지만, 실제 변환 계산은 도구에게 맡기는 것이 훨씬 효율적입니다.

HMApps 색상 변환기를 북마크에 저장해 두고, 디자인 파일에서 색상 코드를 받을 때마다, CSS에서 투명도 처리가 필요할 때마다, HSL로 팔레트를 만들 때마다 바로 열어 사용해 보세요.

연관 도구로 웹 컬러 참조표도 함께 활용하면 CSS 네임드 컬러와 HEX 값을 한눈에 비교할 수 있어 더욱 편리합니다.