11 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Alpha (alpha channel) - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Alpha | reference | web, html, css, javascript, documentation | 2026-05-05T05:24:15.337082+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Alpha (alpha channel)
The alpha channel specifies to opacity of a (<color>). Colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the color. Each of these components is called a channel. In a typical image file, the color channels describe how much red, green, and blue are used to make up the final color. To represent a color through which the background can be seen to some extent, a fourth channel is added to the color: the alpha channel.
For example, the color #8921F2 (also described as rgb(137 33 242) or hsl(270 89% 54)) is a nice shade of purple. Below you see a small box of that color in the top-left corner and a box of the same color but with an alpha channel set at 50% (or 0.5) opacity, #8921F280, where 80 is the hexadecimal equivalent of 50%. This color is also described as rgb(137 33 242 / 50%) or hsl(270 89% 54 / 50%). The two boxes are drawn on top of a paragraph of text.
As you can see, the color without an alpha channel completely blocks the background text, while the box with the alpha channel leaves it visible through the purple background color.
In this article
See also
- CSS colors
- Learn: Values and units
- Image file type and format guide
- Alpha compositing on Wikipedia
- RGBA color model on Wikipedia
- Channel (digital image) on Wikipedia