Is there a way that we can display the rendered background color hex value inside the div

Hi Jess,

I think you want something like this?

<div class="box">#ffffff</div>

There's no way that I know of to get the hex code inside the html without getting javascript involved.

However, you can use the content property in conjunction with either the ::before or ::after pseudo elements and you could achieve it with sass alone. The hex code will not be part of the html but you will still be able to see it on the page.

Here's a codepen demo that should be enough to get you started: http://codepen.io/anon/pen/myeXOg I worked off the video example with the gradient and 100 box div's

The .scss:

.box {
    width: 100%;
    height: 20px;

    @for $i from 1 through 100 {
      $bg-color: darken(white, $i);
      $color: invert($bg-color);
      &:nth-child(#{$i}) {
        background: $bg-color;

        &::before {
          content: '#{$bg-color}';
          position: absolute;
          color: $color;
       }
    }
  }
}

The basic idea is that you want to get the background color into the content property and then choose a suitable text color to display it in.

I used the invert() function here but as you can see, it's a bad choice for right in the middle. You'll probably need to look at other functions or you might need to calculate the color each time through the loop in order to get a properly contrasting color.

Here's one example of how you might handle it: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass

That technique checks if the lightness is greater than 50 and uses black for the color, otherwise it uses white for the color. This would be ok if you're fine with only 2 text colors being used. I have not tried it with this codepen demo but I imagine it would make the text on the top half black and the bottom half would be white.

The other problem is that some of these hexcodes transate to css color keywords. I'm not sure if there's a way to force it to use hexcodes but that's something else to look into if you don't want color names displayed.

Let me know if you were talking about something else entirely.