butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
19aa1cd7ac
kb/data/developer.mozilla.org/en-US/docs/Glossary/RGB-0.md

188 lines
12 KiB
Markdown
Raw Blame History

---
title: "RGB - Glossary | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Glossary/RGB"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:41:51.280598+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/RGB#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/RGB#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
2. [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB)
# RGB
_Red-Green-Blue_ (**RGB**) is a color model that represents colors as mixtures of three underlying components (or channels), namely: _red_ , _green_ , and _blue_. This model describes a color with a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255). Each number represents the primary colors' different intensities (or contributions) in determining the final color.
An RGB value by itself has no meaning. It's the color model that defines how the three components interact within a [color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space) to define a color. Graphically, a point in a three-dimensional grid or cube represents a color. Each dimension (or axis) corresponds to a different channel. The RGB color model is then a _cubic_ , or _Cartesian_ , coordinate system of the underlying color space.
![The RGB color model as a cube with red, blue, and green axes](https://developer.mozilla.org/en-US/docs/Glossary/RGB/rgb_color_cube.png)
For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 1.
Note that `sRGB` is one of [several RGB color spaces](https://developer.mozilla.org/en-US/docs/Glossary/Color_space#rgb_color_spaces). Other RGB color spaces, like the _Adobe RGB_ color space, can represent a wider [gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut) of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ are different.
There are many ways to describe the RGB components of a color. In [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS), they can be represented in various ways: in [hexadecimal](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/hex-color) notation as a single 24-bit integer (for example, `#add8e6` is light blue) or in functional notation by using [`rgb()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/rgb) with three percent values or numbers ranging from `0` to `255` (for example, `rgb(46 139 87)` is green). CSS also supports the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color) function.
RGB is not the only color model that can represent the `sRGB` [color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space). Cylindrical coordinate systems like the [`HSL`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent an `sRGB` color on the web.
## In this article
* [See also](https://developer.mozilla.org/en-US/docs/Glossary/RGB#see_also)
## [See also](https://developer.mozilla.org/en-US/docs/Glossary/RGB#see_also)
* [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value) CSS data type
* [ColorAide: sRGB color space](https://facelessuser.github.io/coloraide/colors/srgb/)
* [RGB color model](https://en.wikipedia.org/wiki/RGB_color_model) on Wikipedia
* [sRGB color space](https://en.wikipedia.org/wiki/SRGB) on Wikipedia
* [Adobe RGB color space](https://en.wikipedia.org/wiki/Adobe_RGB_color_space) on Wikipedia
Reference in New Issue View Git Blame Copy Permalink