Wie kann ich die entgegengesetzte Farbe entsprechend der aktuellen Farbe erzeugen?

Question

Ich versuche, eine Farbe der aktuellen Farbe gegenüberzustellen. Ich meine, wenn aktuelle Farbe ist schwarz, dann muss ich weiß generieren.

Eigentlich habe ich einen Text (die Farbe dieses Textes ist dynamisch, seine Farbe kann zufällig gemacht werden). Dieser Text ist in eine div und ich muss die entgegengesetzte Farbe dieses Textes für die background-color von div setzen. Ich möchte, dass dieser Text ist klar in der div(Farbperspektive).

Die entgegengesetzte Farbe bedeutet: Dunkel/Hell

ich die aktuelle Farbe des Textes haben, und ich kann es auf diese Funktion übergeben:

var TextColor = #F0F0F0; // for example (it is a bright color) 

function create_opp_color(current color) { 

    // create opposite color according to current color 

} 

create_opp_color(TextColor); // this should be something like "#202020" (or a dark color) 

Gibt es eine Idee, create create_opp_color() Funktion?

Answer 1

UPDATE: Produktions-ready Code auf GitHub.

---

Dies ist, wie ich es tun würde:

HEX

1. Convert
2. Invert die R-, G- und B-Komponenten
3. konvertieren jede Komponente zurück in HEX
4. auf RGB Pad jede Komponente mit Nullen und Ausgabe.

function invertColor(hex) { 
    if (hex.indexOf('#') === 0) { 
     hex = hex.slice(1); 
    } 
    // convert 3-digit hex to 6-digits. 
    if (hex.length === 3) { 
     hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; 
    } 
    if (hex.length !== 6) { 
     throw new Error('Invalid HEX color.'); 
    } 
    // invert color components 
    var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16), 
     g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16), 
     b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); 
    // pad each with zeros and return 
    return '#' + padZero(r) + padZero(g) + padZero(b); 
} 

function padZero(str, len) { 
    len = len || 2; 
    var zeros = new Array(len).join('0'); 
    return (zeros + str).slice(-len); 
} 

Ausgabe:

Advanced Version:

Dies hat eine bw Option, die schwarz oder weiß invertieren wird entscheiden, ob; So erhalten Sie mehr Kontrast, der für das menschliche Auge in der Regel besser ist.

function invertColor(hex, bw) { 
    if (hex.indexOf('#') === 0) { 
     hex = hex.slice(1); 
    } 
    // convert 3-digit hex to 6-digits. 
    if (hex.length === 3) { 
     hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; 
    } 
    if (hex.length !== 6) { 
     throw new Error('Invalid HEX color.'); 
    } 
    var r = parseInt(hex.slice(0, 2), 16), 
     g = parseInt(hex.slice(2, 4), 16), 
     b = parseInt(hex.slice(4, 6), 16); 
    if (bw) { 
     // http://stackoverflow.com/a/3943023/112731 
     return (r * 0.299 + g * 0.587 + b * 0.114) > 186 
      ? '#000000' 
      : '#FFFFFF'; 
    } 
    // invert color components 
    r = (255 - r).toString(16); 
    g = (255 - g).toString(16); 
    b = (255 - b).toString(16); 
    // pad each with zeros and return 
    return "#" + padZero(r) + padZero(g) + padZero(b); 
} 

Ausgabe:

Answer 2

Achten Sie auf Zugänglichkeit (AA/AAA). Farbkontrast an sich ist nutzlos. Wirklich unterschiedliche Farben können für farbenblinde Menschen überhaupt keinen Kontrast haben. IMHO eine Berechnung für eine solche Farbe könnte so gehen:

(Use „HLS“ der Einfachheit halber)

• Drehen Hue 180 °
• berechnen Helligkeit Unterschied ist die (vielleicht nutzlos) maximale Farbkontrast zu erhalten .
• (Berechnen Sie den Farbunterschied ... unnötig, es ist maximal oder fast)
• Berechnen Sie das Kontrastverhältnis.
• Wenn die resultierende Farbe der Anforderungen Berechnung Ende entspricht, wenn nicht, loop:
  • Wenn Helligkeitsunterschied ist nicht genug Erhöhung oder decrese berechnete Farbleuchtstärke (L) um einen bestimmten Betrag oder das Verhältnis (nach oben oder hinunter abhängig von der ursprünglichen Farbhelligkeit:> oder < als der mittlere Wert)
  • Überprüfen Sie, ob es Ihren Anforderungen entspricht, wenn es Berechnung beendet.
  • Wenn die Leuchtkraft erhöht (oder dekrementiert) werden kann, gibt es keine gültige Farbe mehr, um die Anforderungen zu erfüllen, einfach schwarz und weiß, "die beste" von denen (wahrscheinlich die mit größerem Kontrastverhältnis) nehmen und enden.

Answer 3

In meinem Verständnis Ihrer Frage, durch entgegengesetzte Farbe meinen Sie umgekehrte Farbe.

InvertedColorComponent = 0xFF - ColorComponent 

So für die Farbe Rot (# FF0000) bedeutet dies: R = 0xFF oder 255 G = 0x00 oder 0 B = 0x00 oder 0

invertierte Farbe Rot (# 00FFFF) ist:

R = 0xFF - 0xFF = 0x00 or 255 - 255 = 0 
G = 0xFF - 0x00 = 0xFF or 255 - 0 = 255 
B = 0xFF - 0x00 = 0xFF or 255 - 0 = 255 

Weitere Beispiele:

Black (# 000000) wird Weiß (#FFFFFF).

Orange (# FFA500) wird # 005AFF

Answer 4

einfach Hintergrundfarbe blättert Farbe in Text wird mit einigen mittleren Bereich Werten nicht funktionieren, z.B. 0x808080. Ich hatte stattdessen mit Verschiebung der Farbwerte versucht - (v + 0x80) % 0x100. Hier finden Sie eine Demo here.

Zustimmung mit dem Kommentar von miguel-svq - obwohl erwarten, detailliertere Algorithmen für jeden Berechnungsschritt zu sehen.