Du hast eine Farbe für deine Website ausgesucht, und jetzt sagt das Design HEX, aber dein Code will RGB. Oder du hast einen schönen Button gebaut und bist nicht sicher, ob jemand den Text darauf lesen kann. Die kostenlosen CSS- & Farb-Tools von GetPlugzz erledigen beides, und noch zwei Jobs dazu: Sie bauen Verläufe und erzeugen box-shadow- und border-radius-CSS. Alles liegt auf einer Seite, aktualisiert sich live beim Tippen und läuft in deinem Browser, es gibt also kein Konto, und nichts wird hochgeladen.
Die vier Tools in einer Minute
Öffne die CSS- & Farb-Tools und wähle einen Reiter:
- Farbkonverter. Tippe eine Farbe als HEX, RGB oder HSL, und die anderen beiden aktualisieren sich sofort. Du kannst auch auf die Farbfläche klicken, um eine Farbe zu wählen.
- Verlauf. Wähle deine Farben (du kannst weitere hinzufügen), entscheide dich für linear oder radial, stell den Winkel ein und drück auf CSS kopieren.
- Kontrast-Checker. Wähle eine Textfarbe und eine Hintergrundfarbe und sieh, ob Menschen mit schwachen Augen es lesen können, mit einem Ergebnis für WCAG AA und AAA.
- Schatten & Radius. Schieb Versatz, Unschärfe und Ausbreitung, um einen box-shadow zu bauen, und runde die Ecken mit border-radius ab. Kopiere das CSS, wenn es gut aussieht.
HEX, RGB und HSL: eine Farbe, drei Arten, sie zu sagen
Stell dir einen Farbton Wandfarbe vor, der auf drei verschiedene Etiketten geschrieben ist. Die Farbe ist dieselbe, nur das Rezept ist anders aufgeschrieben:
- HEX ist das kurze Kürzel: ein # und sechs Buchstaben oder Zahlen, wie #2563EB.
- RGB ist das Rezept: drei Zahlen dafür, wie viel Rot, Grün und Blau gemischt wird.
- HSL sind die Drehregler: Farbton, Sättigung und Helligkeit. Es lässt sich am leichtesten von Hand anpassen. Dieselbe Farbe etwas heller? Einfach einen Regler drehen.
Entwürfe liefern meist eines davon, und dein Code braucht ein anderes. Genau dann spart dir ein Konverter ein paar Minuten.
So wandelst du HEX in RGB um
- Öffne den Farbkonverter. Er ist der erste Reiter.
- Tippe oder füge den HEX-Code ein, in das HEX-Feld.
- Lies das Ergebnis ab. Die RGB- und HSL-Werte füllen sich automatisch, zusammen mit der Farbfläche.
Es geht auch andersherum. Tippe in eines der drei Felder, und die anderen beiden folgen.
Lässt sich dein Text wirklich lesen? (das Flüster-Problem)
Hellgrauer Text auf weißem Hintergrund sieht auf deinem Bildschirm edel aus. Für jemanden mit schwachen Augen oder mit dem Handy in der prallen Sonne ist er ein Flüstern in einem lauten Raum. Der Kontrast-Checker misst, wie sehr sich Text- und Hintergrundfarbe unterscheiden, und sagt dir, ob es reicht.
Er nutzt WCAG, die Web Content Accessibility Guidelines, die einen Mindestkontrast festlegen, damit Text auch für Menschen mit Sehschwäche lesbar bleibt. Es gibt zwei Stufen: AA ist der Standard, den die meisten Websites anstreben, und AAA ist strenger. Was du brauchst:
- Normaler Text: mindestens 4,5:1 für AA und 7:1 für AAA.
- Großer Text: 3:1 reicht für AA. Groß heißt ab 18pt, oder ab 14pt in fett.
Das Tool zeigt das Verhältnis und ein Ergebnis für normalen und großen Text auf beiden Stufen, du musst also nichts rechnen.
Verläufe und Schatten, ohne das CSS von Hand zu schreiben
Für einen Verlauf wähle deine Farben, entscheide dich für linear oder radial, stell den Winkel ein und drück auf CSS kopieren. Das ist die ganze Arbeit.
Für einen Schatten denk an eine Lampe über einer Kiste. Der Versatz ändert, wohin der Schatten fällt, mehr Unschärfe macht ihn weicher, und die Ausbreitung macht ihn größer. Du kannst Farbe und Deckkraft des Schattens festlegen oder ihn nach innen setzen. Dann rundest du die Ecken mit border-radius ab, alle auf einmal, und kopierst das CSS, wenn es gut aussieht.
Wann du das wirklich brauchst
- Ein Entwurf liefert dir einen HEX-Code, und dein Code will RGB oder HSL.
- Ein Button oder eine Überschrift, bei der du prüfen willst, ob der Text lesbar ist.
- Ein Seiten- oder Kartenhintergrund, der einen schönen Verlauf braucht.
- Eine Karte, die sich von der Seite abheben soll, mit weichem Schatten und runden Ecken.
- Ein Barrierefreiheits-Check für einen Kunden, ein Schulprojekt oder deine eigene Seite.
Gut zu wissen, bevor du loslegst
- Farben sind vollständig deckend: Es gibt keine Transparenz (Alpha) und keine achtstelligen Hex-Codes.
- HSL-Werte werden auf ganze Zahlen gerundet, beim Zurückrechnen kann ein Farbkanal daher um 1 abweichen.
- Bestanden oder nicht beim Kontrast nutzt die exakten Farben; das angezeigte Verhältnis ist auf zwei Stellen gerundet, 4,496 erscheint also als 4.50:1, erreicht aber nicht 4,5.
- Verläufe nehmen bis zu 6 Farben, gleichmäßig verteilt, als linearer Winkel oder kreisförmiger Radialverlauf.
Häufige Fragen
Ja. Es gibt kein Konto, und es muss nichts installiert werden.
Nein. Alles wird live in deinem Browser berechnet.
Tippe oder füge den HEX-Code in das HEX-Feld im Farbkonverter ein. Die RGB- und HSL-Werte füllen sich automatisch.
Bei normalem Text peile mindestens 4,5:1 (AA) an. Bei großem Text reichen 3:1. Die strengere Stufe AAA verlangt 7:1 bei normalem Text.
HSL steht für Farbton, Sättigung und Helligkeit. Es lässt sich leichter von Hand anpassen als HEX oder RGB, zum Beispiel um eine Farbe aufzuhellen.
Kostenlose CSS- & Farb-Tools — ohne Upload, ohne Anmeldung
Wandle Farben um, baue Verläufe, prüfe den Kontrast und erstelle Schatten-CSS. Von GetPlugzz gebaut, komplett in deinem Browser verarbeitet.
