About This CSS Issue
The CSS rgba() function takes the red, green and blue channels as separate numbers, so a hex code or a color name inside it, as in rgba(#1f2937, 0.75), is invalid.
Passing a whole color to rgba() is Sass syntax. Sass has its own rgba() that accepts a color and an alpha value, and the compiler turns rgba(#1f2937, 0.75) into rgba(31, 41, 55, 0.75). CSS has no such form, so when that code sits in a .css file, a <style> element or a style attribute, the browser gets it as written and drops the whole declaration. The element then keeps whatever background, border, shadow or text color earlier rules gave it, which can put light text on a light background. The validator names the property and quotes the argument it rejected. It reports rgb() the same way, and also flags a color keyword such as red or currentcolor in that position.
A compiled Sass file can still contain the error inside a custom property. Sass copies custom property values to the CSS as written, so --overlay: rgba(#1f2937, 0.75); comes out of the compiler unchanged, and the validator reports it under --overlay. Write --overlay: #{rgba(#1f2937, 0.75)}; instead, and Sass computes the value before writing it out.
To fix the CSS directly, convert the hex code to its three channels (#1f2937 is 31, 41, 55) and write rgba(31, 41, 55, 0.75), or rgb(31 41 55 / 0.75) in the space-separated syntax. A hex code can also take the alpha as two extra digits: #1f2937bf is the same color at about 75% opacity. To keep the original hex code, use relative color syntax, rgb(from #1f2937 r g b / 0.75), which current versions of the major browsers support.
Invalid example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Overlay</title>
<style>
.overlay {
background: rgba(#1f2937, 0.75);
color: #fff;
}
</style>
</head>
<body>
<div class="overlay">
<p>Sunset over the harbor</p>
</div>
</body>
</html>
Valid example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Overlay</title>
<style>
.overlay {
background: rgba(31, 41, 55, 0.75);
color: #fff;
}
</style>
</head>
<body>
<div class="overlay">
<p>Sunset over the harbor</p>
</div>
</body>
</html>
Valid example with relative color syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Overlay</title>
<style>
.overlay {
background: rgb(from #1f2937 r g b / 0.75);
color: #fff;
}
</style>
</head>
<body>
<div class="overlay">
<p>Sunset over the harbor</p>
</div>
</body>
</html>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.