How to set contents to background color?

Question

I have a table with a variety of dynamically generated background colors. I'd like to use jQuery to populate the table cell contents with the cell's actual background color. I can use $("td").text("new contents"); to change the contents of the cells. I tried $("td").text($(this).css("backgroundColor")); to put the background color into the cell, but the background color doesn't come through.

$("td").text(
  $(this).css("backgroundColor")
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>lighten</td>
    <td style="background-color: #d379a6;">10%</td>
    <td style="background-color: white;">50%</td>
    <td style="background-color: white;">100%</td>
  </tr>
    <tr>
    <td>darken</td>
    <td style="background-color: #ad3972;">10%</td>
    <td style="background-color: #14060d;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
  <tr>
    <td>mix</td>
    <td style="background-color: #b24a7e;">10%</td>
    <td style="background-color: #632946;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
</table>

Answer 1

Try this instead:

$("td").text(function() {
    return $(this).css("backgroundColor");
});

.text method can take a function as argument. In this case this function must return value to be used as new text content for elements in collection.

Your version $("td").text($(this).css("backgroundColor")); is incorrect because in this case this points to global object (which is window object) and obviously $(this).css("backgroundColor") returns nothing.

$("td").text(function() {
    return $(this).css("backgroundColor");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>lighten</td>
    <td style="background-color: #d379a6;">10%</td>
    <td style="background-color: white;">50%</td>
    <td style="background-color: white;">100%</td>
  </tr>
    <tr>
    <td>darken</td>
    <td style="background-color: #ad3972;">10%</td>
    <td style="background-color: #14060d;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
  <tr>
    <td>mix</td>
    <td style="background-color: #b24a7e;">10%</td>
    <td style="background-color: #632946;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
</table>

Answer 2

The accepted answer solved the problem I was having, but I also wanted the colors to be displayed in hex, which isn't what was returned by jQuery. So I ported in a solution for that from Can I force jQuery.css("backgroundColor") returns on hexadecimal format?. This is the final jQuery I ended up implementing:

$("td").text(function() {
  color = $(this).css("backgroundColor");
  bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
});