[Erledigt] Farben: Helligkeit aus hex-Wert bestimmen

feeela · 21.01.2010, 00:35

Problemstellung:
Auf einer Webseite haben angemeldete Nutzer die Möglichkeit für bestimmte Bereiche die Hintergrundfarben auszuwählen. Diese werden als 6-stellige hexadezimal-Angabe gespeichert. Nun soll je nach Helligkeit der jeweiligen Hintergrundfarbe eine passende Schriftfarbe gewählt werden. Es soll dabei kein passender (Komplementär-)Kontrast, sondern schwarz oder weiß verwendet werden.

Frage:
Wie komme ich vom hex-Wert auf den Wert der Helligkeit?
Ich weiß nicht genau ob mir hier mathematische Kenntnisse oder der Umgang mit Farben fehlen.

Momentaner eigener Lösungsansatz:
Der hex-Wert wird in drei RGB-Werte konvertiert und davon der Durchschnitt ermittelt. Liegt dieser unter 127 wird weiß als Schriftfarbe verwendet.
Oder ist der Durchschnitt der RGB-Werte schon tatsächlich die Helligkeit?

PHP-Code:

  /**

 * @param string $backgroundColor

 * @return string foreground color

 */

function getForegroundColor($backgroundColor)

{

    $bgColor = html2rgb($backgroundColor);

    $average = ($bgColor[0] + $bgColor[1] + $bgColor[2]) / 3;

    if($average > 127)

    {

        return '000';

    }

    else

    {

        return 'fff';

    }

}

Die Funktion html2rgb() stammt von anyexample.com und liefert anhand der HEX-Notation einer Farbe ein Array mit den drei Farbwerten (RGB, dezimal).

Herzlichen Dank und Gruß,

Feeela

mermshaus · 21.01.2010, 00:38

Das hier könnte interessant sein: Luminanz – Wikipedia

Nach den Formeln ist Grün 'ne ganze Ecke "heller" als Blau.

Chriz · 21.01.2010, 01:00

Ich benutz diese Formel:

Zitat:

(0.2126 * RED) + (0.7152 * GREEN) + (0.0722 * BLUE)

Werte kleiner (oder wars groesser?) als 127 sind hell, andernfalls dunkel (Basis 255!). Funktioniert soweit grundsaetzlich. Den Schwellwert kann man aber moeglicherweise noch optimieren.

Statt einer Funktion wuerde ich eine Klasse implementieren. Eine Farbe kann naemlich relativ viele Eigenschaften und Ausgabeformate habe.

feeela · 21.01.2010, 01:38

Danke.

Ich habe jetzt mit den beiden Formeln aus dem WP-Luminanz-Artikel ein bisschen rumgespielt und habe mich nun für die zweitere "Gamma korrigierte" Variante entschieden (welche auch Chriz gepostet hat).
Als Schwellenwert bin ich jetzt bei 130 hängen geblieben.

Zitat:

Zitat von Chriz

Statt einer Funktion wuerde ich eine Klasse implementieren. Eine Farbe kann naemlich relativ viele Eigenschaften und Ausgabeformate habe.

Ja ich auch

Dies ist aber (noch) nicht nötig (Zeit, Zeit, Zeit). Ich arbeite an einem übernommenen Projekt. Momentan ein Haufen Funktionen auf Contenido-Basis. Eine Neustrukturierung ist ab Mitte des Jahres geplant aber einige Funktionen sollten scheinbar vorher noch rein.

xm22 · 21.01.2010, 09:26

theoretisch müsste es doch auch die Hälfte von 16.777.215 "hell" sein. Quasi einfach den Hex-Wert in Dezimal umrechnen. Geht bestimmt noch einfacher, aber so weit kann ich heute morgen nicht denken...

draco88 · 21.01.2010, 11:20

Ne weitere Möglichkeit wäre, die RGB-Werte in HSV umrechen,dann hast du die Helligkeit als double zwischen 0 und 1.

Aber ich glaub die Lösung von Chris ist am besten für diesen Anwendungsfall.

Chriz · 21.01.2010, 11:28

PHP-Code:

  <?php
