CSS에서 color: red; 처럼 색상 이름을 쓰면 편하긴 한데, 실제 프로젝트에서는 문제가 될 수 있습니다. 색상 이름 대신 HEX나 RGB를 써야 하는 이유를 알아봅니다.
정확한 색상이 아니다
CSS의 red는 #FF0000입니다. 하지만 디자이너가 의도한 빨강이 #E53935일 수 있습니다. 색상 이름은 너무 제한적이고, 브랜드 가이드의 정확한 색상을 표현할 수 없습니다.
이름이 직관적이지 않다
lightgray(#D3D3D3)가 darkgray(#A9A9A9)보다 실제로 밝습니다. silver, gainsboro, whitesmoke의 차이를 기억하기 어렵습니다.
HEX/RGB 사용 권장
색상 변환기로 정확한 값을 확인하고 사용하세요. 코드 리뷰할 때도 어떤 색인지 명확해집니다. 예외적으로 transparent, currentColor 같은 키워드는 유용하게 쓸 수 있습니다.
예외적으로 쓸 수 있는 색상 키워드
transparent와 currentColor는 매우 유용한 키워드입니다. transparent는 투명한 배경을 만들 때, currentColor는 부모 요소의 텍스트 색상을 상속받을 때 사용합니다. 특히 SVG 아이콘의 fill 속성에 currentColor를 지정하면 CSS의 color 값에 따라 아이콘 색상이 자동으로 바뀝니다. 색상 변환기에서 정확한 값을 확인한 후 이런 키워드와 조합해서 사용하면 효과적입니다.
코드 컨벤션 정하기
팀에서 색상 표기 방식을 통일하세요. HEX만 사용하기, 소문자로 통일하기, 단축형 금지 등의 규칙을 정하면 코드 리뷰가 쉬워지고 일관성이 유지됩니다. Stylelint 같은 린터로 자동 검사하면 더 좋습니다.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.