CSS Basics – Farben

Nun geht es in unserer Artikelserie CSS Basics weiter mit allem rund um das Thema Farben. Und auch wenn es nun ein eigener Artikel ist, finden wir den Punkt Farben in vielen der anderen Beiträge auch wieder. Jedoch ist es ein etwas umfangreicheres Theme, sodass wir hierfür einen eigenen Artikel für durchaus sinnvoll halten.

Zu Beginn ist es wichtig, dass wir verstehen welche Unterschiedlichen Möglichkeiten es gibt um per CSS eine Farbe zu definieren. So haben wir im Artikel CSS Basics: Background bereits einige Sachen eingefärbt und dafür hauptsächlich auf Hexwerte (Hexadezimal) zurückgegriffen.

Interessante Links

Damit das Thema nun auch nicht so extrem ausschweift, haben wir zum Anfang ein paar Links zusammengesucht, die dir das Thema Farben etwas näherbringt

• https://wiki.selfhtml.org/wiki/Grafik/Farbpaletten
• http://html-color-codes.info/webfarben_hexcodes/
• http://www.thestyleworks.de/basics/colors.shtml
• http://www.html-seminar.de/farben.htm
• http://htmlcolorcodes.com/tutorials/html-text-color/

Unterschiedliche Farbdefinierung

In der CSS-Welt können Farben auf unterschiedlichen Wegen definiert werten. Nachfolgend ein paar Beispiele.

HTML Farben

Eine Möglichkeit die Farben zu verwenden sind die direkten HTML Farben. Hierzu gibt es eine vordefinierte Palette an Farben (um genau zu sein 216 Farben), die direkt in der HTML-Sprache definiert wurden. Eine komplette Liste findest du z.B. auf selfhtml.org (auch oben verlinkt).

Als Beispiel-Objekt nehmen wir einfach mal die „Kurzbeschreibung“ auf der Produkte-Single und färben den Hintergrund zunächst rot:

.product-description { background: red; }

Der Rahmen der Box wird grün:

.product-description { border: 2px solid green; }

Und der Text blau:

.product-description { color: blue; }

das sieht zwar nicht sonderlich schön aus, aber somit bekommt man ein besseres Verständnis dafür wie die HTML Farben anzuwenden sind und die Grundfarben beim Farbwert am Monitor sind nun mal RGB (red, green, blue). 🙂

Mit einer anderen Kombination der vordefinierten HTML Farben, kann sowas aber auch ganz schick aussehen:

.product-description { background: Lavender; border: 2px solid MediumSlateBlue; color: SlateBlue; padding: 15px; }

RGB-Werte

Ein „etwas“ größeres Spektrum an Farben, nämlich 16,7 Mio, erreichen wir mit Hilfe der direkten RGB-Werte (oder deren dazugehörigen Hexcodes)

Sofern du Farben per RGB definierst, sieht der Aufbau wie folgt aus:

color: rgb(255, 255, 255)

Die 3 Werte stehen für red, green, blue und gehen von 0 bis 255. Somit hast du 256^3, also 16.777.216 verschiedene Kombinationsmöglichkeiten.

Nehmen wir hierzu wieder unser Beispiel von oben, zunächst mit 100% rot:

.product-description { background: rgba(255, 0, 0); }

Der Rahmen der Box wird grün:

.product-description { border: 2px solid rgba(0, 255, 0); }

Und der Text blau:

.product-description { color: rgba(0, 0, 255); }

