---
id: css-colors-css3
title: "CSS Colors (CSS3)"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["RGBA", "HSLA", "CSS opacity", "CSS3 colors", "alpha channel CSS", "transparent color"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "colors", "opacity"]
raw_sources: ["https://www.w3schools.com/css/css3_colors.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Colors (CSS3)]]

## 🎯 한 줄 통찰 (One-line insight)
CSS supports 140+ color names plus HEX, RGB, RGBA, HSL, and HSLA values, where the trailing alpha channel in RGBA/HSLA (and the `opacity` property) controls transparency from 0.0 to 1.0. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Color support** — CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. [S1]
- **RGBA** — extends RGB colors with an alpha channel that specifies opacity. [S1]
- **HSLA** — extends HSL colors with an alpha channel for opacity control. [S1]
- **Alpha range** — the alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque). [S1]
- **`opacity` property** — sets the opacity for the whole element; both background color and text become opaque/transparent. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Alpha-channel pattern** — append an alpha argument to `rgb(...)`/`hsl(...)` to get `rgba(...)`/`hsla(...)`, affecting only that color's transparency. [S1]
- **Element-opacity pattern** — `opacity` applies to the whole element (background and text alike), distinguishing it from a per-color alpha. [S1]

## 📖 세부 내용 (Details)
**CSS Colors**
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. [S1]

**RGBA Colors**
RGBA color values are an extension of RGB color values with an alpha channel that specifies the opacity for a color. The syntax is `rgba(red, green, blue, alpha)`. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The page shows a swatch series: `rgba(255, 0, 0, 0.2);`, `rgba(255, 0, 0, 0.4);`, `rgba(255, 0, 0, 0.6);`, and `rgba(255, 0, 0, 0.8);`. [S1]

```css
#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
```

**HSLA Colors**
HSLA color values are an extension of HSL color values with an alpha channel that specifies the opacity for a color. The syntax is `hsla(hue, saturation, lightness, alpha)`. The alpha parameter ranges from 0.0 to 1.0. The page shows a swatch series: `hsla(0, 100%, 30%, 0.3);`, `hsla(0, 100%, 50%, 0.3);`, `hsla(0, 100%, 70%, 0.3);`, and `hsla(0, 100%, 90%, 0.3);`. [S1]

```css
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
```

**CSS `opacity` Property**
The `opacity` property sets the opacity for the whole element (both background color and text will be opaque/transparent). The value ranges from 0.0 to 1.0. [S1]

**Note:** When using the `opacity` property to add transparency to the background of an element, the text inside the element will also be transparent/opaque! [S1]

```css
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
RGBA/HSLA alpha vs. the `opacity` property: [S1]
- **RGBA / HSLA alpha** — makes only that specific color transparent (e.g., a translucent background) while leaving other content, such as text, fully opaque.
- **`opacity` property** — applies transparency to the whole element, so the text inside also becomes transparent.
Choose the per-color alpha when you want a see-through background but readable text; choose `opacity` when the entire element should fade together. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: translucent RGBA backgrounds (`#p1`–`#p3`), translucent HSLA backgrounds (`#p1`–`#p4`), and element-wide `opacity: 0.6` backgrounds. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Translucent background color via RGBA (language: CSS):
```css
selector {
  background-color: rgba(255, 0, 0, 0.3);
}
```
Whole-element transparency via opacity:
```css
selector {
  background-color: rgb(255, 0, 0);
  opacity: 0.6;
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Color Keywords]], [[CSS Background Clip]], [[CSS Multiple Backgrounds]]
- **참조 맥락:** Referenced whenever a design needs translucent colors, layered overlays, or controlled element transparency.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Colors (CSS3) — https://www.w3schools.com/css/css3_colors.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Colors (CSS3)" page (Astra wiki-curation, P-Reinforce v3.1 format).
