--- id: css-rgb-colors title: "CSS RGB Colors" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["RGB", "rgb()", "RGBA", "rgba()", "RGB color model", "CSS RGB 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: ["css", "web", "frontend", "w3schools", "color", "rgb", "rgba"] raw_sources: ["https://www.w3schools.com/css/css_colors_rgb.asp"] applied_in: [] github_commit: "" --- # [[CSS RGB Colors]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) An RGB color value is defined with `rgb(red, green, blue)`, where each light source ranges from 0 to 255, and `rgba()` adds an alpha channel (0.0–1.0) to control opacity. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **RGB = Red, Green, Blue** β€” colors are formed by combining these three light sources. [S1] - **Syntax** β€” `rgb(red, green, blue)`. [S1] - **Range** β€” each parameter (red, green, blue) defines the intensity of the color from 0 to 255. [S1] - **How it mixes** β€” `rgb(255, 0, 0)` is displayed as red, because red is set to its highest value (255) and the others are set to 0. [S1] - **Black and white** β€” black is `rgb(0, 0, 0)`; white is `rgb(255, 255, 255)`. [S1] - **RGBA** β€” RGBA extends RGB with an alpha channel for opacity: `rgba(red, green, blue, alpha)`, where alpha ranges from 0.0 (fully transparent) to 1.0 (not transparent). [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Equal channels = gray** β€” setting red, green, and blue to the same value produces a shade of gray. [S1] - **Max one channel** β€” pushing a single channel to 255 while keeping the others at 0 produces a pure primary color (e.g. red, blue). [S1] - **Opacity via alpha** β€” append an alpha value with `rgba()` to make the same color progressively more transparent. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **RGB Value** RGB colors represent Red, Green, and Blue light sources. The syntax is `rgb(red, green, blue)`, where each parameter (red, green, and blue) defines the intensity of the color from 0 to 255. `rgb(255, 0, 0)` is displayed as red, because red is set to its highest value (255) and the others are set to 0. [S1] Examples of RGB color values shown on the page: [S1] ```css rgb(255, 0, 0) /* red */ rgb(0, 0, 255) /* blue */ rgb(60, 179, 113) /* medium sea green */ rgb(238, 130, 238)/* violet */ rgb(255, 165, 0) /* orange */ rgb(106, 90, 205) /* slate blue */ ``` Black is `rgb(0, 0, 0)` and white is `rgb(255, 255, 255)`. [S1] **Shades of Gray** Shades of gray are often defined using equal values for all three light sources: [S1] ```css rgb(60, 60, 60) rgb(90, 90, 90) rgb(120, 120, 120) rgb(180, 180, 180) rgb(210, 210, 210) rgb(240, 240, 240) ``` **RGBA Value** RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity for a color. An RGBA color value is specified with `rgba(red, green, blue, alpha)`. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). [S1] The page demonstrates the same color at increasing opacity: [S1] ```css rgba(255, 99, 71, 0) /* fully transparent */ rgba(255, 99, 71, 0.2) rgba(255, 99, 71, 0.4) rgba(255, 99, 71, 0.6) rgba(255, 99, 71, 0.8) rgba(255, 99, 71, 1.0) /* not transparent */ ``` ## πŸ› οΈ 적용 사둀 (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) RGB function (language: CSS): ```css selector { color: rgb(red, green, blue); /* each 0–255 */ } ``` RGBA function with opacity: ```css selector { color: rgba(red, green, blue, alpha); /* alpha 0.0–1.0 */ } ``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) - **RGB vs RGBA** β€” use `rgb()` for an opaque color defined by red/green/blue intensities; use `rgba()` when the color also needs an opacity (alpha) value from 0.0 (fully transparent) to 1.0 (not transparent). [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.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS HEX]], [[CSS HSL]], [[CSS Colors]], [[CSS Background Color]] - **μ°Έμ‘° λ§₯락:** Referenced whenever a color must be defined numerically by light intensity, or whenever an opacity channel is needed via RGBA. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS RGB Colors β€” https://www.w3schools.com/css/css_colors_rgb.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS RGB Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).