🎯 색상 지정 방식 총정리 – HEX, RGB, HSL, transparent

🎯 색상 지정 방식 총정리 – 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의 원리 – 상속과 우선순위”에서는 어떤 속성이 상속되고, 어떤 순서로 스타일이 적용되는지 정확히 설명합니다.