---
id: w3css-color-flat
title: "W3CSS Flat UI Colors"
category: "Programming_Language"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["flat ui colors", "w3-flat-*", "W3.CSS 플랫 UI 색상"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.82
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["w3css", "css-framework", "w3schools", "colors", "flat-ui"]
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_flat.asp"]
applied_in: []
github_commit: ""
---

# [[W3CSS Flat UI Colors]]

## 🎯 한 줄 통찰 (One-line insight)
Unlike the default palette's generic color names (`w3-red`, `w3-blue`), Flat UI classes use evocative, non-literal names (`w3-flat-wet-asphalt`, `w3-flat-pomegranate`, `w3-flat-midnight-blue`) — meaning choosing a Flat UI color is closer to picking a paint-swatch name than specifying an exact hue, trading precision for a curated, designer-picked aesthetic. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`w3-flat-*` class family** — a separate, downloadable color library (`Download the CSS`) layered on top of the default W3.CSS palette. [S1]
- **~20 named colors** spanning cool-to-warm groups: turquoise/green-sea/emerald/nephritis (greens-teals), peter-river/belize-hole (blues), amethyst/wisteria (purples), wet-asphalt/midnight-blue (dark neutrals), sun-flower/orange/carrot/pumpkin (yellows-oranges), alizarin/pomegranate (reds), clouds/silver/concrete/asbestos (greys). [S1]
- **Same usage pattern as any W3.CSS color** — just `class="w3-flat-<name>"`, no special markup. [S1]

## 📖 세부 내용 (Details)
- Applying a Flat UI color: `<div class="w3-flat-emerald"><p>London is the most populous city...</p></div>`. [S1]
- Full CSS downloadable separately via a linked "Download the CSS" button rather than bundled in the base `w3.css`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다 — wet-asphalt/midnight-blue 같은 어두운 중립색과 alizarin/pomegranate 같은 채도 높은 색을 조합해 플랫 디자인 특유의 톤을 내는 것이 실전 배색의 핵심이다. [S1]

## 💻 코드 패턴 (Code patterns)
Applying a Flat UI palette color (HTML/CSS):
```html
<div class="w3-flat-emerald">
  <p>London is the most populous city in the United Kingdom.</p>
</div>
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.82
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3.CSS Tutorial]]
- **관련 개념:** [[W3CSS Color Material]], [[W3CSS Color Metro]], [[W3CSS Trends]]
- **참조 맥락:** 플랫 UI 색상 레퍼런스 — 윈도우 메트로 색상(Color Metro) 챕터로 이어짐.

## 📚 출처 (Sources)
- [S1] W3Schools — W3.CSS Flat UI Colors — https://www.w3schools.com/w3css/w3css_color_flat.asp

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