색상 코드 5가지 활용 - RGB·HEX·HSL·HSV·OKLCH 디자이너 가이드

**RGB (Red-Green-Blue)** - 표기: `rgb(255, 0, 0)` (빨강) - 0~255 정수 - 모니터·웹 표준 - 이해 직관적이지만 색상 조정 어려움 **HEX (16진수)** - 표기: `#FF0000` (빨강) - RGB 16진수 표기 - CSS·디자인 도구 표준 - 짧고 복사·붙여넣기 편함 **HSL (Hue-Saturation-Lightness)** - 표기: `hsl(0, 100%, 50%)` - 색상(0~360)·채도·명도 - 색상 조정 직관적 - 같은 색조에서 명도만 변경 쉬움 **HSV (Hue-Saturation-Value)** - 표기: `hsv(0, 100%, 100%)` - 색상·채도·값(밝기) - 디자인 도구 (Photoshop·Sketch) 표준 - HSL과 비슷하지만 V는 명도 다름 **OKLCH (2026 트렌드)** - 표기: `oklch(60% 0.2 30)` - 시각적 균일 색상 - 명도 정확 일치 - 색상 시스템 디자인 최적

**RGB·HEX 활용** - 디자인 → 코드 옮길 때 - CSS·HTML 기본 - 색상 정확히 지정 - 단점: 색조 조정 어려움 **HSL 활용** - 디자인 시스템 (다크 모드) - 같은 색조 + 명도 변형 - 컬러 팔레트 자동 생성 - 예: 메인 컬러 + L 90%, 70%, 50%, 30%, 10% 5단계 **HSV 활용** - Photoshop·Sketch 작업 - 디자이너 색상 선택 - 컬러 휠 조작 **OKLCH 활용 (2026 트렌드)** - 시각적 균일 색상 시스템 - 명도 일치 (HSL은 같은 L도 시각적 명도 다름) - 접근성 (WCAG 대비) 자동 보장 - 다크 모드 색상 변환 자연스러움 **선택 기준** - 코드 작성: HEX (짧음) - 디자인 시스템: HSL 또는 OKLCH - 그래픽 도구: HSV - 미래 표준: OKLCH

**1. 브랜드 컬러 정의** - 메인 컬러 (HEX 1개) - 보조 컬러 2~3개 - 액센트 컬러 1개 - 모두 동일 형식으로 문서화 **2. 다크 모드 색상** - HSL 또는 OKLCH로 명도 변형 - 라이트 모드 L 50% → 다크 모드 L 70~80% - 채도는 약간 낮춤 (다크 모드는 채도 낮은 게 자연스러움) **3. 색상 대비 (접근성)** - WCAG 2.1 기준 4.5:1 이상 (본문) - 3:1 이상 (큰 텍스트) - 색상 대비 도구 (WebAIM Contrast) 활용 **4. 색상 팔레트 생성** - 메인 컬러 → HSL 변환 → L 변경 5~9단계 - 50, 100, 200, 300, 400, 500 (메인), 600, 700, 800, 900 - Tailwind CSS 같은 디자인 시스템 표준 **5. 색조 변환 (Color Harmony)** - 보색 (Complementary): H + 180 - 삼각 (Triadic): H + 120, +240 - 사각 (Tetradic): H + 90, +180, +270 - HSL의 H 값 조정으로 즉시 가능

**Toolkio 색상 변환기** - HEX ↔ RGB ↔ HSL ↔ HSV 양방향 - 색상 미리보기 - 알파 채널 (투명도) 지원 - 색상 코드 즉시 복사 **비교 도구** - Coolors (coolors.co): 팔레트 생성 - Adobe Color: 컬러 휠 + 트렌드 - ColorZilla: 브라우저 확장 (스포이드) - Tailwind Color Palette: 디자인 시스템 - Material Design Color Tool: Google 표준 **디자이너 워크플로** 1. 메인 컬러 결정 (Coolors) 2. Toolkio로 5종 형식 변환 3. CSS·디자인 도구에 적용 4. WebAIM으로 접근성 검증 5. 다크 모드 색상 자동 생성 **OKLCH 학습 자료** - evilmartians.com (OKLCH 가이드) - oklch.com (변환 도구) - Tailwind v4 (OKLCH 채택) 2026년 새 프로젝트는 OKLCH 채택 검토. 색상 시스템 미래.