다크모드가 대세다. 하지만 라이트모드 색상을 그대로 뒤집으면 안 된다. 다크모드에 맞는 색상 변환 원칙이 있다.
단순 반전이 아니다
흰 배경에 검정 텍스트를 뒤집어서 검정 배경에 흰 텍스트로 하면, 대비가 너무 강해서 눈이 피로하다. 완전한 검정(#000000)보다 짙은 회색(#121212)을, 완전한 흰색보다 밝은 회색(#E0E0E0)을 쓰는 게 좋다.
명도 조절 원칙
색상 변환기로 HSL 값을 확인하고, L(밝기) 값을 조절하자. 라이트모드에서 L이 90%였다면 다크모드에서는 15~20% 정도로. 색상(H)과 채도(S)는 유지하고 밝기만 조절하면 일관성이 유지된다.
채도 주의
어두운 배경에서 고채도 색상은 눈에 거슬린다. 채도를 10~20% 낮추면 부드러워진다. 특히 빨강, 초록 같은 원색 계열은 채도 조절이 필수다. 색상 변환기에서 S값을 낮춰보자.
테스트 필수
실제 디바이스에서 테스트하자. 모니터마다 어두운 색 표현이 다르다. OLED와 LCD의 검정 표현도 다르니 다양한 환경에서 확인해야 한다.
색상별 다크모드 변환
빨간색 에러 메시지: 라이트모드 #DC3545 → 다크모드 #FF6B6B (더 밝게). 초록색 성공: #28A745 → #4ADE80. 파란색 링크: #007BFF → #60A5FA. 색상 변환기에서 HSL로 변환하고 L값을 조절해서 다크모드용 색상을 만드세요.
시스템 다크모드 감지
@media (prefers-color-scheme: dark)로 사용자 시스템 설정에 맞게 자동 전환할 수 있습니다. CSS 변수와 조합하면 효과적인 테마 시스템을 구축할 수 있습니다.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.