Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
RGB and RGBA are CSS color notations used to style HTML elements. RGB defines a color with red, green, and blue channels; an optional alpha channel controls how opaque that color is.
color: rgb(255 0 0);
background-color: rgb(0 0 0 / 0.5);The first example is opaque red. The second is black at 50% opacity. Although people commonly say “HTML RGB colors,” RGB is not an HTML element or special HTML color attribute—it is a CSS value applied inline, in an embedded stylesheet, or through an external CSS file.
What RGB and RGBA mean
RGB stands for red, green, blue. Each channel describes the intensity of one primary color:
- 0 means none of that channel.
- 255 means maximum intensity in ordinary numeric examples.
- Combining the three channels produces a color in the sRGB color space.
CSS RGB colors normally use the sRGB color space. See the CSS Color specification’s sRGB definition.
#1 Best Overall
- Features numbered swatches
- 2 value finders -green and red
- Color guide and fabric preview window
| CSS value | Color |
|---|---|
rgb(0 0 0) |
Black |
rgb(255 255 255) |
White |
rgb(255 0 0) |
Red |
rgb(0 255 0) |
Green |
rgb(0 0 255) |
Blue |
rgb(255 255 0) |
Yellow |
rgb(0 255 255) |
Cyan |
rgb(255 0 255) |
Magenta |
RGBA traditionally means RGB plus alpha. In current CSS, however, rgba() is an alias for rgb(); it is not a separate color space. The MDN RGB reference recommends rgb() for new code.
Modern RGB syntax
Modern CSS separates RGB channels with spaces and places alpha after a slash:
Recommended Free Tools
rgb(255 99 71)
rgb(255 99 71 / 0.8)
rgb(100% 38.8% 27.8% / 80%)The RGB channels can use numbers or percentages. Alpha can use a number from 0 to 1, or a percentage from 0% to 100%. The CSS Color Level 4 specification defines this modern form.
Legacy comma-separated syntax
Older stylesheets commonly use commas:
rgb(255, 99, 71)
rgba(255, 99, 71, 0.8)This syntax remains valid and widely supported. It is useful when maintaining an existing project or reading older tutorials. For new CSS, prefer the modern form:
rgb(40 120 220 / 0.7)Do not casually mix the two styles. Use either space-separated channels with a slash for alpha, or the complete comma-separated legacy form.
Rank #2
- These are the words in Charlotte's web, high in the barn
- Her spiderweb tells of her feelings for a little pig named Wilbur, as well as the feelings of a little girl named Fern … who loves Wilbur, too
- Their love has been shared by millions of readers
Understanding the alpha channel
Alpha describes opacity during compositing. It does not create one permanently lighter version of a color; the visible result depends on the background behind it.
| Alpha | Meaning |
|---|---|
0 or 0% |
Fully transparent |
0.25 or 25% |
25% opaque |
0.5 or 50% |
50% opaque |
0.75 or 75% |
75% opaque |
1 or 100% |
Fully opaque |
For precision, say “50% opaque” or “50% transparent” according to what you mean. For example, rgb(255 0 0 / 0.2) is 20% opaque and 80% transparent.
/* Fully transparent black */
rgb(0 0 0 / 0)
/* Semi-transparent black */
rgb(0 0 0 / 0.25)
/* Semi-transparent white */
rgb(255 255 255 / 0.5)
/* Fully opaque blue */
rgb(0 0 255 / 1)RGB numbers and percentages
These represent the same primary red:
rgb(255 0 0)
rgb(100% 0% 0%)For the familiar 8-bit-style scale, conversions are:
percentage = number ÷ 255 × 100
number = percentage ÷ 100 × 255| Numeric channel | Percentage |
|---|---|
0 |
0% |
128 |
About 50.2% |
255 |
100% |
The 0–255 scale is a convenient beginner model, not a claim that every CSS color representation is limited to exactly 8-bit storage.
Using RGB colors in HTML
Inline CSS
<p style="color: rgb(34 34 34);">Dark gray text</p>
<div style="background-color: rgb(0 120 255 / 0.2);">
A translucent blue background
</div>Inline styles are convenient for small demonstrations, but repeated colors are harder to maintain this way.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Embedded CSS
<style>
.notice {
color: rgb(20 40 80);
background-color: rgb(80 160 240 / 0.2);
}
</style>External CSS
<link rel="stylesheet" href="styles.css">/* styles.css */
.button {
background-color: rgb(0 120 215);
color: rgb(255 255 255);
}For reusable designs, a stylesheet and CSS custom properties are generally the better choice.
Reusable RGB colors with custom properties
:root {
--brand-blue: rgb(0 102 204);
--brand-blue-overlay: rgb(0 102 204 / 0.15);
--text-color: rgb(30 30 30);
}
.button {
background-color: var(--brand-blue);
color: rgb(255 255 255);
}
.button:hover {
background-color: rgb(0 102 204 / 0.85);
}Custom properties make theme changes and consistent transparency variants easier.
RGB and hexadecimal colors
The same opaque colors can be written in hexadecimal:
rgb(255 0 0) /* #ff0000 */
rgb(0 128 255) /* #0080ff */
rgb(255 0 0 / 0.5) /* approximately #ff000080 */CSS’s eight-digit hexadecimal format is #RRGGBBAA:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallRRis red.GGis green.BBis blue.AAis alpha.
Short forms include #RGB and #RGBA. Each digit is repeated when expanded, so #f008 becomes #ff000088. Alpha comes last in CSS; the format is not #AARRGGBB. See MDN’s hexadecimal color reference.
Rank #4
Alpha conversion is approximately:
hex alpha ≈ alpha × 255
alpha ≈ hex alpha ÷ 255| Alpha | Hexadecimal alpha |
|---|---|
0 |
00 |
0.25 |
40 |
0.5 |
80 |
0.75 |
BF |
1 |
FF |
Color alpha versus the opacity property
These declarations have different effects:
/* The entire element and its contents become translucent */
.panel {
opacity: 0.5;
}
/* Only the background color becomes translucent */
.panel {
background-color: rgb(0 0 0 / 0.5);
}opacity affects the whole element, including text, borders, descendants, and backgrounds. Alpha attached to a specific color affects only that color. Alpha is therefore useful for translucent backgrounds, borders, shadows, overlays, and gradient stops:
border: 1px solid rgb(0 0 0 / 0.12);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);Transparency, compositing, and accessibility
A translucent red overlay looks different over white, gray, blue, or an image. The browser composites the foreground with whatever is behind it. Consequently, rgb(255 0 0 / 0.5) has no single fixed visible RGB result without a specified backdrop.
Check the complete composition when designing:
- Test text against the actual background, not just the foreground RGB value.
- Check hover and keyboard focus states separately.
- Do not use transparency to conceal low-contrast text.
- Use caution with overlays on images, where contrast can change from one area to another.
- Keep focus indicators clearly visible.
Alpha alone does not make a design accessible. Contrast depends on the foreground, resulting background, rendering, and context.
Common mistakes and fixes
Putting RGB in HTML as an element
This is invalid:
<rgb(255, 0, 0)>Text</rgb>Use a CSS declaration instead:
<p style="color: rgb(255 0 0);">Text</p>Adding alpha without the slash
Use:
rgb(255 0 0 / 0.5)
rgba(255, 0, 0, 0.5)Do not use the ambiguous form rgb(255 0 0 0.5).
Mixing comma and slash syntax
Choose one complete form:
rgb(255 0 0 / 0.5)
rgba(255, 0, 0, 0.5)Expecting alpha to lighten a color
Alpha reveals or blends with the background; it does not simply replace the color with a lighter opaque color.
Assuming rgba() is unsupported
rgba() remains valid and useful when reading or maintaining existing CSS. It is a legacy spelling and an alias of rgb(), not a removed function.
Misreading browser developer tools
A browser may serialize authored modern CSS in a legacy-looking form. For example, source written as rgb(255 0 0 / 50%) may appear in computed styles as rgba(255, 0, 0, 0.5). Equivalent serialization does not necessarily indicate a rendering problem.
When RGB is the right choice
Use RGB when a specification gives you red, green, and blue channel values, when you need alpha, or when RGB values are easiest to compare with image and design tools. Hexadecimal is equally suitable when a project already uses it, especially with #RRGGBBAA. HSL or HWB can be more convenient when you need to reason about hue, saturation, lightness, or whiteness rather than individual channels.
Advanced current CSS
Modern CSS also permits none for a missing component, for example:
rgb(100% none 0%)This is an advanced CSS Color Level 4 feature, not a beginner requirement. Newer relative-color features likewise should not be assumed to have exactly the same support as basic RGB and RGBA. See the specifications for missing components and current RGB syntax and compatibility details.
Copy-ready complete example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: rgb(245 247 250);
color: rgb(30 35 40);
font-family: system-ui, sans-serif;
}
.card {
background-color: rgb(255 255 255);
border: 1px solid rgb(0 0 0 / 0.12);
box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
padding: 1rem;
}
.badge {
background-color: rgb(0 102 204 / 0.15);
color: rgb(0 70 150);
padding: 0.25rem 0.5rem;
}
</style>
</head>
<body>
<article class="card">
<span class="badge">RGB example</span>
<p>This card uses RGB colors and alpha transparency.</p>
</article>
</body>
</html>Quick reference
rgb(255 0 0) /* opaque red */
rgb(255 0 0 / 0.5) /* red, 50% opaque */
rgb(100% 0% 0% / 50%) /* same idea using percentages */
rgb(255, 0, 0) /* legacy opaque syntax */
rgba(255, 0, 0, 0.5) /* legacy alpha syntax */
#ff0000 /* opaque red */
#ff000080 /* red, approximately 50% alpha */Basic RGB and RGBA functions are broadly supported. If you target older browsers, test the exact modern syntax and any advanced CSS Color features your project uses rather than assuming all newer color features share identical support.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
