RGB나 HEX보다 HSL이 색상 작업에 더 편하다는 말을 들어보셨나요? HSL은 인간이 색상을 인식하는 방식과 비슷해서 직관적으로 색상을 조절할 수 있습니다.
HSL이란?
H(Hue, 색상)는 0~360도의 색상환 각도입니다. 0도는 빨강, 120도는 초록, 240도는 파랑입니다. S(Saturation, 채도)는 색의 선명함, L(Lightness, 밝기)는 밝고 어두운 정도입니다.
HSL의 장점
같은 톤의 다른 색상을 만들려면 H값만 바꾸면 됩니다. 파스텔 톤을 만들려면 S를 낮추고 L을 높이면 됩니다. RGB에서는 이런 작업이 복잡하지만 HSL에서는 직관적입니다. 색상 변환기에서 HSL 값을 조절해보세요.
CSS에서 HSL 사용하기
color: hsl(210, 100%, 50%);처럼 사용합니다. 호버 효과로 밝기만 바꾸고 싶다면 L값만 조절하면 되어 편리합니다.
HSL 활용 실전 예제
버튼 호버 효과를 만들 때 HSL이 편합니다. 기본 상태가 hsl(210, 100%, 50%)라면 호버에서 hsl(210, 100%, 40%)처럼 L만 바꾸면 됩니다. RGB에서는 세 값을 모두 계산해야 해서 번거롭습니다. 색상 변환기로 HEX를 HSL로 변환해서 사용해보세요.
CSS에서 hsl() 함수
최신 CSS에서는 hsl(210deg 100% 50% / 0.8)처럼 투명도도 같이 지정할 수 있습니다. 색상 작업이 많은 프로젝트라면 HSL 형식으로 통일하는 것도 좋은 선택입니다. 색상 간의 관계를 파악하기 쉬워져서 팔레트 관리가 수월해집니다.
색상 선택 시 고려사항
프로젝트의 분위기, 타겟 사용자, 경쟁사 색상을 모두 고려해서 메인 컬러를 정하세요. 한 번 정한 색상은 브랜드 정체성이 되므로 신중하게 결정해야 합니다.