class Anti_Color
{
    /**
     * @see http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color
     *
     * Do you mean brightness? Perceived brightness? Luminance?
     * Luminance (standard, objective): (0.2126*R) + (0.7152*G) + (0.0722*B)
     * Luminance (perceived option 1): (0.299*R + 0.587*G + 0.114*blue)
     * Luminance (perceived option 2, slower to calculate): sqrt( 0.241*R^2 + 0.691*G^2 + 0.068*B^2 )
     */
    public function getBrightness()
    {
        /*
         * Note also that all of these are probably for linear 0-1 RGB, and you probably have gamma-corrected 0-255 RGB.
         * They are not converted like you think they are [in the formula above].
         */
        $r = $this->getRed()   / 255;
        $g = $this->getGreen() / 255;
        $b = $this->getBlue()  / 255;

        $brightness  = (0.2126 * $r) + (0.7152 * $g) + (0.0722 * $b);
        $brightness *= 255;

        return $brightness;
    }

    public function isBright()
    {
        return $this->getBrightness() > 127;
    }

    public function isDark()
    {
        return !$this->isBright();
    }
    
    // ...
}
?>

nikosch · 21.01.2010, 15:47

Zitat:

Anti_Color

LOL. Immer wieder witzig, Dein Namespace.

Beastofchaos · 17.05.2012, 13:05

Hey Leute,
Ich weiß, es ist ein alter Thread, aber es passt einfach vom Thema. Hier der eigentliche Thread im Java-Forum, wo mit leider keiner weiterhelfen konnte:
Java-Forum - Kontrast in einem Bild erzeugen

Ich bin zwar gerade an einem Grafikprogramm mit JAVA, aber mir geht es nur um die Rechnung. Denn ich will, genauso wie in Paint.NET den Kontrast verändern können.
Das heißt, bei maximalen Kontrast Schwarz-Weiß, bei minimalen hat es ein sehr starken Grauton.
Nun weiß ich dank diesem Thread auch, wie ich die Luminanz berechne, um herauszufinden, ob ich bei hohem Kontrast überhaupt gegen Dunkel oder Hell streben muss. Ich kann jetzt zwar in egal welchem Fall und im RGB-Modell und im YUV-Modell für jedes einzelne Element des Farbmodells bestimmen, in welche Richtung es strebt (gegen 0 oder 255).

Bloß, hab ich jetzt mal bei Paint.NET den Kontrast ausgetestet, um zu schaun, ob ich mit einer "mathematischen Folge"(siehe Bilder) eine Formel bestimmen kann, um den Kontrast zu verändern. Bloß bewegen sich die Zahlen total arithmetisch.
Hab das auch erstmal nur bei leichtem Farben getestet:

Rot (RGB: FF0000)
Grün (RGB: 00FF00)
Blau(RGB: 0000FF)
Gelb (RGB: FFFF00)

Habt ihr evtl einen Ansatz, wie man da weiterkommt. Am besten wäre, wenn es eine allgemeine bekannte Formel wäre. Im Internet finde ich bisher nichts.

Würd mich auf Hilfe freuen, Thomas

PS: Ich hab zwar schon vorher Vorschläge bekommen, bloß erzeugen die kein Schwarz-Weiß, sondern so eine Art farblicher Kontrast, in dem die einzelnen Farbelemente im Farbmodell einfach zu FF oder 00 werden (sprich aus 00EA09 wird 00FF00).

mermshaus · 17.05.2012, 17:06

Vielleicht hilft dir dieser Mail-Thread (möglicherweise auch nicht wirklich relevant, habe nur die ersten beiden Nachrichten überflogen):

- http://borland.newsgroups.archived.a...706264869.html

Für Leute, die dieses Spezialbetriebssystem mit Paint.NET nicht nutzen: Pinta scheint den Kontrast so zu berechnen, wie es gewünscht ist.

