Was ist CSS-Farbcode-Generator?

Ein CSS-Farbcode-Generator, der jede Farbe in alle CSS-kompatiblen Formate umwandelt: HEX, RGB, RGBA, HSL, HSLA, OKLCH und CSS-Farbnamen. Wählen Sie eine Farbe visuell aus oder geben Sie ein beliebiges Format ein und erhalten Sie sofort alle anderen, samt einer WCAG-Kontrastprüfung.

Tippe einen Hex-Wert ein, ziehe den Color-Picker, verschiebe die RGB-Regler oder füge eine vorhandene rgb()- oder hsl()-Zeichenkette ein. Das Tool berechnet die anderen Formate live, inklusive OKLCH für wahrnehmungsgleichmäßige Paletten, und sucht den nächstgelegenen benannten CSS-Farbwert aus den 147 W3C-Einträgen. Alpha-Werte erscheinen erst, wenn du die Deckkraft unter 100 % senkst, sodass rgba()- und hsla()-Zeilen bei opaken Farben aufgeräumt bleiben. Ein Kontrastpanel zeigt das WCAG-Verhältnis auf Weiß und Schwarz, damit du auf einen Blick siehst, ob die Farbe als Text lesbar ist.

Anleitung

1. Wählen Sie eine Farbe über den visuellen Picker oder geben Sie einen Wert in einem unterstützten Format ein (HEX, RGB, HSL).
2. Sehen Sie die Farbe gleichzeitig in allen CSS-Formaten, mit Ein-Klick-Kopieren für jedes Format.
3. Passen Sie die Transparenz mit dem Alpha-Schieberegler an, um RGBA- und HSLA-Werte zu erhalten, und kopieren Sie den benoetigen CSS-Code.

Wann verwenden

• Den Hex-Wert deiner Designerin ins Format bringen, das dein CSS-Framework erwartet.
• Eine Palette aufbauen und HSL nutzen, um stimmige hellere und dunklere Abstufungen abzuleiten.
• Eine Markenfarbe transparent machen für Overlays, Schatten oder Hover-Zustände.

Ergebnis

Ein Frontend-Entwickler waehlt das Markenorange #F97316 und erhaelt sofort rgb(249, 115, 22), hsl(25, 95%, 53%) und alle weiteren Formate für eine konsistente Verwendung in seinem Stylesheet.

Häufige Fragen

Warum ist das Feld für die benannte Farbe manchmal leer?

CSS bringt nur 147 benannte Farben mit und dein Hex-Wert muss exakt einem davon entsprechen. Fast jede Markenfarbe liegt zwischen zwei benannten Werten, das ist normal. Das Feld hilft vor allem, gängige Standardfarben wie tomato oder steelblue zu erkennen.

Wann ist HSL besser als HEX oder RGB?

HSL lässt sich von Hand angenehmer anpassen: +10 bei der Helligkeit ergibt einen helleren Ton, +30 beim Farbton wandert ein Stück auf dem Farbkreis. Wer Skalen baut, greift gern zu HSL. RGB und HEX sind in der finalen Stylesheet etwas kürzer.

Verändert der Deckkraft-Regler die Farbe oder nur die Transparenz?

Er ändert nur den Alpha-Kanal. Die Rot-, Grün- und Blau-Werte bleiben gleich. Deshalb wirkt rgba(255, 0, 0, 0.5) auf weißem Hintergrund rosa: dasselbe Rot, halb mit dem dahinterliegenden Hintergrund vermischt.

Werden diese CSS-Werte von allen Browsern unterstützt?

HEX, RGB, RGBA, HSL, HSLA und benannte Farben werden seit 15 Jahren universell unterstützt, bis hin zu IE11. OKLCH wird hier ebenfalls erzeugt und läuft überall Aktuellen — Chrome, Firefox, Safari und Edge ab 2023 — behalte also einen hex- oder rgb()-Fallback, falls du noch sehr alte Engines bedienst.

Wie hole ich mir den Hex-Wert einer Farbe, die ich auf einer Webseite sehe?

Klick auf Vom Bildschirm holen, um die Pipette zu öffnen, und klick dann auf ein beliebiges Pixel irgendwo auf deinem Bildschirm — eine Seite, ein Bild, ein Mockup — und die Farbe wird sofort geladen. (Die Pipette läuft in Chrome, Edge oder Opera; unter Safari oder Firefox holst du dir den Hex mit der Bildschirm-Pipette deines Betriebssystems und fügst ihn ins HEX-Feld ein.) So oder so bekommst du alle gleichwertigen Formate und die Varianten mit Deckkraft auf einmal.

Ähnliche Tools