본문 바로가기
language/css

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

by 죄니안죄니 2025. 5. 12.

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

댓글