Files
2nd/10_Wiki/Dev/Topic_CSS/CSS_HEX.md
T
Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
2026-07-05 00:10:59 +09:00

113 lines
4.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
id: css-hex-colors
title: "CSS HEX Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HEX", "hexadecimal color", "#rrggbb", "3-digit HEX", "CSS hex code", "color hex"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "color", "hex"]
raw_sources: ["https://www.w3schools.com/css/css_colors_hex.asp"]
applied_in: []
github_commit: ""
---
# [[CSS HEX Colors]]
## 🎯 한 줄 통찰 (One-line insight)
A HEX color is specified with `#RRGGBB`, where each two-digit hexadecimal pair (00ff, equal to decimal 0255) sets the red, green, and blue intensity. [S1]
## 🧠 핵심 개념 (Core concepts)
- **HEX format** — a hexadecimal color is specified with `#RRGGBB`, where the RR (red), GG (green), and BB (blue) hexadecimal integers specify the components of the color. [S1]
- **Range** — each component value is between 00 and ff (the same as decimal 0 to 255). [S1]
- **Red example** — `#ff0000` is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). [S1]
- **Black and white** — black is `#000000`; white is `#ffffff`. [S1]
- **3-digit shorthand** — the `#rgb` short form works only when both hexadecimal digits within each component pair are the same. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Equal pairs = gray** — when all three pairs hold the same value, the result is a shade of gray. [S1]
- **Shorthand condition** — `#rgb` is a valid abbreviation of `#rrggbb` only when each pair is a doubled digit (e.g. `ff`, `cc`, `99`). [S1]
## 📖 세부 내용 (Details)
**HEX Value**
A hexadecimal color is specified with `#RRGGBB`, where the RR (red), GG (green), and BB (blue) hexadecimal integers specify the components of the color. All values are between 00 and ff. `#ff0000` is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). Black is `#000000` and white is `#ffffff`. [S1]
Examples of HEX color values shown on the page: [S1]
```css
#ff0000 /* red */
#0000ff /* blue */
#3cb371 /* medium sea green */
#ee82ee /* violet */
#ffa500 /* orange */
#6a5acd /* slate blue */
```
**Shades of Gray**
Shades of gray are often defined using equal values for all three light sources: [S1]
```css
#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9
```
**3 Digit HEX Value**
The 3-digit hex code is a shorthand for some 6-digit hex codes. It is written as `#rgb`, where r, g, and b are repeated to create the full 6-digit form (`#rrggbb`). The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. [S1]
Examples of valid 3-digit shorthands: [S1]
```css
#fc9 /* same as #ffcc99 */
#f0f /* same as #ff00ff */
#b58 /* same as #bb5588 */
```
## 🛠️ 적용 사례 (Applied in summary)
The color values above are the page's own demonstration examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
6-digit HEX (language: CSS):
```css
selector {
color: #rrggbb; /* each pair 00ff */
}
```
3-digit HEX shorthand (only when each pair is a doubled digit):
```css
selector {
color: #rgb; /* e.g. #f0c == #ff00cc */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **6-digit vs 3-digit HEX** — use the full `#rrggbb` form for any color; the `#rgb` shorthand is only usable when each component pair is a doubled digit, in which case it produces an identical color with fewer characters. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS RGB]], [[CSS HSL]], [[CSS Colors]], [[CSS Background Color]]
- **참조 맥락:** Referenced whenever a color is specified as a hexadecimal code, the most common form in stylesheets.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS HEX Colors — https://www.w3schools.com/css/css_colors_hex.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS HEX Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).