CSS에서 같은 빨간색을 #FF0000, rgb(255,0,0), hsl(0,100%,50%) 세 가지로 쓸 수 있다. 결과는 같은데 왜 여러 형식이 있을까? 각각의 장단점을 알아보자.
HEX 코드
가장 많이 쓰는 형식이다. #RRGGBB 6자리로 표현한다. 짧고 직관적이라 인기가 있다. 단점은 색상 조절이 직관적이지 않다는 것. 밝기를 10% 올리려면 어떻게 해야 할지 바로 알기 어렵다. 색상 변환기로 다른 형식으로 바꿔서 조절하는 게 편하다.
RGB/RGBA
rgb(255, 0, 0) 형식이다. 투명도를 넣으려면 rgba(255, 0, 0, 0.5). 알파 채널이 필요할 때 필수다. HEX에도 8자리 버전(#FF000080)이 있지만 브라우저 지원이 완벽하지 않다.
HSL/HSLA
Hue(색상), Saturation(채도), Lightness(밝기)로 표현한다. hsl(0, 100%, 50%)이 빨간색. 색상 조절이 직관적이다. 밝기만 바꾸려면 L 값만 조절하면 된다. 색상 변환기로 HEX를 HSL로 바꿔서 변형하고 다시 HEX로 바꾸는 방식이 편하다.
상황에 맞게 선택
정적 색상은 HEX, 투명도 필요하면 RGBA, 동적 색상 조절은 HSL. 필요에 따라 형식을 선택하고 변환하면 된다.
형식별 장단점
HEX: 짧고 복사하기 쉬움, 투명도 표현이 불편함. RGB: 직관적인 숫자, 채널별 조작 쉬움. HSL: 색상 조절이 직관적, 밝기/채도 조절 편함. 색상 변환기에서 세 형식을 모두 확인하고 상황에 맞게 선택하세요.
팀 컨벤션
프로젝트에서 하나의 형식으로 통일하면 코드 일관성이 유지됩니다. 대부분 HEX를 선호하지만, 동적 색상 조작이 많다면 HSL이 나을 수 있습니다.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.