Color (색상)
색상 모델
RGB
빛의 삼원색. 화면 표시에 사용.
color: rgb(255, 99, 71);
color: rgba(255, 99, 71, 0.5); /* 투명도 */HEX
RGB를 16진수로 표현.
color: #FF6347; /* 6자리 */
color: #F63; /* 3자리 축약 */
color: #FF634780; /* 8자리 (마지막 2자리 = 투명도) */HSL
Hue(색조), Saturation(채도), Lightness(밝기). 직관적 조정에 유리.
color: hsl(9, 100%, 64%);
color: hsla(9, 100%, 64%, 0.5);
/* 같은 색조에서 밝기만 변경 → 자연스러운 색상 계열 */
hsl(220, 80%, 20%) /* 어두운 파랑 */
hsl(220, 80%, 50%) /* 기본 파랑 */
hsl(220, 80%, 80%) /* 밝은 파랑 */색상 이론
색상환 관계
| 관계 | 설명 | 특징 |
|---|---|---|
| 보색 (Complementary) | 180도 반대 | 강한 대비 |
| 유사색 (Analogous) | 인접 30~60도 | 조화로움 |
| 삼각색 (Triadic) | 120도 간격 | 생동감 |
| 분할 보색 (Split-Complementary) | 보색의 양쪽 인접 | 보색보다 부드러움 |
색의 심리
| 색상 | 연상 | 주요 사용 |
|---|---|---|
| 빨강 | 긴박감, 열정, 오류 | CTA, 경고, 삭제 |
| 주황 | 활기, 친근함 | 알림, 강조 |
| 노랑 | 주의, 낙관 | 경고, 하이라이트 |
| 초록 | 성공, 안전, 자연 | 완료, 승인 |
| 파랑 | 신뢰, 안정, 전문성 | 링크, 주요 브랜드 |
| 보라 | 창의, 고급 | 프리미엄 |
| 회색 | 중립, 비활성 | 비활성 상태, 보조 텍스트 |
접근성 (Contrast Ratio)
WCAG 기준 — 텍스트와 배경의 명도 대비.
| 등급 | 일반 텍스트 | 큰 텍스트 (18pt+) |
|---|---|---|
| AA (최소) | 4.5:1 | 3:1 |
| AAA (권장) | 7:1 | 4.5:1 |
흰 배경(#FFF) 위 텍스트:
#767676 → 4.54:1 (AA 통과)
#595959 → 7.0:1 (AAA 통과)
#AAAAAA → 2.32:1 (실패)
디자인 시스템 색상 구조
Primary 메인 브랜드 색상 (CTA, 링크)
Secondary 보조 강조 색상
Neutral 회색 계열 (텍스트, 배경, 테두리)
Semantic 의미 기반 색상
├── Success #22C55E
├── Warning #F59E0B
├── Error #EF4444
└── Info #3B82F6
색상 토큰 예시
:root {
/* Primary */
--color-primary-50: #EFF6FF;
--color-primary-100: #DBEAFE;
--color-primary-500: #3B82F6;
--color-primary-600: #2563EB;
--color-primary-900: #1E3A8A;
/* Neutral */
--color-gray-50: #F9FAFB;
--color-gray-200: #E5E7EB;
--color-gray-500: #6B7280;
--color-gray-900: #111827;
/* Semantic */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-error: #EF4444;
}다크 모드
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--text-primary: #F1F5F9;
--text-secondary: #94A3B8;
}
}