텍스트와 UI 색상은 color(전경색)과 다양한 표현 방식(키워드·RGB·HSL·16진수·알파 채널)로 지정합니다. 이번 글은 초보자 기준으로 정확한 선택 기준과 바로 복붙 가능한 예제를 제공합니다.
요약
- color: 텍스트/텍스트 데코 전경색. 다른 속성의 기본값 currentColor의 기준이 됩니다.
- 표현 방식: 키워드(예: red), #RRGGBB(AA), rgb() / rgba(), hsl() / hsla().
- 알파 채널: rgba / hsla / #RRGGBBAA는 “그 값만” 투명, opacity는 요소 전체가 투명.
- 실무 팁: currentColor와 var(--primary)를 조합하면 테마 일관성이 올라갑니다.
1) color — 전경색의 기준
color는 요소의 텍스트와 텍스트 데코레이션(밑줄 등) 색을 지정합니다. 또한 currentColor라는 특별한 키워드의 기준이 되어, border-color 등의 기본값으로 재사용됩니다.
/* 전역 텍스트 컬러 — currentColor는 여기를 따릅니다 */
:root { color: #111827; } /* slate-900 */
a { text-decoration-color: currentColor; }2) 색 표현 방식
- 키워드: red, tomato 등 네임드 컬러.
- 16진수: #RRGGBB (또는 #RGB) + 알파 포함 #RRGGBBAA/#RGBA.
- rgb()/rgba(): 0~255(또는 0~100%) + 선택적 알파(0~1).
- hsl()/hsla(): 색조(0~360deg)·채도(%)·명도(%) + 선택적 알파.
3) rgb/ rgba
빛의 3원색 비율로 색을 지정합니다. 정수(0~255)나 퍼센트(0%~100%) 표기를 쓸 수 있고, 알파 값(0~1)으로 투명도를 더할 수 있습니다.
/* 동일한 빨강 — 표기만 다름 */
.color-rgb { color: rgb(255 0 0); } /* 공백 구분 신문법도 지원 */
.color-rgbp{ color: rgb(100% 0% 0%); }
.color-rgba{ color: rgba(255 0 0 / 0.5); } /* 알파: 50% */4) hsl/ hsla
색을 색조(H)·채도(S)·명도(L)로 분리해 지정합니다. hsl(0 100% 50%)는 빨강, hsl(120 100% 50%)는 초록, hsl(240 100% 50%)는 파랑을 의미합니다.
.brand { color: hsl(210 100% 45%); } /* 브랜드 파랑 */
.brand-50 { color: hsl(210 100% 45% / 0.5); } /* 알파 50% */5) 16진수 표기 — #RRGGBB(AA)
각 채널을 16진수(00~FF)로 지정합니다. #000은 #000000의 축약, #ff000080은 빨강+알파 50%를 의미합니다.
.hex { color:#ff6347; } /* tomato */
.hex-a { color:#ff634780; } /* 50% 투명(AA=80) */6) opacity vs 알파 채널
opacity는 요소 전체의 투명도를 조절합니다. 반면 rgba()/hsla()/#RRGGBBAA는 그 속성 값만 투명해집니다. 배경·이미지까지 희미해지면 opacity를, 텍스트만 희미하게 하려면 알파 채널을 쓰세요.
.alpha-text { color: rgba(0 0 0 / 0.5); } /* 텍스트만 50% */
.box-dim { background:#000; opacity:.5; } /* 상자+내용 전체 50% */7) 고급 — currentColor · CSS 변수
/* 테마 색상 토큰 */
:root {
--primary: hsl(210 100% 45%);
--muted: hsl(215 16% 47%);
}
/* currentColor 활용으로 일관성 ↑ */
.button {
color: var(--primary);
border: 2px solid currentColor; /* 글자색과 경계색이 동기화 */
}8) 자주 하는 실수 & 바로잡기
- opacity 남용: 텍스트만 희미하게 해야 하는데 요소 전체를 반투명 처리.
- 키워드만 사용: 빠르지만 미세 조정이 어려움 → RGB/HSL/HEX로 전환.
- 명도/채도 과다: hsl()에서 L 50% 내외, S 60~90% 범위로 먼저 테스트.
- 경계/아이콘 컬러 불일치: currentColor로 동기화.
9) 태그(속성) 개념 카드
color
- 정의: 텍스트/데코 전경색. currentColor의 기준.
- 언제: 글자/밑줄 색 통일, 테마 컬러 적용.
- 핵심: 기본값을 잘 잡으면 다른 속성의 기본색도 정돈.
rgb()/rgba()
- 정의: 빨강·초록·파랑(0~255 또는 %) + 선택적 알파.
- 언제: 디자인 시안과 숫자 값 매칭이 필요할 때.
- 핵심: 공백 구분 신문법 rgb(255 0 0 / .5) 지원.
hsl()/hsla()
- 정의: 색조(0~360)·채도(%)·명도(%) + 선택적 알파.
- 언제: 톤/채도 변형, 다크모드 대비 조정.
- 핵심: 같은 H에서 S/L만 조절해 계열색 생성.
#RRGGBB(AA)
- 정의: 16진수 2자리씩 채널 표기(+AA로 알파).
- 언제: 디자인 시스템/토큰 값으로 보관.
- 핵심: 축약형 #RGB/#RGBA도 존재.
opacity
- 정의: 요소 전체의 투명도(0~1).
- 언제: 카드/배너를 통째로 흐리게.
- 핵심: 자식에게도 영향 — 텍스트만 흐리게 하려면 알파 채널 사용.
currentColor & CSS 변수
- 정의: 현재 color 값을 참조 / --* 사용자 정의 속성.
- 언제: 경계/아이콘/링크 색 동기화, 테마 토큰화.
- 핵심: border-color: currentColor, color: var(--primary).
10) 예제
실습용(동작) + 복붙
rgb(255 0 0)
hsl(210 100% 45%)
#ff6347
rgba(0 0 0 / .5)
currentColor/var()
11) FAQ
Q1. 텍스트만 반투명하게 하려면?
rgba()/hsla()/#RRGGBBAA 같은 알파 채널을 쓰세요. opacity는 요소 전체가 투명해집니다.
Q2. rgb와 hsl 중 무엇을 쓰면 좋나요?
수치로 정확히 맞춰야 하면 rgb(), 톤 변형과 다크모드 조정엔 hsl()이 편리합니다.
Q3. #RRGGBBAA 호환성은 어떤가요?
현대 브라우저에서 널리 지원됩니다. 매우 오래된 브라우저를 지원한다면 rgba()로 대체하세요.
Q4. 경계/아이콘 색을 텍스트와 맞추려면?
border-color: currentColor 같이 currentColor를 사용하세요.
12) 마무리 요약
핵심: color로 전경색 기준을 잡고, 상황에 맞춰 rgb()/hsl()/#RRGGBB를 선택하세요. 투명도는 텍스트만이면 알파 채널, 컴포넌트 전체면 opacity. currentColor와 var(--*)로 색 일관성을 유지하면 유지보수가 쉬워집니다.