색상 코드 변환기, AI로 10분 만에 직접 만들어 쓰기
HEX, RGB, HSL, CMYK 색상 코드를 실시간으로 변환하는 도구를 직접 만들었습니다. 보색, 밝기 자동 감지, Material Design 팔레트까지 포함합니다.
2026년 5월 27일6분 읽기0 조회
?
#색상코드#HEX#RGB#AI코딩#바이브코딩#뚝딱공방#디자인
✦ 라이브 데모AI 프롬프트로 생성한 결과물
위 화면은 이 포스트의 프롬프트를 AI에 입력해서 생성한 샘플입니다
AI 프롬프트 공개
## 실제 사용한 프롬프트
---
### 1단계 — 기본 구조 요청
```
Next.js 14 + TypeScript + Tailwind로 색상 코드 변환기 컴포넌트를 만들어줘.
요구사항:
- 'use client' 컴포넌트
- input[type=color] 컬러 피커 + HEX 텍스트 입력
- HEX → RGB → HSL → CMYK 실시간 변환
- 각 값 옆에 복사 버튼 (navigator.clipboard)
- 색상 미리보기 박스
- 다크모드 대응 (CSS 변수 사용)
```
---
### 2단계 — 기능 추가
```
색상 변환기에 다음을 추가해줘:
1. 보색(Complementary) 계산 및 미리보기 (255 - 각 채널값)
2. 색상 밝기에 따라 미리보기 텍스트를 흰색/검정으로 자동 조정
(luminance = 0.299*r + 0.587*g + 0.114*b) / 255, 0.5 기준)
3. Material Design 색상 팔레트 10개 (빠른 선택 버튼)
4. 3자리 HEX (#F00) 입력도 지원
```
---
### 3단계 — 스타일 정리
```
색상 변환기 UI를 개선해줘:
- 색상 미리보기를 상단 전체 너비 박스로 (h-32)
- 변환 값들을 구분선으로 나눈 리스트 형태로 표시
- 팔레트 색상 클릭 시 선택된 색상 테두리 강조
- 컬러 피커와 HEX 입력을 나란히 배치
```
---
💡 **팁**: 수학 공식을 직접 알려주면 AI가 더 정확하게 구현합니다. luminance 공식처럼 특정 가중치가 있는 경우 특히 그렇습니다.
왜 색상 코드 변환기를 직접 만들었나?
디자인 작업을 할 때 색상 코드를 자주 변환합니다. Figma에서 HEX로 색을 고르고, CSS에 HSL로 쓰고, 인쇄물 작업에서는 CMYK가 필요합니다.
기존 온라인 변환기들은 하나씩 입력해야 하거나, UI가 복잡합니다. 컬러 피커로 색을 고르면 모든 형식이 한 번에 나오는 도구를 만들고 싶었습니다.
라이브 데모
위의 색상 코드 변환기를 직접 사용해보세요.
- 컬러 피커나 HEX 텍스트 입력으로 색상을 선택합니다
- HEX, RGB, HSL, CMYK 값이 실시간으로 변환됩니다
- 각 값 옆의 복사 버튼으로 클립보드에 복사합니다
- 하단 팔레트에서 Material Design 색상을 빠르게 선택합니다
- 보색도 함께 표시합니다
코드 핵심 포인트
1. HEX → RGB 변환
HEX 코드를 2자리씩 잘라 16진수로 파싱합니다.
function hexToRgb(hex: string): RGB {
const clean = hex.replace('#', '')
return {
r: parseInt(clean.slice(0, 2), 16),
g: parseInt(clean.slice(2, 4), 16),
b: parseInt(clean.slice(4, 6), 16),
}
}
3자리 HEX(#F00)는 6자리로 확장(#FF0000)하는 처리를 먼저 합니다.
2. RGB → HSL 변환
RGB를 0~1 범위로 정규화한 후 최대/최솟값으로 HSL을 계산합니다.
function rgbToHsl({ r, g, b }: RGB): HSL {
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 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)
// ... hue 계산
}
3. 텍스트 색상 자동 조정
배경색 밝기에 따라 텍스트를 흰색 또는 검정으로 자동 선택합니다.
// 밝기(luminance) 계산: 인간 눈의 색 인지 비율 적용
const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255
const textColor = lum > 0.5 ? '#000000' : '#ffffff'
마무리
색상 변환은 수학 공식이 명확합니다. AI가 공식을 코드로 정확하게 구현해줬고, 저는 UI/UX 설계에 집중할 수 있었습니다.
다음 편 예고
다음 편은 글자 수 세기입니다. 원고지 매수 계산 등 글쓰기에 유용한 통계를 제공합니다.
소스 코드
'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>
)
}2026년 5월 27일 게시