Kostenloses Online-Tool

Kostenlose CSS- & Farb-Tools

Wähle Farben, baue Gradients, prüfe den Kontrast und erstelle Schatten- & Radius-CSS — alles an einem Ort. Nichts wird hochgeladen, alles aktualisiert sich live beim Tippen.

Klicke auf die Farbfläche, um eine Farbe auszuwählen

HEX

RGB

HSL

Tippe in ein beliebiges Feld — HEX, RGB oder HSL — und die anderen beiden aktualisieren sich automatisch, zusammen mit der Farbfläche.

Was du mit diesen CSS- und Farb-Tools machen kannst

Farbkonverter — gib eine Farbe als HEX, RGB oder HSL ein, und die anderen beiden aktualisieren sich sofort. Praktisch, wenn ein Design dir das eine liefert und dein Code das andere braucht.
Verlauf — wähle deine Farben, entscheide dich für Linear oder Radial, stell den Winkel ein und klick auf CSS kopieren.
Kontrast-Checker — wähle eine Text- und eine Hintergrundfarbe, um zu sehen, ob auch Menschen mit schwacher Sehkraft sie lesen können (WCAG AA und AAA).
Schatten & Radius — verschieb Versatz, Unschärfe und Ausbreitung, um einen Box-Shadow zu bauen, und runde die Ecken mit Border-Radius ab. Kopiere das CSS, wenn es dir gefällt.

Farbbegriffe erklärt

HEX — eine Farbe, geschrieben als # und sechs Buchstaben oder Zahlen, zum Beispiel #2563EB.
RGB — dieselbe Farbe als drei Zahlen für Rot, Grün und Blau.
HSL — Farbton, Sättigung und Helligkeit. Das lässt sich von Hand leichter anpassen, zum Beispiel um eine Farbe aufzuhellen.
WCAG-Kontrast — eine Regel dafür, wie unterschiedlich Text und Hintergrund sein müssen, damit der Text lesbar bleibt. AA ist die Stufe, die die meisten Websites anstreben, AAA ist strenger.

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.