2010-06-10 10 views
28

Ich möchte Benutzer auf meiner Website in der Lage sein, eine Hex-Farbe auszuwählen, und ich möchte nur weißen Text für dunkle Farben und schwarzen Text für helle Farben anzeigen. Kannst du die Helligkeit aus einem Hex-Code (vorzugsweise PHP) herausrechnen?Hex Code Helligkeit PHP?

Antwort

40
$hex = "78ff2f"; //Bg color in hex, without any prefixing #! 

//break up the color in its RGB components 
$r = hexdec(substr($hex,0,2)); 
$g = hexdec(substr($hex,2,2)); 
$b = hexdec(substr($hex,4,2)); 

//do simple weighted avarage 
// 
//(This might be overly simplistic as different colors are perceived 
// differently. That is a green of 128 might be brighter than a red of 128. 
// But as long as it's just about picking a white or black text color...) 
if($r + $g + $b > 382){ 
    //bright color, use dark font 
}else{ 
    //dark color, use bright font 
} 
+0

Funktioniert perfekt, musste nicht einmal in Farbton und Sättigung gehen! :) – Juddling

+0

In meinem Fall funktionierte es besser, 250 statt 382 zu verwenden. Ich denke nicht, dass die volle grüne Farbe (# 00ff00) eine helle Farbe Schriftart verwenden sollte, und das volle Rot ist in Ordnung mit einer dunklen Farbe. Sag es einfach. –

2

Sie müssen die RGB-Werte in HLS/HSL (Farbton-Helligkeit und Sättigung) umwandeln. Sie können dann mithilfe der Helligkeit bestimmen, ob Sie hellen Text oder dunklen Text benötigen.

This page hat einige Details zur Umwandlung in PHP sowie zur Auswahl von Komplementärfarben.

Ich habe gerade erst entdeckt, dass die Seite eine Astrologiestelle ist - also Entschuldigung, wenn jemand beleidigt ist.

+1

Über Astrologie Website: ja, das ist ** ** horrend (Nein, nur ein Scherz, interessant sie auf ihrer Website eine solche Programmierung verwandtes Thema haben, ich! würde das nicht erwarten.) –

+0

@Marcel - Ich denke, es ist der Code hinter ihren Charts zu zeigen. – ChrisF

1

Wenn Sie ImageMagick Erweiterung aktiviert haben, können Sie einfach ein ImagickPixel Objekt, ruft setColor mit Hex-Wert erstellen und dann rufen getHSL() (und bekommen das letzte Element des erhaltenen Array nehme ich an) ...

17

machte ich eine ähnliche - aber basierend auf Gewichtungen von jeder Farbe (based on the C# version of this thread)

function readableColour($bg){ 
    $r = hexdec(substr($bg,0,2)); 
    $g = hexdec(substr($bg,2,2)); 
    $b = hexdec(substr($bg,4,2)); 

    $contrast = sqrt(
     $r * $r * .241 + 
     $g * $g * .691 + 
     $b * $b * .068 
    ); 

    if($contrast > 130){ 
     return '000000'; 
    }else{ 
     return 'FFFFFF'; 
    } 
} 

echo readableColour('000000'); // Output - FFFFFF 

EDIT: Kleine Optimierung: Sqrt ist als eine teure mathematische Operation bekannt, die in den meisten Szenarien wahrscheinlich vernachlässigt wird, aber auf jeden Fall könnte es vermieden werden, indem man so etwas macht.

function readableColour($bg){ 
    $r = hexdec(substr($bg,0,2)); 
    $g = hexdec(substr($bg,2,2)); 
    $b = hexdec(substr($bg,4,2)); 

    $squared_contrast = (
     $r * $r * .299 + 
     $g * $g * .587 + 
     $b * $b * .114 
    ); 

    if($squared_contrast > pow(130, 2)){ 
     return '000000'; 
    }else{ 
     return 'FFFFFF'; 
    } 
} 

echo readableColour('000000'); // Output - FFFFFF 

Es ist einfach nicht die sqrt gelten, sondern es treibt die abgeschnitten gewünschten Kontrast durch zwei, die eine viel billigere Berechnung ist

+0

Das ist einfach großartig! Vielen Dank! –

+0

Um RGB-Werte in Dez zu erhalten, benutzen Sie einfach diese Zeile: 'Liste ($ r, $ g, $ b) = sscanf ($ Farbe,"% 02x% 02x% 02x ");' oder wenn $ Farbe mit einem beginnen # 'Liste ($ r, $ g, $ b) = sscanf ($ Farbe," #% 02x% 02x% 02x ");' – JoTaRo

1

Ich weiß, dies ist ein sehr altes Thema, aber für Benutzer, die kam von "Google Search", könnte dieser Link sein, was sie suchen. Ich habe für so etwas gesucht, und ich denke, es ist eine gute Idee, es hier zu posten:

https://github.com/mexitek/phpColors

use Mexitek\PHPColors\Color; 
// Initialize my color 
$myBlue = new Color("#336699"); 

echo $myBlue->isLight(); // false 
echo $myBlue->isDark(); // true 

Das ist es.

0

Ich versuchte einen anderen Ansatz, ich verwendete HSL (Farbton, Sättigung & Leichtigkeit) Helligkeit Prozent, um zu überprüfen, ob die Farbe dunkel oder hell ist. (Wie @chrisf sagte in seiner Antwort)

Funktion:

function colorislight($hex) { 
    $hex  = str_replace('#', '', $hex); 
    $r   = (hexdec(substr($hex, 0, 2))/255); 
    $g   = (hexdec(substr($hex, 2, 2))/255); 
    $b   = (hexdec(substr($hex, 4, 2))/255); 
    $lightness = round((((max($r, $g, $b) + min($r, $g, $b))/2) * 100)); 
    return ($lightness >= 50 ? true : false); 
} 

Auf der Rückleitung überprüft, ob die Helligkeit Prozentsatz höher als 50% ist und gibt true zurück, andernfalls false zurückgegeben. Sie können es leicht ändern, um wahr zurückzugeben, wenn die Farbe 30% Helligkeit hat und so weiter. Die Variable $lightness kann von 0 bis 100 0 als dunkelste und 100 als hellste Variable zurückkehren.

wie die Funktion verwenden:

$color = '#111111'; 
if (colorislight($color)) { 
    echo 'this color is light'; 
} 
else { 
    echo 'this color is dark'; 
}