🎨 Farbkonverter

HEX, RGB, HSL, OKLCH - welches Format sollten Sie verwenden?

Jede Farbe auf dem Bildschirm kann in mehreren äquivalenten Formaten beschrieben werden. Jedes hat seine eigenen Stärken:

• HEX (#6366f1) - Kompakt und universell. Überall in CSS, Design-Tools und Markenrichtlinien verwendet. Einfach zu kopieren/einzufügen, aber für Anpassungen nicht direkt lesbar.
• RGB (rgb(99, 102, 241)) - Direkte Werte für Rot/Grün/Blau-Kanäle. Nützlich, wenn Farben programmatisch generiert werden oder wenn ein Alpha-Kanal benötigt wird.
• HSL (hsl(239, 84%, 67%)) - Farbton (Hue), Sättigung (Saturation), Helligkeit (Lightness). Viel einfacher manuell anzupassen: Ändern Sie den Farbton, um die Farbe zu verschieben, oder die Helligkeit für hellere/dunklere Varianten.
• OKLCH (oklch(0.59 0.21 280)) - Wahrnehmungsmäßig gleichmäßiger Farbraum. Gleiche Helligkeitswerte sehen tatsächlich gleich hell aus (anders als bei HSL). Moderne Designsysteme setzen auf OKLCH für vorhersehbare Kontraste und Palettengenerierung.

So verwenden Sie diesen Farbkonverter

• Geben Sie Werte in ein beliebiges Feld ein - Ändern Sie HEX, RGB, HSL oder OKLCH, und alle anderen Formate werden sofort aktualisiert.
• Ziehen Sie einen Schieberegler - Passen Sie einzelne Kanäle (R, G, B, H, S, L) mit Live-Vorschau an.
• Klicken Sie auf das Farbfeld - Kopiert den aktuellen HEX-Wert in Ihre Zwischenablage.
• Verwenden Sie die Pipette - Wählen Sie eine beliebige Farbe von Ihrem Bildschirm aus (nur Chrome und Edge - nutzt die native EyeDropper-API).
• Verlaufspalette - Jede Farbe, die Sie vorschauen, wird lokal gespeichert, sodass Sie sie während der Sitzung wieder aufrufen können.

🔒 100% Privat & Sicher

Ihre Daten bleiben auf Ihrem Gerät. Alle Farbkonvertierungen finden lokal in Ihrem Browser statt - Ihre Farben werden nie an einen Server gesendet.

Häufig gestellte Fragen

Unterstützt dieses Werkzeug Transparenz (Alpha)?

Noch nicht - Version 1 unterstützt nur deckende Farben. Alpha-Unterstützung (RGBA, HSLA, OKLCH mit Alpha) steht auf der Roadmap.

Warum liefert HSL → OKLCH keine glatten Zahlen?

HSL und OKLCH sind grundlegend unterschiedliche Farbmodelle. HSL ist eine einfache geometrische Neuordnung von RGB; OKLCH basiert auf dem OKLab-Farbraum. Die Konvertierung erfolgt über RGB und das lineare XYZ-Modell, weshalb Dezimalwerte entstehen. Das sieht zwar unruhig aus, die Farbe ist jedoch exakt dieselbe.

Warum zeigt der Farbname manchmal „-“ an?

Das Werkzeug wählt die am besten passende Farbe aus den 147 CSS-Farbnamen. Wenn Ihre Farbe zu weit von allen Namen entfernt ist (was bei den meisten Farben der Fall ist), zeigen wir „-“ an, um Sie nicht in die Irre zu führen.

Ist die Pipette in allen Browsern verfügbar?

Nein - die native EyeDropper-API ist derzeit nur für Chrome und Edge verfügbar. Der Button wird in nicht unterstützten Browsern (Firefox, Safari) deaktiviert.

Verwandte Werkzeuge