Also im Zweifel: https://github.com/PintaProject/Pinta (Konkret vielleicht: https://github.com/PintaProject/Pint...trastEffect.cs)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] jeden 5ten Wert aus db löschen	Crowz	PHP Tipps 2009	22	14.01.2010 16:07
Überprüfen ob vorhanden und ob ein feld einen bestimmten wert hat	setech	Datenbanken	1	17.12.2009 09:40
Datensatz nach Wert ändern?	krisi12345	Datenbanken	1	13.11.2009 20:47
Wert einer Funktion an andere Funktion übergeben	Secondary	PHP Tipps 2008	14	27.08.2008 10:36
<option> wert aus DB in Dropdown ausgeben, wo aktueller Wert checked	Lapje	PHP Tipps 2008	9	19.08.2008 11:22
Fester Wert bei Registrierung festlegen	themr	Datenbanken	1	07.03.2008 14:41
nach grösstem (unbekannten) Wert suchen	lindner	Datenbanken	2	20.08.2006 22:13
Wie diesen Wert in eine DB einfügen?	Mike²	Datenbanken	5	29.03.2006 23:57
array verarbeitung (schlag auf den hinterkopf)		PHP Tipps 2007	9	16.11.2005 11:37
Vergleich von einem Wert, mit Werten aus einer Tabelle		PHP Tipps 2005	14	01.11.2005 03:04
minus wert, plus wert in variable nutzen		PHP Tipps 2005-2	5	22.10.2005 19:15
Problem mit anzeige aus DB, erst nach refresh aktueller wert		PHP Tipps 2005	7	27.04.2005 19:42
kleinsten und größten wert ermitteln	niffi	PHP Tipps 2005	14	26.04.2005 12:42
Wert automatisch erhöhen		PHP Tipps 2005	5	13.02.2005 16:25
[Erledigt] Problem: per klick auf Button Wert erhöhen/verringern		HTML, Usability und Barrierefreiheit	7	07.10.2004 08:31

21.01.2010, 00:35
feeela Erfahrener Benutzer Registriert seit: 20.01.2010 Beiträge: 108 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Farben: Helligkeit aus hex-Wert bestimmen Problemstellung: Auf einer Webseite haben angemeldete Nutzer die Möglichkeit für bestimmte Bereiche die Hintergrundfarben auszuwählen. Diese werden als 6-stellige hexadezimal-Angabe gespeichert. Nun soll je nach Helligkeit der jeweiligen Hintergrundfarbe eine passende Schriftfarbe gewählt werden. Es soll dabei kein passender (Komplementär-)Kontrast, sondern schwarz oder weiß verwendet werden. Frage: Wie komme ich vom hex-Wert auf den Wert der Helligkeit? Ich weiß nicht genau ob mir hier mathematische Kenntnisse oder der Umgang mit Farben fehlen. Momentaner eigener Lösungsansatz: Der hex-Wert wird in drei RGB-Werte konvertiert und davon der Durchschnitt ermittelt. Liegt dieser unter 127 wird weiß als Schriftfarbe verwendet. Oder ist der Durchschnitt der RGB-Werte schon tatsächlich die Helligkeit? PHP-Code: `/** * @param string $backgroundColor * @return string foreground color */ function getForegroundColor($backgroundColor) { $bgColor = html2rgb($backgroundColor); $average = ($bgColor[0] + $bgColor[1] + $bgColor[2]) / 3; if($average > 127) { return '000'; } else { return 'fff'; } }` Die Funktion html2rgb() stammt von anyexample.com und liefert anhand der HEX-Notation einer Farbe ein Array mit den drei Farbwerten (RGB, dezimal). Herzlichen Dank und Gruß, Feeela


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.01.2010, 00:38
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.731 PHP-Kenntnisse: Fortgeschritten	Das hier könnte interessant sein: Luminanz – Wikipedia Nach den Formeln ist Grün 'ne ganze Ecke "heller" als Blau. Geändert von mermshaus (21.01.2010 um 01:07 Uhr). Grund: da stehen mehrere Formeln, Plural

21.01.2010, 09:26
xm22 Erfahrener Benutzer Registriert seit: 30.07.2008 Beiträge: 1.167 PHP-Kenntnisse: Fortgeschritten	theoretisch müsste es doch auch die Hälfte von 16.777.215 "hell" sein. Quasi einfach den Hex-Wert in Dezimal umrechnen. Geht bestimmt noch einfacher, aber so weit kann ich heute morgen nicht denken...

21.01.2010, 11:20
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Ne weitere Möglichkeit wäre, die RGB-Werte in HSV umrechen,dann hast du die Helligkeit als double zwischen 0 und 1. Aber ich glaub die Lösung von Chris ist am besten für diesen Anwendungsfall.

