라이트 모드 색상을 입력하면 다크 모드용 색이 자동으로 변환됩니다. 단순 색 반전이 아닌 HSL 기반의 자연스러운 변환을 사용합니다.
변환 결과
다크모드 변환기 사용법
- 변환 방식을 선택합니다 (보통 "HSL 명도 반전" 권장).
- 변환할 라이트 모드 색상을 한 줄에 하나씩 HEX로 입력합니다.
- 각 색상의 라이트/다크 버전이 나란히 표시됩니다.
- 다크 색상을 클릭하면 HEX 코드가 복사됩니다.
주요 기능
- 3가지 변환 방식 (HSL 명도 반전·단순 어둡게·완전 반전)
- 여러 색을 한 번에 일괄 변환
- 라이트/다크 나란히 비교
- 한 번 클릭으로 HEX 복사
- 완전 무료, 외부 통신 없음
활용 예시
- 기존 라이트 테마를 다크 모드로 확장
- 디자인 시스템의 라이트/다크 토큰 매칭
- 피그마/스케치 시안의 다크 버전 시안 빠르게 생성
- 브랜드 컬러를 다크 모드용으로 보존
변환 방식 비교
HSL 명도 반전은 색조(Hue)와 채도(Saturation)는 유지한 채 명도(Lightness)만 반전(L → 100-L)합니다. 색의 정체성이 보존되어 가장 자연스럽습니다. 단순 어둡게는 모든 색을 30% 어둡게 만들어 단조롭습니다. 완전 반전은 RGB를 전부 반전(255-R)해 색이 완전히 바뀝니다 — 사진 네거티브 효과.
자주 묻는 질문
왜 단순히 색을 반전하면 안 되나요?
RGB 완전 반전은 색조 자체가 바뀝니다 — 빨강이 시안이 되어 브랜드 색을 잃습니다. HSL 명도 반전은 색조를 유지하면서 라이트→다크만 바꿔 자연스럽습니다.
강조 색(액센트)도 변환해야 하나요?
액센트 색은 유지하는 것이 일반적입니다. 다크 배경 위에서는 채도를 약간 낮추면 더 부드럽게 보입니다.
다크 모드 디자인 가이드는?
순수 검정(#000)보다 짙은 회색(#0f172a, #18181b)이 눈의 피로를 덜 줍니다. 텍스트는 순수 흰색보다 밝은 회색(#e5e7eb)이 부드럽고, 그림자 대신 미세한 보더로 깊이를 표현하세요.
접근성(WCAG)은 어떻게 검증하나요?
다크 배경 + 텍스트 조합이 4.5:1 이상 대비를 만족하는지 색상 대비 검사기로 확인하세요. 다크 모드에서도 AA 기준은 유지되어야 합니다.