Automatycznie zmieniaj kolor tekstu, aby zapewnić czytelność

Kod Salamana jest dobry, ale czasami jego inwersja nie jest wystarczająco czytelna. Używam YCbCr i po prostu zmieniam skalę szarości.

function invertColor(rgb) {
    var yuv = rgb2yuv(rgb);
    var factor = 180;
    var threshold = 100;
    yuv.y = clamp(yuv.y + (yuv.y > threshold ? -factor : factor));
    return yuv2rgb(yuv);
}

Jsfiddle demo

Podlinkowałem kolejne pytanie do tego tematu w komentarzach.
funkcja JS do obliczania koloru uzupełniającego?

Jak powiedział Tejasva, musisz przekonwertować RGB NA HSL, uzupełnić odcień i przekonwertować go z powrotem.

Zaimplementowałem połączoną odpowiedź jako próbkę. Proszę o upvote oryginalnego plakatu, jeśli to było pomocne dla Ciebie, ponieważ dostarczył rozwiązanie w rzeczywistości.

Próbka
http://jsfiddle.net/pLZ89/2/

Miałem kiedyś ten sam problem i zbierałem informacje w całym internecie również za pomocą odpowiedzi, wymyśliłem tę funkcję, obsługuje hex, rgb i rgba

var invertColor = function (color) {
            var hex   = '#';
            if(color.indexOf(hex) > -1){
                color = color.substring(1);           
                color = parseInt(color, 16);         
                color = 0xFFFFFF ^ color;            
                color = color.toString(16);           
                color = ("000000" + color).slice(-6); 
                color = "#" + color; 
            }else{
                color = Array.prototype.join.call(arguments).match(/(-?[0-9\.]+)/g);
                for (var i = 0; i < color.length; i++) {
                    color[i] = (i === 3 ? 1 : 255) - color[i];
                }
                if(color.length === 4){
                    color = "rgba("+color[0]+","+color[1]+","+color[2]+","+color[3]+")";
                }else{
                    color = "rgb("+color[0]+","+color[1]+","+color[2]+")";
                }
            }         
            return color;
        }

Ale to chyba nie jest to czego potrzebujesz, znalazłem coś ciekawszego, poniżej funkcja zwróci biały lub czarny, to zdecyduje, że jest bardziej czytelny na danym kolorze.

var getContrastYIQ = function (color){
            var hex   = '#';
            var r,g,b;
            if(color.indexOf(hex) > -1){
                r = parseInt(color.substr(0,2),16);
                g = parseInt(color.substr(2,2),16);
                b = parseInt(color.substr(4,2),16);
            }else{
                color = color.match(/\d+/g);
                r = color[0];
                g = color[1];
                b = color[2];
            }

            var yiq = ((r*299)+(g*587)+(b*114))/1000;
            return (yiq >= 128) ? 'black' : 'white';
        }

Nie przypisuję sobie tego, po prostu zostałem zainspirowany i zmodyfikowany do moich potrzeb.

Źródła: YIQ function explained

Trochę za późno na imprezę, ale IMO cały tekst powinien być jasny lub ciemny. Kolorowy tekst jest dla linków.

Oto funkcja coffeescript, którą napisałem, aby zdecydować, której użyć:

is_light = (hex_color) ->
  c = hex_color.replace(/^#/,'')
  sum = parseInt(c[0]+c[1], 16)
  sum += parseInt(c[2]+c[3], 16)
  sum += parseInt(c[4]+c[5], 16)  
  log "sum is #{sum}"
  sum > 382.6

var getContrastYIQ = function(color) {
  var hex = '#';
  var r, g, b;
  if (color.indexOf(hex) > -1) {
    r = parseInt(color.substr(1, 2), 16);
    g = parseInt(color.substr(3, 2), 16);
    b = parseInt(color.substr(5, 2), 16);
  } else {
    color = color.match(/\d+/g);
    r = color[0];
    g = color[1];
    b = color[2];
  }

  var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
  return (yiq >= 128) ? 'black' : 'white';
}

Możesz użyć tego prostego schematu, aby osiągnąć ten cel. Wystarczy przekonwertować kolor z formularza RGB na HSV. Możesz użyć tego linku . Następnie użyj tego pseudo kodu;

rr = (color>>16)&0xFF;
gg = (color>>8)&0xFF;
bb = color & 0xFF;

someBrightColor = 0xFFFFFF;
someDarkColor = 0x000000;

hsvColor = rgbToHsv( rr, gg, bb );
//
//hsv is array: [h,s,v]...all values in [0,1]
//
//color is from dark range, if hsv < 0.5, so we need bright color to draw text, because    in dark color bright color 'will be more visible'.  
if( hsvColor[2] <= 0.5 )
  textColor = someBrightColor ;
//this is opposite case , when in more bright color, the dark color 'will be more visible'
else
  textColor = someDarkColor ;

Można również podzielić zakres [0,1] na więcej części. I zamiast definiować 2 kolory (someBrightColor,someDarkColor) , zdefiniuj więcej kolorów. Moja sugerowana metoda to "jak jasny jest kolor tła, kolor tekstu musi być ciemny i odwrotnie".

Oto bardzo mały sposób na uzupełnienie wartości szesnastkowej //wartość szesnastkowa jak "aa00cc"

function complementHex(hexValue){
    var reqHex = "";
    for(var i=0;i<6;i++){
        reqHex = reqHex + (15-parseInt(hexValue[i],16)).toString(16);
    }
    return reqHex;
}