🎯 색상 지정 방식 총정리 – HEX, RGB, HSL, transparent
CSS에서 색상을 지정하는 방법은 다양합니다. 단순한 #FF0000
에서부터 rgba()
, hsl()
, transparent
까지. 각각의 방식은 상황에 따라 장단점이 있으며, 제대로 이해하면 디자인 일관성과 유지보수가 훨씬 쉬워집니다.
1️⃣ HEX (16진수) 색상
- 가장 널리 사용되는 방식
- 형식:
#RRGGBB
또는#RGB
- 예:
#FF0000
(빨강),#00FF00
(초록),#0000FF
(파랑)
.box {
background-color: #3498db;
}
축약형: #333
→ #333333
와 동일
2️⃣ RGB 색상
- 형식:
rgb(255, 0, 0)
- 각 색상 성분(R, G, B)을 0~255 값으로 표현
.box {
color: rgb(255, 87, 51);
}
직관적이고 디지털 친화적 – 디자인 툴과 숫자 일치
3️⃣ RGBA – 투명도 포함
a
는 알파(Alpha) 값 → 0(투명) ~ 1(불투명)
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
활용 예: 반투명 배경, hover 효과 등
4️⃣ HSL – 색조 기반 색상
- 형식:
hsl(hue, saturation%, lightness%)
- Hue: 색상 (0~360도), 빨강: 0, 초록: 120, 파랑: 240
- Saturation: 채도 (%), Lightness: 밝기 (%)
.box {
background-color: hsl(200, 70%, 50%);
}
장점: 색조와 밝기 조절이 직관적 → 테마 시스템에 적합
5️⃣ HSLA – 투명도 포함
hsl()
에 알파 값을 더한 버전
.box {
background-color: hsla(340, 100%, 50%, 0.3);
}
투명한 색감을 만들어내고 싶을 때 유용합니다.
6️⃣ transparent – 완전 투명
- 배경/테두리 등에 완전 투명한 값을 지정
.box {
background-color: transparent;
}
주의: 완전히 투명하기 때문에 클릭 가능한 요소에서 주의 필요
📌 색상 지정 방식 요약 비교
형식 | 특징 | 장점 | 활용 예 |
---|---|---|---|
#RRGGBB | 16진수 고정 색상 | 간결, 널리 사용됨 | 기본 UI 컬러 |
rgb() | R/G/B 값 지정 | 디자인 툴과 동일 | 정밀한 색 조정 |
rgba() | 투명도 포함 | 오버레이, 효과용 | hover, 배경 흐림 |
hsl() | 색조 기반 | 직관적 색 조합 | 테마, 시스템 컬러 |
hsla() | 색조 + 투명도 | 투명 테마 표현 | Glass UI 등 |
transparent | 완전 투명 | 간단한 투명 설정 | 배경 제거 |
🧩 정리
- HEX는 가장 많이 쓰이며 간결
- RGB/RGBA는 수치 기반 → 정밀 제어
- HSL/HSLA는 색상 구성 → 테마/디자인 시스템에서 유용
- transparent는 투명한 영역 지정에 사용
📌 다음 글 예고
다음 글: “CSS inheritance와 cascading의 원리 – 상속과 우선순위”에서는 어떤 속성이 상속되고, 어떤 순서로 스타일이 적용되는지 정확히 설명합니다.
'language > css' 카테고리의 다른 글
🎯 CSS specificity(우선순위)와 !important 사용 시 주의점 (0) | 2025.05.12 |
---|---|
🎯 CSS inheritance와 cascading의 원리 – 상속과 우선순위 (0) | 2025.05.12 |
🎯 CSS 단위 총정리 – px, em, rem, %, vw/vh, fr (0) | 2025.05.12 |
🎯 display 속성 제대로 이해하기 (inline, block, flex, grid, none) (1) | 2025.05.11 |
🎯 CSS position 속성 차이 총정리 (static, relative, absolute, fixed, sticky) (1) | 2025.05.11 |
댓글