JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<div class="wrapper">
<div class="block">
  <div class="bgcolor" style="background-color: #bee2cd"></div>
  <h2 class="block_header">Один</h2>
</div>
<div class="block">
  <div class="bgcolor" style="background-color: #d3e2be"></div>
  <h2 class="block_header">Два</h2>
</div>
<div class="block">
  <div class="bgcolor" style="background-color: #e2d2be"></div>
  <h2 class="block_header">Три</h2>
</div>
</div>

CSS

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.bgcolor {
  width: 100px;
  height: 100px;
}

JavaScript

$(document).ready(function () {

    $('.bgcolor').each(function () {
        var backColor = $(this).css('background-color');


        function rgb2hex(rgb) {
            var rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
            var masBgck = [];

            return (rgb && rgb.length === 4) ? "#" +
                ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
                ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
                ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
        };

        var hexColor = rgb2hex(backColor)
        $(this).parent().find('.block_header').css('color', hexColor);

        
    })
})