Gibt es eine Möglichkeit, zwei Farben in JS zu vergleichen, wie 'Wenn Farbe A dunkler ist als # 202020'

Question

Die Hintergrundfarbe für eine meiner Seiten wird aus der Hintergrundfarbe der Benutzer als Hintergrundfarbe gesetzt. Ich habe eine Seite, die eine runde Box mit einem schwarzen Rand hat. Der Rahmen sieht nicht gut aus, wenn die Hintergrundfarbe dunkel ist. Daher möchte ich den Rand des Hintergrunds entfernen, der dunkler als eine beliebige Hex-Farbe ist.

Die Art, wie ich darüber nachdachte, war die Verwendung einer Regex, um die 3 RGB-Werte zu ziehen und sie zu summieren und diese mit meiner Referenzfarbe zu vergleichen. Gibt es einen besseren Weg, dies zu erreichen?

Answer 1

Sie könnten eine Funktion schreiben, die zwischen RGB und HSL oder HSV konvertiert und den Helligkeits- oder Helligkeitswert verwendet.

Wikipedia hat die Mathematik für HSV -> RGB-Konvertierung, aber nicht umgekehrt.

http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB

Sie könnten auch wahrscheinlich einige JS auf dieser Seite ziehen.

http://www.csgnetwork.com/csgcolorsel4.html

Answer 2

Sie müssen auch in Rechnung Wahrnehmungs Helligkeit der Farben nehmen (das heißt hell-blau # 0000FF sieht viel dunkler als hellrote # FF0000, die ihrerseits viel viel dunkler als # 00FF00).

Also würde ich den Farbwert in einzelne Bytes aufgeteilt und dann jeweils mit einem gewissen Koeffizienten multiplizieren:

function getPerceptualBrightness(color) { 
    var r = parseInt(color.substring(0,2),16); 
    var g = parseInt(color.substring(2,4),16); 
    var b = parseInt(color.substring(4,6),16); 

    return r*2 + g*3 + b; 
} 

var green_b = getPerceptualBrightness('00A000'); 
var blue_b = getPerceptualBrightness('0000FF'); 

if (green_b > blue_b) 
{ 
    alert("Green is brighter though it's numerical value is smaller"); 
} 

Dies kann weniger präzise als zu HSL Umwandlung dieser aber fühlt sich an wie ein Overkill für die Aufgabe. ..

Answer 3

Wenn die abgerundeten Ecken Bilder sind, wird dies besser als Photoshop-Problem behandelt. Speichern Sie für Web/Png-24/Transparenz Dither.

Wenn ich Ihr Problem richtig verstehe, ist es nicht nur eine Frage von Hell und Dunkel, sondern auch von Farbton. Diese Ecken werden auf einen Hintergrund gedithert, der diesen alternativen nicht entspricht. Damit meine ich, dass die abgerundeten Kanten langsam von der Grenze zur Hintergrundfarbe verblasst werden, so dass die gezackten Pixelränder nicht so störend erscheinen.

Eine beliebige Hell-Dunkel-Lösung, bei der Sie die drei Mittelwerte vergleichen und nur mit ziemlich extremen Hell- und Dunkelwerten arbeiten würden. Aber mit einem Png-Transparenz-Dither werden sie automatisch in jeden Hintergrund gemischt. Es gibt Problemumgehungen für IE 6, wenn Sie es unterstützen müssen.

Answer 4

Möglicherweise können Sie die Luminanz der Farbe verwenden. jPaq bietet diese Funktion an. Trotzdem bin ich mir nicht sicher, dass Sie genau danach suchen. Hier ist Wikipedia Definition der Leuchtdichte: http://en.wikipedia.org/wiki/Luminance.