Wenn du mit Design, Social Media oder Webseiten arbeitest, begegnen dir Farben in verschiedenen Schreibweisen. Es sind unterschiedliche Arten, dasselbe zu benennen.
Die drei Formate
- HEX, zum Beispiel
#E4007C: das gängigste Format im Webdesign. Es besteht aus drei Zahlenpaaren: Rot, Grün und Blau. - RGB, zum Beispiel
rgb(228, 0, 124): die Menge an Rot, Grün und Blau, jeweils von 0 bis 255. - HSL, zum Beispiel
hsl(330, 100%, 45%): Farbton, Sättigung und Helligkeit. Praktisch, um Varianten zu erstellen, etwa einen helleren Ton.
Mit dem Farbumrechner HEX, RGB und HSL gibst du eine Farbe in einem der Formate ein oder wählst sie mit der Farbauswahl und erhältst sofort die beiden anderen, mit Buttons zum Kopieren. Er akzeptiert auch dreistellige HEX-Werte: #F0A entspricht #FF00AA.
Farben aus einem Bild auslesen
Du hast ein Logo oder ein Referenzfoto? Farbpalette aus einem Bild fasst die Hauptfarbtöne zusammen und liefert dir ihren HEX-Wert. Tippe auf eine Farbe, um sie zu kopieren, oder kopiere alle als CSS-Variablen. Das Ergebnis ist eine Annäherung: ähnliche Farben werden zusammengefasst.
Praktische Anwendungen
- Aus deinem Logo ein Favicon erstellen.
- Eine SVG in PNG in der Größe umwandeln, die du brauchst.
- Ein Logo mit Einfarbigen Hintergrund entfernen freistellen.
Tipps zur Barrierefreiheit
Achte auf einen guten Kontrast zwischen Text und Hintergrund und verlasse dich nicht allein auf Farbe, um etwas zu vermitteln. Hellgrauer Text auf Weiß kann für viele Menschen unleserlich sein.