---
id: html-colors
title: "HTML Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML color names", "HTML background color", "HTML text color", "RGB HEX HSL", "RGBA HSLA", "CSS color values"]
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: ["html", "web", "frontend", "w3schools", "colors", "css"]
raw_sources: ["https://www.w3schools.com/html/html_colors.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Colors]]

## 🎯 한 줄 통찰 (One-line insight)
In HTML, colors can be specified by one of the 140 standard color names or by RGB, HEX, HSL, RGBA, or HSLA values, and applied to backgrounds, text, and borders via the `style` attribute. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Color names** — a color can be specified using a color name; HTML supports 140 standard color names (e.g. Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray). [S1]
- **Background color** — set the background color for HTML elements with `background-color`. [S1]
- **Text color** — set the color of text with `color`. [S1]
- **Border color** — set the color of borders with the `border` shorthand. [S1]
- **Color values** — colors can also be specified using RGB, HEX, HSL, RGBA, and HSLA values. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Named-color pattern** — `style="color:Tomato;"` / `style="background-color:DodgerBlue;"`. [S1]
- **Bordered-element pattern** — `style="border:2px solid Tomato;"`. [S1]
- **Numeric-value pattern** — interchange named colors with `rgb()`, `#hex`, `hsl()`, `rgba()`, or `hsla()` to get the same hue. [S1]
- **Alpha-channel pattern** — `rgba()` and `hsla()` add a fourth opacity value (e.g. `0.5`). [S1]

## 📖 세부 내용 (Details)
**Color Names**
In HTML, a color can be specified by using a color name. The page displays examples such as Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, and LightGray. HTML supports 140 standard color names. [S1]

**Background Color**
You can set the background color for HTML elements. [S1]
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
```

**Text Color**
You can set the color of text. [S1]
```html
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
```

**Border Color**
You can set the color of borders. [S1]
```html
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
```

**Color Values**
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following all represent the same Tomato-like hue: [S1]

| Value type | Example |
|---|---|
| RGB | `rgb(255, 99, 71)` |
| HEX | `#ff6347` |
| HSL | `hsl(9, 100%, 64%)` |
| RGBA | `rgba(255, 99, 71, 0.5)` |
| HSLA | `hsla(9, 100%, 64%, 0.5)` |

```html
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
```

## 🛠️ 적용 사례 (Applied in summary)
The background-color, text-color, and border-color examples above are the canonical applied examples from the source. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Named color on background and text (HTML):
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="color:Tomato;">Lorem ipsum...</p>
```
Colored border:
```html
<h1 style="border:2px solid Violet;">Hello World</h1>
```
Equivalent numeric color values:
```html
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source presents five interchangeable ways to express the same color, letting authors pick the form that fits their need: [S1]

| Form | When useful |
|---|---|
| Color name | Quick, readable; limited to 140 standard names |
| RGB `rgb(r,g,b)` | Explicit red/green/blue channels (0–255) |
| HEX `#rrggbb` | Compact hexadecimal form of RGB |
| HSL `hsl(h,s%,l%)` | Hue/saturation/lightness, intuitive for tweaking |
| RGBA / HSLA | Same as RGB/HSL plus an alpha (opacity) channel |

## ⚖️ 모순 및 업데이트 (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)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML CSS]], [[HTML Styles]], [[HTML Attributes]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever specifying background, text, or border colors in HTML/CSS.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Colors — https://www.w3schools.com/html/html_colors.asp

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