Opacity
How see-through a color is, from fully transparent (0) to fully solid (1 or 100%).
Also called alpha, transparency, alpha channel
Opacity, or alpha, controls how much of what is behind a color shows through. In CSS it is the fourth value in rgb(35 135 255 / 50%), or the last two characters of an eight-digit HEX code.
Semi-transparent colors change depending on their background, so check contrast against what is actually behind them.
Guides that cover Opacity
- HSL What are HSL colors? HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
- HEX What are HEX Colors? Hex colors explained: how hex color codes like #FF5733 work, how #RRGGBB maps to RGB, what shorthand hex means and how to convert hex to RGB. Read on.
- HSL What are HSL colors? HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
- RGB What are RGB colors? RGB color explained: how red, green and blue - 255 values make every color on screen, how to read an RGB color code, RGB vs HEX, and RGBA. Learn it fast.
- HEX What are HEX Colors? Hex colors explained: how hex color codes like #FF5733 work, how #RRGGBB maps to RGB, what shorthand hex means and how to convert hex to RGB. Read on.