Learn CSS Colors by Building a Set of Colored Markers - Step 93

Tell us what’s happening:
Code does not pass.

Your code so far
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
box-shadow: 0 0 20px 0 rgba(#3B7E20CC);
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </body>
</html>
/* file: styles.css */
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}


/* User Editable Region */

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
  box-shadow: 0 0 20px 0 rgba(#3B7E20CC);
}

/* User Editable Region */


.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
  box-shadow: 0 0 20px 0 blue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 93

Link to the challenge:

Hi there and welcome to our community!

Your code doesn’t pass because you have added the correct hex code but put it inside rgba parentheses for some reason. The rgb, rgba, hsl & hsla notations are not hex-based.

1 Like

Thanks, removed call to rgba function and now it passes. Assumed call to rgba was necessary because alpha channel was required.

No, they are different forms of notation. Which you choose to use is mostly a matter of personal preference, as they’re essentially different ways of notating the same thing.

Each two digit hex pair is equivalent to the 0-255 values in rgb (as 16x16=256). Both can have an alpha channel if required.

Question: how does #CC for alpha channel translate to 0 to 1.0. Is it:

#CC/#FF = x/1.0, where x is the decimal equivalent of #CC?

Yes, my understanding is that you can use any value between 00 and FF for the hex alpha channel, which will correspond to 256 possible opacity values.

This could be mapped directly to the alpha channel in rgba, though that’s defined as a value between 0 and 1.

So, you could theoretically map out 256 values in rgba too, though it would have no real practical application, as the human eye would have trouble distinguishing anything beyond a couple of decimal places, I’d have thunk.

Rounded to 3 decimal places for simplicity:
00 => 0
01 => 0.004
02 => 0.008
03 => 0.012
04 => 0.016

C9 => 0.785
CA => 0.789
CB => 0.793
CC => 0.797
CD => 0.801

So, essentially you just increment by a value of around 0.004 from 0 to 1.

thanks, that’s what I would’ve guessed. You’ve been very helpful :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.