How to dynamically change text color based on background color?

Navigation
1

I am trying to change the color of the text according to the background in css, I have a list, each line is a color, I need for clear text plans the text is black and for dark backgrounds the text is Of course.

Example: 

tr td {
  color: white;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

I'm using invert however it ends up reversing shades you do not need.

E + - link only without these effects.

    
asked by anonymous 25.04.2016 / 17:02

4 answers

1

As I could not find this solution in css and I'm using jQuery in my project I created a plugin to scan all the backgrounds of the tr's and change them according to their tonality.

Example: 

// Alimentando a Tabela para testes

var cores = ['#FFFFFF', '#FF0000', '#33ff33', '#0000FF', '#FF00FF', '#00FFFF', '#000000', '#FFFF00', '#FFFFFF', '#FFCCCC', '#FFCC99', '#FFFFCC', '#CCCCCC', '#C0C0C0', '#999999', '#666666', '#333333',
  '#000000', '#99FF99', '#66FF99', '#33ff33', '#00CC00', '#009900', '#006600', '#003300', '#FF6666', '#FF0000', '#CC0000', '#990000', '#660000', '#330000', '#CCFFFF', '#66FFFF', '#33CCFF',
  '#3366FF', '#3333FF', '#000099', '#000066', '#FFCC33', '#FF9900', '#FF6600', '#CC6600', '#993300', '#663300', '#FFCCFF', '#FF99FF', '#CC66CC', '#CC33CC', '#993366', '#663366', '#330033',
  '#FFFF99', '#70DB93', '#238E23', '#93DB70', '#00FF7F', '#2F4F2F', '#4A766E', '#4F4F2F', '#32CD32', '#527F76', '#215E21', '#9F9F5F', '#32CD99', '#6B8E23', '#426F42', '#7FFF00', '#8FBC8F',
  '#238E68', '#99CC32', '#5C3317', '#A62A2A', '#5C4033', '#97694F', '#855E42', '#D19275', '#8E2323', '#E9C2A6', '#A68064', '#EBC79E', '#6B4226', '#8E6B23', '#DB9370', '#5C4033', '#9F5F9F',
  '#9932CD', '#871F78', '#856363', '#4E2F2F', '#8E236B', '#4F2F4F', '#9370DB', '#DB7093', '#FF6EC7', '#DB70DB', '#BC8F8F', '#EAADEA', '#FF1CAE', '#CC3299', '#6F4242', '#B5A642', '#D9D919',
  '#8C7853', '#A67D3D', '#D98719', '#B87333', '#FF7F00', '#CD7F32', '#DBDB70', '#E47833', '#EAEAAE', '#CFB53B', '#FF7F00', '#FF2400', '#8C1717', '#D8D8BF', '#5F9F9F', '#42426F', '#6B238E',
  '#7093DB', '#C0D9D9', '#8F8FBD', '#3232CD', '#7F00FF', '#70DBDB', '#2F2F4F', '#23238E', '#4D4DFF', '#00009C', '#5959AB', '#3299CC', '#007FFF', '#236B8E', '#38B0DE', '#D8BFD8', '#ADEAEA',
  '#2F4F4F', '#545454', '#C0C0C0', '#A8A8A8', '#D9D9F3', '#E6E8FA', '#CDCDCD'
];
var table = '';
for (i = 0; i < cores.length; i++) {
  table += "<tr style='background-color:" + cores[i] + ";'><td> " + cores[i] + " </td></tr>";
}

table += "<tr><td>#FFFFFF  </td></tr>";

$("#table").append(table);


// Plugin jQuery - Muda a Cor do texto baseado na cor de fundo.

$.fn.textColorSwitch = function() {
  this.init = function() {
    $.each(this.find('tr'), function(key, val) {
      var colors = $(val).css('backgroundColor').match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      if (colors !== null) {
        var cor = 'white';

        var maxColor = (
          Math.floor((colors[1]) * 1) +
          Math.floor((colors[2]) * 1) +
          Math.floor((colors[3]) * 1)
        );

        if (maxColor > 382) {
          cor = 'black';
        }
        $(this).css('color', cor);
      }
    });
  };
  this.init();
  return this;
};

// Chamando o Plugin

$("table").textColorSwitch();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><tableid="table"></table>
    
25.04.2016 / 21:49
4

Using mix-blend-mode :

Accepting this parameter is not the greatest , but for now I believe it is the only reasonable alternative with CSS pure: 

.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}

td {
  color:#fff;
  mix-blend-mode: exclusion;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

Note that in this case, since it depends on two layers, I'm applying the property in <td> and not <tr> .


Alternate with border only:

I am posting only to have an output other than the automatic background color. The idea here is to highlight the writing with an "outline", simulated with text-shadow : 

.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}

.tr1,.tr2,.tr3,.tr4 {
  color:#000;
  text-shadow: 0 -1px 2px #fff,0 1px 2px #fff,-1px 0 2px #fff,1px 0 2px #fff;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>
    
25.04.2016 / 19:26
2

What you want to implement is invert except class tr1.

Change the css of.: 

tr td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}

for.: 

tr:not(.tr1) td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}

It looks like this: 

tr:not(.tr1) td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}
.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>
    
25.04.2016 / 17:40
1

I believe that what you are looking for is clear reading of the text. Come on.

We can do this using simple css and html , we can still add some basic fade effects that can be removed by deleting the first selection of css if you do not want to use it.

The code is simple, let's start by keeping your html 

<table>
   <tr class="tr1">
      <td>Item 1</td>
   </tr>
   <tr class="tr2">
      <td>Item 2</td>
   </tr>
   <tr class="tr3">
      <td>Item 3</td>
   </tr>
   <tr class="tr4">
      <td>Item 4</td>
   </tr>
</table>

And now to do what we want is to make reading easier, let's apply a fade effect that will "highlight" the text.

CSS 

 tr td {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
     overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

tr td:hover, tr td:focus, tr td:active {
    background-color: #2098d1;
    color: white;
}

The edition to adapt to its use is very simple also, just changing colors and the like.

The result can be seen here: link

    
25.04.2016 / 17:26
Fluent API and Migration Generate csv file in php [closed]