색상 변환기

시각적 색상 선택기로 HEX, RGB, HSL, HSV 형식 간에 색상 변환

예시 시도

색상 견본을 클릭해 색상 선택기 열기

또는 아래 값을 직접 편집

HEX
RGB
HSL
HSV

색상 변환이란?

색상 변환기는 하나의 표기법에서 다른 표기법으로 색상 값을 변환합니다. 예를 들어 HEX 트리플릿(#6366F1)을 RGB 튜플(99, 102, 241)이나 HSL 트리플(239, 84%, 67%)로 변환합니다. 동일한 색상을 HSV 트리플(239, 59%, 95%)로 표현할 수도 있습니다. 각 형식은 서로 다른 수학적 모델로 동일한 시각적 색상을 인코딩합니다. 도구, 언어, API는 상황에 따라 서로 다른 형식을 요구합니다.

HEX와 RGB는 모두 빨간색, 녹색, 파란색 빛의 혼합으로 색상을 표현합니다. HEX는 RGB가 십진수로 나타내는 동일한 세 개의 0-255 채널 값을 16진수로 간결하게 표현한 것입니다. HSL(색조, 채도, 밝기)과 HSV(색조, 채도, 명도)는 동일한 정보를 원통형 좌표계로 재배치합니다. 여기서 색조는 색상 휠의 각도(0-360도)이고, 채도와 밝기는 백분율입니다. 이로 인해 HSL과 HSV는 동일한 색조의 밝거나 어두운 음영을 만드는 작업에 더 직관적입니다.

이러한 형식 간 변환에는 잘 정의된 수식이 필요합니다. W3C CSS Color Module Level 4 사양은 브라우저가 CSS 색상을 sRGB 트리플릿으로 변환하는 알고리즘을 문서화합니다. 이 공식은 결정론적입니다. 동일한 입력은 항상 동일한 출력을 생성하므로, 값이 반올림되거나 잘리지 않는 한 변환은 무손실입니다. 대부분의 색상 선택기와 디자인 도구는 내부적으로 이와 동일한 공식을 사용합니다.

이 색상 변환기를 사용하는 이유

디자인 도구는 한 형식으로 색상을 내보내고, CSS는 다른 형식을 필요로 하며, 호출하는 API는 세 번째 형식을 요구합니다. 변환 코드를 작성하거나 올바른 공식을 검색하는 대신, 값을 붙여넣으면 모든 형식을 한 번에 얻을 수 있습니다.

즉시 실시간 변환
색상을 입력하거나 선택하면 HEX, RGB, HSL, HSV가 실시간으로 업데이트됩니다. 제출 버튼도, 서버 왕복도 필요 없습니다.
🔒
개인정보 보호 우선 처리
모든 변환 연산은 브라우저에서 실행됩니다. 색상 값, 사용 데이터, 쿠키 등 어떤 것도 외부로 전송되지 않습니다.
🔀
네 가지 형식 동시 제공
하나의 입력으로 HEX, RGB, HSL, HSV를 동시에 생성합니다. 필요한 형식을 클릭 한 번으로 복사하세요.
📋
계정 불필요
페이지를 열고 바로 변환을 시작하세요. 회원 가입, 이메일, 속도 제한이 없습니다. 로드된 후에는 오프라인에서도 작동합니다.

색상 변환기 활용 사례

CSS 개발
디자이너가 Figma에서 HEX 값을 전달했지만, 컴포넌트 라이브러리는 테마에 HSL을 사용합니다. 값을 변환하고 CSS 사용자 정의 속성이나 Tailwind 설정에 적용하세요.
백엔드 API 연동
차트 생성을 위해 엔드포인트가 색상을 RGB 배열로 요구합니다. 스타일 가이드의 브랜드 HEX 코드를 API가 요구하는 정수 트리플릿으로 변환하세요.
디자인 시스템 관리
디자인 시스템을 문서화할 때 빠른 참조를 위한 HEX, Canvas 렌더링을 위한 RGB, 프로그래밍 방식의 음영 생성을 위한 HSL로 모든 색상 토큰을 나열해야 합니다.
QA 및 시각적 테스트
스크린샷의 픽셀 색상(보통 브라우저 DevTools에서 RGB로 보고됨)을 Figma 사양의 예상 HEX 값과 비교합니다. 빠른 변환으로 불일치를 확인하거나 발견하세요.
데이터 시각화
D3.js, Chart.js 같은 차트 라이브러리는 메서드에 따라 서로 다른 형식의 색상을 받습니다. 한 번 변환하고 데이터셋 설정 전반에서 일관된 표기법을 유지하세요.
색상 이론 학습
컴퓨터 그래픽이나 웹 디자인을 공부하는 학생들은 동일한 색상이 HEX, RGB, HSL, HSV에서 어떻게 표현되는지 확인할 수 있습니다. 채널을 조정하면서 다른 값이 변하는 것을 보면 색상 모델의 관계에 대한 직관을 쌓을 수 있습니다.

색상 형식 참조

아래 표는 가장 일반적인 색상 형식 다섯 가지를 나열하며, 동일한 인디고 색상(#6366F1)을 각 표기법으로 보여줍니다. HEX와 RGB는 CSS와 JavaScript에서 가장 널리 지원됩니다. HSL은 밝기와 채도 조정이 간단해 테마에 선호됩니다. HSV는 Photoshop과 Figma 같은 그래픽 디자인 소프트웨어의 색상 선택기에서 사용하는 모델입니다.

형식예시 (인디고)채널일반 용도
HEX#6366F16 (or 3/8)CSS, design tools, brand guides
RGBrgb(99, 102, 241)3 (0–255 each)CSS, Canvas API, image processing
HSLhsl(239, 84%, 67%)3 (deg, %, %)CSS, color theming, accessibility tuning
HSVhsv(239, 59%, 95%)3 (deg, %, %)Color pickers, Photoshop, Figma
CMYKcmyk(59%, 58%, 0%, 5%)4 (0–100% each)Print design, prepress workflows

HEX vs RGB vs HSL

세 형식 모두 동일한 sRGB 색상 공간을 표현합니다. 차이는 데이터를 노출하는 방식에 있으며, 이는 맥락에 따라 가독성과 조작 편의성에 영향을 줍니다.

HEX
6자리 16진수 문자열(또는 3자리 축약형). CSS, 디자인 도구, 브랜드 가이드라인에서 간결하고 범용적입니다. 한눈에 읽기 어렵습니다. #6366F1만으로는 색조를 알 수 없습니다. 알파 투명도를 위한 선택적 8자리 형식(#6366F180)을 지원합니다.
RGB
빨간색, 녹색, 파란색 채널에 대한 0-255 사이의 세 정수. Canvas 2D, WebGL, 대부분의 이미지 처리 라이브러리의 기본 형식입니다. 채널별로 조작하기 쉽지만, 인식된 밝기를 조정하려면 세 값을 모두 함께 변경해야 합니다.
HSL
색조(0-360도), 채도(0-100%), 밝기(0-100%). 사람이 읽기 쉽게 설계되었습니다. 색상을 더 밝게 하려면 L을 높이고, 채도를 줄이려면 S를 낮추세요. CSS는 hsl() 표기법을 기본 지원하며, 현대 CSS의 color-mix()와 상대 색상 구문도 이를 기반으로 합니다.

코드 예제

주요 언어와 환경에서 HEX, RGB, HSL 간의 색상 변환 방법입니다. 각 예제는 비교를 위해 동일한 인디고 색상(#6366F1)을 사용합니다.

JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]
Python
import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)
Go
package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}
CSS
/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

