색상 변환기
시각적 색상 선택기로 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는 세 번째 형식을 요구합니다. 변환 코드를 작성하거나 올바른 공식을 검색하는 대신, 값을 붙여넣으면 모든 형식을 한 번에 얻을 수 있습니다.
색상 변환기 활용 사례
색상 형식 참조
아래 표는 가장 일반적인 색상 형식 다섯 가지를 나열하며, 동일한 인디고 색상(#6366F1)을 각 표기법으로 보여줍니다. HEX와 RGB는 CSS와 JavaScript에서 가장 널리 지원됩니다. HSL은 밝기와 채도 조정이 간단해 테마에 선호됩니다. HSV는 Photoshop과 Figma 같은 그래픽 디자인 소프트웨어의 색상 선택기에서 사용하는 모델입니다.
| 형식 | 예시 (인디고) | 채널 | 일반 용도 |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs RGB vs HSL
세 형식 모두 동일한 sRGB 색상 공간을 표현합니다. 차이는 데이터를 노출하는 방식에 있으며, 이는 맥락에 따라 가독성과 조작 편의성에 영향을 줍니다.
코드 예제
주요 언어와 환경에서 HEX, RGB, HSL 간의 색상 변환 방법입니다. 각 예제는 비교를 위해 동일한 인디고 색상(#6366F1)을 사용합니다.
// 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]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%)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
}/* 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); }