colorlisted
Install: claude install-skill woogi-kang/woogi-harness
# Color Skill
프로젝트의 디자인 방향에 맞는 색상 팔레트와 테마 시스템을 구성합니다.
## Triggers
- "색상", "컬러", "팔레트", "color", "palette", "theme", "테마", "다크모드"
---
## Input
| 항목 | 필수 | 설명 |
|------|------|------|
| `aestheticDirection` | ✅ | 이전 Direction 스킬에서 결정된 미적 방향 |
| `brandColors` | ❌ | 기존 브랜드 색상 (HEX 또는 oklch) |
| `colorMode` | ❌ | 지원할 모드 (light, dark, both) - 기본값: both |
| `accessibilityLevel` | ❌ | WCAG 레벨 (AA, AAA) - 기본값: AA |
---
## Output
| 산출물 | 설명 |
|--------|------|
| `globals.css` | oklch 기반 CSS 변수 정의 |
| `color-tokens.ts` | TypeScript 색상 토큰 상수 |
| `theme-provider.tsx` | Dark mode 지원 Provider |
---
## Workflow
### Step 1: oklch 색상 공간 이해
**왜 oklch인가?**
| 색상 공간 | 장점 | 단점 |
|-----------|------|------|
| HEX/RGB | 친숙함, 도구 지원 | 인지적 균일성 없음 |
| HSL | 직관적 조정 | 밝기 불일치 |
| **oklch** | 인지적 균일성, 접근성 | 비교적 새로움 |
```css
/* oklch(Lightness Chroma Hue) */
/* L: 0-1 (밝기), C: 0-0.4 (채도), H: 0-360 (색상) */
/* 예시: 밝기만 조절해도 색조 일관성 유지 */
--primary-100: oklch(0.95 0.02 250); /* 아주 밝은 */
--primary-500: oklch(0.60 0.15 250); /* 기준 */
--primary-900: oklch(0.25 0.08 250); /* 아주 어두운 */
```
---
### Step 2: 방향별 색상 팔레트
**Direction별 추천 팔레트:**
#### Minimal (미니멀)
```css
:root {
/* Neutral-focused with subtle accent */
--primary: oklch(0.20 0.01 0); /* Near black */
--secondary: oklch(0.96 0.01 0); /* Near white */
--accent: oklch(0.60 0.15 250); /* Subtle blue */
--muted: oklch(0.55 0.02 0); /* Gray */
}
```
#### Elegant (우아함)
```css
:root {
/* Rich, sophisticated to