Usability und Webdesign Blog

Als Webdesigner braucht man des öfteren mal den RGB-Wert der Farbe eines Elements auf einer Webseite. RGB-Werte ermitteln kann man ganz einfach mit einer Pipette. Dabei handelt es sich um ein kleines Programm mit dem man das gewünschte Element anklicken kann. Dadurch werden die Farben als RGB Werte angezeigt, die leicht in eine CSS Datei oder in die eigene Webseite übernehmen werden können.

RGB Werte ermitteln Tools und Werkzeuge

Für PC und Apple gibt es verschiedene Werkzeuge um die RGB-Werte anzuzeigen:

Colorzilla für den Firefox Browser
Für den Firefox Browser gibt es ein kleines Programm mit dem Namen ColorZilla. Nach der Installation des kostenlosen Plugins erscheint in der Werkzeug-Leiste des Browsers oben rechts ein Symbol mit einer Pipette. Wenn man diese anklickt, kann man mit dem Mauszeiger einfach eine Farbe auf der Webseite anklicken. Der RGB-Wert wird ermittelt und automatisch in die Zwischenablage kopiert.

Colorzilla Firefox Plugin für RGB Werte

Tray Color Windows Programm für RGB-Werte

Wer nicht nur die RGB-Werte von Webseiten-Elementen ermitteln möchte, sondern auch die von Windows Programmen wie zum Beispiel Taskleisten oder anderen Elementen von Windows, sollte sich das Programm Tray Color mal anschauen. Nach dem Starten des Programms hat man an der Maus eine Pipette mit der man ein Element am Bildschirm anwählen kann. Nach dem Klick wird der RGB-Wert und der HTML Hex Wert angezeigt. Eine Umrechnung in Decimal-Wert ist ebenfalls möglich.

Traycolor findet den HEX und RGB-Wert einer Farbe auf dem Bildschirm.

Farben und RGB Werte mit der Web Developper Toolbar finden

Wenn man sich kein neues Programm oder Plugin installieren möchte, gibt es auch einen kleinen Umweg mit dem Web Developer Toolbar, die die meisten Web-Entwickler schon installiert haben sollten.

In den Web Developer Tools kann man in der Toolbar oder mit einem Klick auf der rechten Maustaste

Web Developer -> Informationen -> Farbinformationen anzeigen

Kostenloser Web Developer Toolbar download für verschiedene Browser

• Firefox Web Developer Toolbar
• Chrome Web Developer Toolbar
• Internet Explorer Toolbar

Alle RGB-Werte auf einer Webseite können mit der Web Developer Toolbar angezeigt werden

RGB Wert umrechnen

Wer den RGB-Wert auf der Webseite ermittelt hat, möchte diesen evtl. noch umrechnen. Das mit einem HEX / RGB Umrechner dort gibt man einfach den RGB- oder HTML Wert einer Farbe ein und dieser wird umgerechnet.

Für das Ermitteln von RGB Farben  auf Apple-Rechner verweise ich auf den Artikel Farben auf Webseiten ermitteln am Mac

Wenn du noch Fragen oder Anmerkungen hast, freue ich mich über einen Kommentar.