Damit du diese Werte erhältst kannst du z.B. einen sogenannten Color Picker (http://htmlcolorcodes.com/color-picker/) verwenden. Hier suchst du deine Farbe aus und siehst an der rechten Seite die Werte R, G und B.

Hexcode

Die am häufigst verwendete Art, Farbe zu definieren, ist die hexadezimalen Farbdefinition (https://de.wikipedia.org/wiki/Hexadezimale_Farbdefinition). Ein Hex-Code ist in 3 sogenannte Oktette aufgebaut, welche wie bei den RGB-Farben für die 3 Grundfarben rot, grün, blau stehen. Die Werte gehen von 00 (0%, schwarz) bis FF (100%, weiß). Die Reihenfolge eines einzelnen Oktetts verläuft wie folgt: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, FF. Sowas im Kopf auszurechnen ist zwar möglich, jedoch sollte man auch an der Stelle wieder auf einen Color-Picker zurückgreifen.

Auch hier verwenden wir wieder unser Standardbeispiel:

.product-description { background: #FF0000; }

Der Rahmen der Box wird grün:

.product-description { border: 2px solid #00FF00; }

Und der Text blau:

.product-description { color: #0000FF; }

Die reguläre Schreibweise ist mit 6 Zeichen, also #ff0000 aufgebaut, kann aber bei identischen Werten in der Schreibweise #f00 abgekürzt werden.

Transparenz (RGBa)

Ein weiterer spannender Punkt ist der RGBa-Wert. Diese Funktion kam mit CSS3 und funktioniert im Grunde wie der oben erklärte RGB-Wert, durch den Zusatz a (alpha) lässt sich jedoch noch die Transparenz steuern. Dabei wird hinter die 3 RGB Werte ein ,0 bis 1, gesetzt, sodass man den Werte zwischen 0 und 100% definieren kann. Dazu ein paar Beispiele:

• 5% = 0.05
• 33% = 0.33
• 50% = 0.5
• 75% = 0.75
• 100% = 1

Nehmen wir wieder unser Standard Beispiel von oben, mit einem Alpha-Wert von 50%:

.product-description { background: rgba(255, 0, 0, 0.5); }

Der Rahmen der Box wird grün, aber nur 33%:

.product-description { border: 2px solid rgba(0, 255, 0, 0.33); }

Und der Text blau, zu 85%:

.product-description { color: rgba(0, 0, 255, 0.85); }

Wie man sieht sind die Farben nun relativ „blass“.

In dem Beispiel macht es aber nur relativ wenig Sinn, da man ja auch einfach ein helleres Rot verwenden könnte. Spannender wird es, wenn man z.B. ein Hintergrund-Bild auf seiner Seite hat und nun den Wrapper (den weißen Hintergrund der gesamten Seite) etwas transparenter macht, sodass der Hintergrund leicht durchscheint. Das geht dann in etwa so:

#wrapper { background-color: rgba(255, 255, 255, 0.7) !important; }

Und sieht am Ende so aus (nicht schön, aber selten):

Weitere Farbdefinitionen

Es gibt noch weitere Möglichkeiten zur Definition der Farben, wie etwa HLS oder CMYK, aber das würde nun den Rahmen dieses Artikels sprengen und im Grund wurden die wichtigsten Punkte erklärt. Wer noch weiter in die Materie einsteigen will, findet oben ja einige lesenswerte Artikel zu dem Thema. 🙂

Weitere Tools zum Thema Farbe

Als kleinen Bonus gibt es nun noch einen Auszug meiner „Color“-Bookmarks, mit ein paar coolen Tools.

• Color Picker & mehr htmlcolorcodes.com
• Besonders spannend für sog. Shades & Tints, also die gleiche Farbe in einzelnen Schritten hin zu schwarz / weiß um eine Abstufung (für z.B. Hover-Effekte) zu erzeugen color-hex.com
• Tool zum Umrechnen von Farben rgb.to
• Tool zum Umrechnen von Farben colorhexa.com
• Farben aus CSS auslesen: hex.corvidworks.com
• Adobe Color CC (ehml. Kuler) color.adobe.com
• Gradient Generator: colorzilla.com/gradient-editor/
• Vordefinierte Farbpaletten: colourlovers.com
• HTML Farben großer Firmen / Brands: brandcolors.net

Du kennst weitere Tools oder hast Fragen zum Thema CSS? Gerne in die Kommentare packen und ich nehme sie dann entsprechend mit auf bzw. versuche zu zu beantworten. 🙂

Nachtrag: Farben harmonisch zusammenstellen

Kurz nach der Veröffentlichung des Artikels wurde ich in unserer WordPress Gruppe wurde ich gefragt, ob ich nicht mal etwas dazu schreiben; wie man Farben so zusammenstellt, dass es am Ende des Tages harmonisch wirkt.

Das ist natürlich ein sehr komplexes Feld was viel mit gutem Geschmack und einem Gefühl dafür zu tun hat und was man nicht mal eben nachmachen kann, aber ich versuche trotzdem mal eine kleine Hilfestellung zu geben und erläutere kurz wie ich bei sowas vorgehe.

Zunächst suchen wir uns mit Hilfe eines Color Pickers eine schicke Farbe. Ich nehme in diesem Beispiel ein Blauton mit dem Wert #0d55b2. Das ist unsere Main-Color. Anschließend brauchen wir eine (am besten) komplementäre, also gegengesetzte, Farbe für die Highlihts, die auf der Seite besonders rausstechen sollen. Hierzu eignet sich rgb.to/hex/0d55b2 sehr gut, dort wird bei dem Punkt „Complementary“ ein orange angezeigt. Das orange gefällt mir aber nun nicht so gut, da es relativ dreckig wirkt, also gebe ich es in einen Color Picker ein und schiebe ein wenig hin und her, bis ich ein schöneres orange finde, nämlich #f29329. Nun brauchen wir noch Farben für die eigentlichen Texte. Dazu nehmen wir zunächst einige Standardwerte als Basis und schieben den Regler dann leicht in die Richtung der Main-Farbe.

Headlines sollten, entweder Farbig, oder sehr dunkel sein. Hierzu verwende ich als Basis immer ein dunkles Grau mit dem Wert #333.

Der Fließtext hingegen sollte niemals zu schwarz sein (zu starker Kontrast auf weiß), darf aber auch nicht zu hell sein. Hier nehme ich immer gerne #666 als Basis (ca. 60% schwarz)

Des Weiteren brauchen wir für Hinweise wie etwa die MwSt. angaben etc einen helleren Text, damit dieser nicht so sehr ins Auge fällt. Hier verwende ich #999 (40% schwarz) als Basis.

Und abschließend brauchen wir, optional, noch eine Hintergrundfarbe. Hier kann man als Basis ein sehr helles Grau #eee (7% schwarz) nehmen.

Somit würde unsere Farbpalette nun etwa so aussehen: