·2분 읽기
다크모드 색상 설계 원칙 — 개발자가 실수 없이 구현하는 6단계
다크모드를 단순히 배경 반전으로 만들면 눈이 아파요. 대비·계층·브랜드 색을 유지하는 6단계 설계 원칙과 HEX·RGB·HSL 조합 실전 예시를 정리했어요.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
단순 배경 반전은 다크모드가 아니에요
흔한 실수는 흰 배경을 검은색으로, 검은 텍스트를 흰색으로만 바꾸는 거예요. 결과는 눈부심, 블러 느낌, 이미지 과대비 등이 동시에 터져요.
제대로 된 다크모드는 **색상 계층, 대비비, 브랜드 유지**가 설계 원칙이에요. 오늘 6단계를 정리하면서 실전 HEX 예시도 같이 드릴게요.
1단계 — 순검정(#000000)을 피하세요
순검정 배경은 OLED에서 잘 보이지만 LCD 모니터에서는 텍스트 경계가 너무 날카로워져요. 실제로 많은 프로 다크모드는 `#121212` 또는 `#1A1A1A`를 씁니다.
GitHub: `#0D1117`, Material Design: `#121212`, YouTube: `#0F0F0F`. 모두 순검정이 아니에요. 눈 피로를 크게 줄이는 작은 차이예요.
2단계 — 색상 계층을 3~5단계로
다크모드에는 배경 계층이 보통 이 정도로 나뉩니다.
- Layer 0 (페이지): `#121212`
- Layer 1 (카드): `#1E1E1E`
- Layer 2 (입력): `#2C2C2C`
- Layer 3 (활성): `#3A3A3A`
- Layer 4 (호버): `#4A4A4A`
각 레이어가 약 10~15% 밝기 차이예요. HSL로 접근하면 더 체계적이에요: L값을 8%, 12%, 18%, 24%, 30%로 계단식.
3단계 — 텍스트는 순백색 대신 Off-white
`#FFFFFF`는 너무 눈부셔요. 고계층 텍스트는 `#E1E1E1`(약 87% 투명도)나 `#F1F1F1` 정도를 권장해요.
보조 텍스트는 `#A1A1A1`, 비활성은 `#6A6A6A`. 3단계 정도로 나눠야 정보 위계가 보입니다.
4단계 — 브랜드 색상은 채도 낮추기
라이트모드에서 쓰던 브랜드 색을 그대로 쓰면 다크 배경에서 형광처럼 튀어요. HSL의 S(채도)를 20~30% 낮추고 L(명도)을 조금 올리세요.
예시: 라이트 `hsl(220, 90%, 50%)` → 다크 `hsl(220, 70%, 65%)`. 같은 파랑 계열이지만 눈에 훨씬 편해요.
5단계 — WCAG 대비비 최소 4.5:1
접근성 기준이에요. 텍스트 색 vs 배경 대비비가 4.5 이상이어야 합니다. 큰 제목(18pt+)은 3.0도 허용되지만 본문은 4.5가 안전선.
직접 계산하기 어렵다면 Toolkio 색상 변환기의 Contrast Ratio 기능을 쓰세요. HEX 두 개 입력하면 통과 여부가 바로 보여요.
6단계 — 이미지와 아이콘 보정
흰 배경 전제로 만든 이미지는 다크모드에서 흰 사각형이 튀어나와요. `filter: invert(1)` 또는 **alpha 채널 버전**을 따로 제공하세요.
아이콘은 SVG라면 `currentColor`를 쓰면 자동으로 텍스트 색에 맞춰 변해요. 이게 유지보수 가장 편한 패턴입니다.
Tailwind CSS 다크모드 실전 예시
```html
<div class="bg-neutral-100 dark:bg-neutral-900
text-neutral-900 dark:text-neutral-100
border dark:border-neutral-700">
```
Tailwind의 `neutral` 팔레트는 다크모드 친화적으로 설계돼 있어요. 1단계 배경에 `neutral-900`, 2단계 카드에 `neutral-800`을 쓰면 계층이 자연스럽습니다.
Toolkio 색상 변환기로 빠르게 검증
HEX를 HSL로 바꿔서 L 값을 조정하면 다크모드 팔레트를 5분에 만들 수 있어요. Contrast Ratio 체크까지 한 화면에서 됩니다. 디자인 툴 열기 귀찮을 때 가장 먼저 쓰는 도구예요.