색상 코드 변환기, AI로 10분 만에 직접 만들어 쓰기
HEX, RGB, HSL, CMYK 색상 코드를 실시간으로 변환하는 도구를 직접 만들었습니다. 보색, 밝기 자동 감지, Material Design 팔레트까지 포함합니다.
위 화면은 이 포스트의 프롬프트를 AI에 입력해서 생성한 샘플입니다
색상 코드, 왜 헷갈릴까?
웹 개발이나 디자인을 하다 보면 색상 코드 때문에 막히는 순간이 옵니다.
Figma에서 복사한 색상은 HEX(#3B82F6)인데, CSS에서 rgba로 써야 하는 상황이라 변환이 필요합니다. 디자이너가 HSL로 색상을 전달했는데 개발자는 HEX가 익숙합니다. Illustrator에서는 CMYK를 씁니다.
이렇게 상황에 따라 다른 색상 체계를 쓰기 때문에 변환 도구가 필요합니다.
직접 만들어봤습니다. 컬러 피커, 빠른 참조 팔레트, 보색 표시까지 포함해서 약 20분이 걸렸습니다.
색상 체계 이해하기
변환기를 쓰기 전에 각 색상 체계가 무엇인지 알면 더 유용하게 활용할 수 있습니다.
HEX (#RRGGBB)
가장 많이 쓰이는 웹 색상 코드입니다. R(빨강), G(초록), B(파랑) 각각을 16진수 2자리로 표현합니다.
#3B82F6
↑↑ ↑↑ ↑↑
3B 82 F6
R=59 G=130 B=246
RGB (Red, Green, Blue)
빛의 삼원색 모델입니다. 각 채널은 0~255 범위의 정수입니다.
rgb(59, 130, 246) /* 파란색 */
rgba(59, 130, 246, 0.5) /* 50% 투명도 */
HSL (Hue, Saturation, Lightness)
색상(Hue), 채도(Saturation), 밝기(Lightness)로 표현합니다. 사람이 직관적으로 이해하기 쉬운 방식입니다.
hsl(217, 91%, 60%)
↑ ↑ ↑
색상 채도 밝기
(0-360) (0-100%) (0-100%)
Hue 값: 0=빨강, 60=노랑, 120=초록, 180=청록, 240=파랑, 300=보라
CMYK (Cyan, Magenta, Yellow, Key/Black)
인쇄 업계에서 사용하는 4색 모델입니다. 모니터는 빛을 더하는 방식(가산 혼합)이고, 인쇄는 잉크를 겹치는 방식(감산 혼합)이라 별도의 색상 모델이 필요합니다.
완성된 색상 코드 변환기 살펴보기
위의 라이브 데모에서 직접 써보세요.
주요 기능:
- 컬러 피커로 색상 선택 또는 HEX 코드 직접 입력
- HEX, RGB, HSL, CMYK 동시 표시
- 각 값 옆에 복사 버튼
- 색상 미리보기 (큰 박스)
- 보색(Complementary Color) 자동 계산
- Material Design 팔레트 10가지 빠른 선택
AI에게 어떻게 요청했나?
1단계 프롬프트 — 변환 로직
Next.js 14 + TypeScript + Tailwind CSS로 색상 코드 변환기를 만들어줘.
요구사항:
- 'use client' 컴포넌트
- input[type="color"] 피커 + HEX 텍스트 입력
- HEX → RGB → HSL → CMYK 실시간 변환
- 각 값별 복사 버튼 (navigator.clipboard.writeText)
- 색상 미리보기 div (배경색으로 표시)
- 밝기에 따라 텍스트를 흰색/검정으로 자동 조정
변환 공식:
- HEX→RGB: parseInt(hex.slice(1,3), 16) 방식
- RGB→HSL: 표준 HSL 변환 공식
- RGB→CMYK: K=1-max(r,g,b), C=(1-r-K)/(1-K) 방식
2단계 프롬프트 — 추가 기능
다음을 추가해줘:
1. 보색(Complementary) 계산: HSL에서 Hue에 180도 더하기
2. Material Design 계열 색상 팔레트 10가지 미리보기 버튼
3. 복사 후 "복사됨!" 2초 피드백
4. HEX 입력 시 실시간 유효성 검사 (#으로 시작하는 6자리 hex)
코드 핵심 포인트
1. HEX → RGB 변환
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
const clean = hex.replace('#', '')
if (clean.length !== 6) return null
return {
r: parseInt(clean.slice(0, 2), 16), // 0~255
g: parseInt(clean.slice(2, 4), 16),
b: parseInt(clean.slice(4, 6), 16),
}
}
2. RGB → HSL 변환
function rgbToHsl(r: number, g: number, b: number) {
const rn = r / 255, gn = g / 255, bn = b / 255
const max = Math.max(rn, gn, bn)
const min = Math.min(rn, gn, bn)
const delta = max - min
let h = 0, s = 0
const l = (max + min) / 2
if (delta !== 0) {
s = delta / (1 - Math.abs(2 * l - 1))
if (max === rn) h = ((gn - bn) / delta) % 6
else if (max === gn) h = (bn - rn) / delta + 2
else h = (rn - gn) / delta + 4
h = Math.round(h * 60)
if (h < 0) h += 360
}
return {
h,
s: Math.round(s * 100),
l: Math.round(l * 100),
}
}
3. 보색 계산
HSL 모델에서 보색은 Hue 값에 180도를 더하면 됩니다.
function getComplementary(hex: string): string {
const rgb = hexToRgb(hex)
if (!rgb) return hex
const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b)
const compHue = (hsl.h + 180) % 360
// HSL → RGB → HEX로 다시 변환
return hslToHex(compHue, hsl.s, hsl.l)
}
4. 배경색에 따른 텍스트 색상 자동 조정
밝은 배경에는 검정 텍스트, 어두운 배경에는 흰 텍스트가 필요합니다.
function getTextColor(hex: string): string {
const rgb = hexToRgb(hex)
if (!rgb) return '#000000'
// 상대 밝기(luminance) 계산
const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b
return luminance > 128 ? '#000000' : '#ffffff'
}
색상 선택 팁
색상 조화 법칙
보색 조합: 색상환에서 마주 보는 두 색. 강렬한 대비 효과. 예) 파랑(#3B82F6) + 주황(#F6903B)
유사색 조합: 색상환에서 인접한 색들. 자연스럽고 부드러운 느낌. 예) 파랑(#3B82F6), 청록(#3BF6E0), 보라(#7B3BF6)
단색 조합: 같은 색의 밝기만 다르게. 세련되고 통일감 있음. 예) #1E3A8A, #3B82F6, #93C5FD (다크 → 미드 → 라이트)
브랜드 색상 결정 시 고려할 점
- 감정: 파랑=신뢰, 초록=성장/자연, 빨강=에너지/긴급, 노랑=밝음/주의
- 접근성: 텍스트와 배경의 명도 대비가 4.5:1 이상이어야 합니다 (WCAG 기준)
- 일관성: 브랜드에서 쓰는 주색상, 보조색상, 강조색상을 미리 정해두세요
활용 예시
Figma 디자인 → 코드 연동 Figma에서 복사한 HEX 코드를 입력하면 CSS에서 필요한 rgba, hsl 값을 바로 얻을 수 있습니다.
브랜드 팔레트 탐색 원하는 색을 고르고 보색을 확인해서 로고나 배너의 색상 조합을 결정합니다.
인쇄물 준비 웹용 HEX/RGB 색상을 인쇄용 CMYK로 변환합니다.
이렇게 확장할 수 있습니다
- 색상 팔레트 저장: 내가 고른 색상들을 로컬에 저장
- 그라디언트 생성: 두 색상 사이의 그라디언트 CSS 코드 자동 생성
- 접근성 검사: 텍스트와 배경 색상의 명도 대비 계산
- 이미지에서 색상 추출: 이미지를 업로드하면 주요 색상 추출
자주 묻는 질문
Q. HSL과 HEX 중 어느 걸 CSS에서 써야 하나요? 모두 사용 가능합니다. HEX는 짧고 직관적이며, HSL은 밝기나 채도를 조절할 때 계산하기 쉽습니다.
Q. CMYK 변환이 약간 다른 이유는? HEX/RGB는 화면용, CMYK는 인쇄용 색상 모델이라 완벽하게 일치하지 않을 수 있습니다. 인쇄 작업에는 전문 소프트웨어를 권장합니다.
Q. 색상 입력 시 3자리 HEX도 되나요? 현재 버전은 6자리 HEX를 기준으로 합니다. #RGB를 #RRGGBB로 변환하는 기능은 확장으로 추가할 수 있습니다.
다음 편 예고
다음 편은 글자 수 세기입니다. 블로그, 원고, SNS용 글쓰기에 필수적인 도구를 만들어봅니다.
'use client'
import { useState } from 'react'
// HEX → RGB
function hexToRgb(hex) {
const clean = hex.replace('#', '')
const full = clean.length === 3
? clean.split('').map(c => c + c).join('')
: clean
return {
r: parseInt(full.slice(0, 2), 16),
g: parseInt(full.slice(2, 4), 16),
b: parseInt(full.slice(4, 6), 16),
}
}
// RGB → HSL
function rgbToHsl({ r, g, b }) {
const rn = r / 255, gn = g / 255, bn = b / 255
const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn)
const l = (max + min) / 2
if (max === min) return { h: 0, s: 0, l: 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 === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6
else if (max === gn) h = ((bn - rn) / d + 2) / 6
else h = ((rn - gn) / d + 4) / 6
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }
}
// RGB → CMYK
function rgbToCmyk({ r, g, b }) {
const rn = r / 255, gn = g / 255, bn = b / 255
const k = 1 - Math.max(rn, gn, bn)
if (k === 1) return { c: 0, m: 0, y: 0, k: 100 }
return {
c: Math.round((1 - rn - k) / (1 - k) * 100),
m: Math.round((1 - gn - k) / (1 - k) * 100),
y: Math.round((1 - bn - k) / (1 - k) * 100),
k: Math.round(k * 100),
}
}
export function ColorConverter() {
const [hex, setHex] = useState('#3B82F6')
const rgb = hexToRgb(hex)
const hsl = rgbToHsl(rgb)
const cmyk = rgbToCmyk(rgb)
// 텍스트 색상: 밝은 배경 → 검정, 어두운 배경 → 흰색
const lum = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255
const textColor = lum > 0.5 ? '#000' : '#fff'
return (
<div>
{/* 미리보기 */}
<div style={{ backgroundColor: hex, color: textColor, padding: '2rem' }}>
{hex}
</div>
{/* 피커 */}
<input type="color" value={hex} onChange={e => setHex(e.target.value)} />
{/* 변환 값 */}
<p>RGB: rgb({rgb.r}, {rgb.g}, {rgb.b})</p>
<p>HSL: hsl({hsl.h}, {hsl.s}%, {hsl.l}%)</p>
<p>CMYK: {cmyk.c}%, {cmyk.m}%, {cmyk.y}%, {cmyk.k}%</p>
</div>
)
}