HEX, RGB, HSL 간 색상 변환 방법

HEX, RGB, HSL은 웹에서 색상을 표현하는 세 가지 주요 형식입니다. HEX는 CSS에서 가장 널리 쓰이고, RGB는 알파 채널(불투명도)에, HSL은 디자인 작업에 직관적입니다. NeatForge 색상 변환기 는 세 형식을 브라우저에서 실시간으로 상호 변환합니다.

세 가지 색상 형식은 무엇인가요?

• HEX — 16진수 여섯 자리로 빨강·초록·파랑을 표현. 예: #2563EB. 3자리 약식(#fff)도 지원.
• RGB — 0~255 범위의 세 정수. 예: rgb(37, 99, 235). 알파 추가 시 rgba(37, 99, 235, 0.5).
• HSL — 색상(각도 0~360), 채도(%), 명도(%)의 세 값. 예: hsl(217, 83%, 53%).

세 가지 모두 같은 색상을 다르게 표현하며, 한 형식을 바꾸면 다른 형식이 자동으로 계산됩니다.

용도별로 어떤 형식을 선택해야 하나요?

• HEX — CSS 색상 속성의 기본. 가장 짧고 널리 호환됩니다.
• RGB / RGBA — 알파(투명도)가 필요할 때. rgba(37, 99, 235, 0.5)처럼 투명도 제어.
• HSL / HSLA — 색상 팔레트를 구축하거나 명도/채도를 미세 조정할 때. 디자이너에게 직관적.

RGB와 HSL의 차이는?

RGB는 색상을 빨강·초록·파랑 성분의 합으로 설명합니다. HSL은 색상(색상환 각도), 채도(강도), 명도(밝기)로 설명합니다.

HSL이 디자인에 유리한 이유는 한 속성을 바꿀 때 다른 속성에 영향을 주지 않기 때문입니다. 예를 들어 HSL에서는 명도만 바꿔 같은 색조의 밝은/어두운 변형을 쉽게 만들 수 있지만, RGB에서는 세 채널을 모두 다시 계산해야 합니다.

투명도(알파)는 어떻게 다루나요?

HEX는 8자리 확장(#2563EB80)으로 알파를 표현할 수 있지만 브라우저 지원이 비교적 최신입니다. 전통적으로는 RGB의 rgba() 형식이 가장 널리 쓰입니다.

• rgba(37, 99, 235, 0.5) — 50% 불투명도.
• hsla(217, 83%, 53%, 0.5) — HSL 버전.
• #2563EB80 — 8자리 HEX(마지막 두 자리가 알파).

현대 CSS에서는 별도의 알파 함수 없이 color-mix(in srgb, #2563EB, transparent 50%)로 투명도를 적용할 수도 있습니다.

색상은 어떻게 변환하나요?

1. 색상 변환기 를 엽니다.
2. HEX 값을 입력하거나, RGB/HSL 숫자를 조정하거나, 빠른 프리셋을 클릭합니다.
3. 상단 견본에서 색상을 즉시 확인합니다.
4. HEX, RGB, HSL 옆의 복사 버튼으로 CSS용 값을 복사합니다.

#fff 같은 3자리 약식은 자동으로 #FFFFFF로 확장되며, 출력은 항상 6자리 형식을 사용해 최대 호환성을 보장합니다. 모든 변환은 브라우저에서 이루어지며 색상 값은 업로드되지 않습니다.

CSS 색상 팁: color-mix

최신 CSS color-mix() 함수를 사용하면 두 색상을 혼합할 수 있습니다. HSL이나 RGB 모두 작동하지만, 혼합 비율을 백분율로 지정할 수 있어 디자인 토큰을 코드로 표현할 때 유용합니다.

--brand-mix: color-mix(in srgb, #2563EB 70%, white);

접근성이 중요한 경우 이 도구를 명암 검사기와 함께 사용해 WCAG 요건을 충족하는지 확인하세요.

자주 묻는 질문

RGB와 HSL의 차이는 무엇인가요? RGB는 색상을 빨강·초록·파랑 성분으로, HSL은 색상·채도·명도로 설명합니다. HSL은 명도만 바꿔 변형을 만들 수 있어 디자이너에게 더 직관적입니다.

3자리 HEX 약식을 지원하나요? 네. #fff를 입력하면 자동으로 #FFFFFF로 확장되며, 출력은 항상 6자리 형식을 사용합니다.

CSS용 값을 바로 복사할 수 있나요? 네. 각 형식 옆의 복사 버튼을 누르면 #2563EB, rgb(37, 99, 235), hsl(217, 83%, 53%) 형태로 CSS에 바로 붙여넣을 수 있습니다.

→ 무료 색상 변환기 열기