21.01.2010, 11:28
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.267	PHP-Code: <?php class Anti_Color { /** * @see http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color * * Do you mean brightness? Perceived brightness? Luminance? * Luminance (standard, objective): (0.2126R) + (0.7152G) + (0.0722B) Luminance (perceived option 1): (0.299R + 0.587G + 0.114blue) Luminance (perceived option 2, slower to calculate): sqrt( 0.241R^2 + 0.691G^2 + 0.068B^2 ) / public function getBrightness() { /* * Note also that all of these are probably for linear 0-1 RGB, and you probably have gamma-corrected 0-255 RGB. * They are not converted like you think they are [in the formula above]. / $r = $this->getRed() / 255; $g = $this->getGreen() / 255; $b = $this->getBlue() / 255; $brightness = (0.2126 $r) + (0.7152 * $g) + (0.0722 * $b); $brightness *= 255; return $brightness; } public function isBright() { return $this->getBrightness() > 127; } public function isDark() { return !$this->isBright(); } // ... } ?>

17.05.2012, 13:05
Beastofchaos Neuer Benutzer Registriert seit: 28.05.2011 Beiträge: 7 PHP-Kenntnisse: Anfänger	Kontrast verstärken/abschwächen Hey Leute, Ich weiß, es ist ein alter Thread, aber es passt einfach vom Thema. Hier der eigentliche Thread im Java-Forum, wo mit leider keiner weiterhelfen konnte: Java-Forum - Kontrast in einem Bild erzeugen Ich bin zwar gerade an einem Grafikprogramm mit JAVA, aber mir geht es nur um die Rechnung. Denn ich will, genauso wie in Paint.NET den Kontrast verändern können. Das heißt, bei maximalen Kontrast Schwarz-Weiß, bei minimalen hat es ein sehr starken Grauton. Nun weiß ich dank diesem Thread auch, wie ich die Luminanz berechne, um herauszufinden, ob ich bei hohem Kontrast überhaupt gegen Dunkel oder Hell streben muss. Ich kann jetzt zwar in egal welchem Fall und im RGB-Modell und im YUV-Modell für jedes einzelne Element des Farbmodells bestimmen, in welche Richtung es strebt (gegen 0 oder 255). Bloß, hab ich jetzt mal bei Paint.NET den Kontrast ausgetestet, um zu schaun, ob ich mit einer "mathematischen Folge"(siehe Bilder) eine Formel bestimmen kann, um den Kontrast zu verändern. Bloß bewegen sich die Zahlen total arithmetisch. Hab das auch erstmal nur bei leichtem Farben getestet: Rot (RGB: FF0000) Grün (RGB: 00FF00) Blau(RGB: 0000FF) Gelb (RGB: FFFF00) Habt ihr evtl einen Ansatz, wie man da weiterkommt. Am besten wäre, wenn es eine allgemeine bekannte Formel wäre. Im Internet finde ich bisher nichts. Würd mich auf Hilfe freuen, Thomas PS: Ich hab zwar schon vorher Vorschläge bekommen, bloß erzeugen die kein Schwarz-Weiß, sondern so eine Art farblicher Kontrast, in dem die einzelnen Farbelemente im Farbmodell einfach zu FF oder 00 werden (sprich aus 00EA09 wird 00FF00). Geändert von Beastofchaos (17.05.2012 um 13:27 Uhr).

17.05.2012, 17:06
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.731 PHP-Kenntnisse: Fortgeschritten	Vielleicht hilft dir dieser Mail-Thread (möglicherweise auch nicht wirklich relevant, habe nur die ersten beiden Nachrichten überflogen): - http://borland.newsgroups.archived.a...706264869.html Für Leute, die dieses Spezialbetriebssystem mit Paint.NET nicht nutzen: Pinta scheint den Kontrast so zu berechnen, wie es gewünscht ist. Also im Zweifel: https://github.com/PintaProject/Pinta (Konkret vielleicht: https://github.com/PintaProject/Pint...trastEffect.cs) __________________ Blog \| Buch \| Kaloa Geändert von mermshaus (17.05.2012 um 17:12 Uhr).