웹사이트나 앱을 만들 때 색상은 매우 중요한 요소입니다. 그런데 색상을 표현하는 방식이 여러 가지라 처음에는 헷갈릴 수 있습니다. 오늘은 가장 많이 사용되는 세 가지 색상 표현 방식인 HEX, RGB, HSL에 대해 알아보겠습니다.
HEX (16진수) 색상 코드
가장 널리 사용되는 색상 표현 방식입니다. #기호로 시작하며 6자리의 16진수로 구성됩니다.
#FF5733
FF(빨강) + 57(초록) + 33(파랑) = 주황빛 빨강색
- 장점: 간결하고, 웹에서 가장 보편적으로 사용
- 단점: 색상 조절이 직관적이지 않음
RGB (Red, Green, Blue)
빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 원색을 조합하여 색상을 표현합니다. 각 값은 0~255 사이의 숫자입니다.
rgb(255, 87, 51)
#FF5733과 동일한 색상을 RGB로 표현
- 장점: 투명도(Alpha) 추가 가능 → rgba(255, 87, 51, 0.5)
- 단점: 색상/채도/밝기 조절이 어려움
HSL (Hue, Saturation, Lightness)
색상(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현하는 방식입니다. 색상 조절이 가장 직관적입니다.
hsl(14, 100%, 60%)
색상 14도(주황), 채도 100%, 밝기 60%
- 장점: 밝기와 채도 조절이 쉬움, 색상 팔레트 생성에 유리
- 단점: 아직 HEX만큼 보편적이지 않음
언제 어떤 형식을 사용할까?
| 상황 | 추천 형식 |
|---|---|
| CSS 기본 색상 정의 | HEX |
| 투명도가 필요할 때 | RGBA |
| 색상 팔레트 생성 | HSL |
| 호버 효과 (밝기 조절) | HSL |
색상 변환이 필요하다면 색상 변환기를 활용해보세요.
결론
색상 코드는 처음엔 복잡해 보이지만, 각각의 특성을 이해하면 상황에 맞게 활용할 수 있습니다. 디자인 작업을 할 때 이 세 가지 형식을 자유자재로 활용해보세요!