자주 묻는 질문

HSL과 HSV의 차이는 무엇인가요?
둘 다 색조와 채도를 사용하지만 밝기를 다르게 정의합니다. HSL은 밝기(Lightness)를 사용하는데, 50%가 순수한 색상, 0%는 검정, 100%는 흰색입니다. HSV는 명도(Value, 또는 밝기)를 사용하는데, 100%가 순수한 색상이고 0%는 검정입니다. HSV에는 직접적인 흰색 끝점이 없습니다. 실제로 HSL은 CSS와 웹 개발에 사용되고, HSV는 Photoshop과 Figma 같은 디자인 소프트웨어의 대부분의 색상 선택기 모델입니다.
JavaScript에서 HEX를 RGB로 어떻게 변환하나요?
parseInt(hex, 16)로 16진수 문자열을 정수로 파싱한 다음, 비트 시프트로 각 채널을 추출합니다. 빨간색은 (n >> 16) & 255, 녹색은 (n >> 8) & 255, 파란색은 n & 255입니다. 이 방법은 앞에 # 기호가 있든 없든 6자리 16진수 문자열을 처리합니다. #F0F 같은 3자리 축약형은 파싱 전에 각 자리를 먼저 확장(FF00FF)해야 합니다.
CSS에서 HSL을 직접 사용할 수 있나요?
네. 모든 최신 브라우저는 CSS에서 hsl()과 hsla()를 지원합니다. CSS Color Level 4부터 구문은 hsl(239 84% 67%)처럼 공백으로 구분된 값을 사용합니다(쉼표도 여전히 허용됩니다). 알파를 네 번째 매개변수로 추가할 수도 있습니다: hsl(239 84% 67% / 0.5). Safari, Chrome, Firefox, Edge 모두 이 구문을 지원합니다.
색상 변환에서 손실이 발생하나요?
수학적으로는 아닙니다. HEX, RGB, HSL, HSV는 모두 동일한 sRGB 색상 공간을 표현하며 변환은 가역적입니다. 실제로는 HEX가 채널당 256단계로 제한되고 HSL 백분율이 일반적으로 정수로 반올림되기 때문에 작은 반올림 차이가 발생할 수 있습니다. 여러 번 앞뒤로 변환하면 1-2 단위의 반올림 오류가 누적될 수 있습니다.
8자리 HEX 형식이란 무엇인가요?
8자리 HEX 형식은 표준 6자리 HEX 색상에 두 개의 알파(투명도) 자리를 추가합니다. 예를 들어 #6366F180은 50% 불투명도의 동일한 인디고 색상을 의미합니다(0x80 = 128, 255의 약 50%). CSS는 모든 최신 브라우저에서 이 표기법을 지원합니다. 축약형은 #63F8처럼 4자리입니다.
다른 모니터에서 색상이 다르게 보이는 이유는 무엇인가요?
색상 표현은 모니터의 색상 프로파일, 밝기, 감마 보정에 따라 달라집니다. 두 화면의 색상 프로파일이 다르면 동일한 sRGB 값(#6366F1)을 다르게 표시할 수 있습니다. 색상 변환 도구는 정의된 색상 공간(보통 sRGB)에서 작동하고 수학적으로 올바른 출력을 생성합니다. 인식된 차이는 변환 오류가 아니라 디스플레이 보정 문제입니다.
색상의 더 밝거나 어두운 음영을 선택하려면 어떻게 하나요?
색상을 HSL로 변환하고 L(밝기) 채널을 조정하세요. L을 100% 쪽으로 높이면 더 밝은 색조가, 0% 쪽으로 낮추면 더 어두운 음영이 만들어집니다. 색조와 채도는 그대로 유지됩니다. CSS에서 직접 할 수도 있습니다: hsl(239 84% 80%)은 hsl(239 84% 67%)의 더 밝은 버전입니다. 현대 CSS에서는 수동 변환 없이 color-mix(in srgb, #6366F1, white 30%)로도 동일한 효과를 낼 수 있습니다.