HSL-Farbkonverter: HSL zu HEX & RGB mit Schiebereglern | Kostenlos

A Direkt nein — dieses Tool hat keinen Speicher-Button oder Export-Funktion. Du kannst dir aber in zwei Sekunden selbst helfen. Kopiere einfach den HEX-Code, der sich live mit den Reglern aktualisiert, und füge ihn in deine Designsoftware, eine CSS-Datei oder eine Notiz-App ein. Mach am besten ein separates Dokument auf, während du verschiedene HSL-Kombinationen durchspielst.

A Dieser HSL-Konverter arbeitet ausschließlich mit deckenden Farben — Alphakanäle sind nicht integriert. Brauchst du Transparenz, kombinierst du die HEX- oder RGB-Werte nachträglich in CSS mit einem separaten Alpha-Wert, etwa rgba(255, 100, 50, 0.7). Für die meisten Projektanforderungen reichen die ausgegebenen Vollfarbcodes völlig aus.

A Direkt in diesem Konverter nicht – er hat keinen integrierten Kontrastprüfer. Aber es gibt einen Workaround: Stelle deine Hintergrundfarbe mit den Schiebereglern ein, kopiere den HEX-Code und mach dasselbe für die Textfarbe. Gib beide HEX-Werte in einen kostenlosen WCAG-Kontrastrechner im Web ein. Du brauchst mindestens ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Ich halte immer ein Kontrastprüf-Tab offen, wenn ich Markenfarben wähle.

A Ja, aber das Mischen machst du selbst. Wähle deine erste Farbe mit den Reglern aus, kopiere den HEX-Code, dann stell die zweite Farbe ein. Für einen weichen CSS-Verlauf sollten sich die Farbtöne um höchstens 30 Grad unterscheiden, und die Helligkeit variiert um mindestens 20%. Ein bewährter Trick: setze beide Sättigungswerte zwischen 50-70% für satte Übergänge. Füge beide HEX-Codes in deine Gradient-Eigenschaft ein, etwa 'background: linear-gradient(#HEX1, #HEX2)'.

A Diese Spanne ist kein Zufall — sie folgt dem klassischen Farbkreis-Konzept. Rot sitzt bei 0°, Grün bei 120° und Blau bei 240°, sodass 360° nahtlos wieder in Rot übergeht. Ich weiß, dass jeder einzelne Grad wie Overkill wirkt, aber es gibt dir maximale Kontrolle. Für die meisten Designarbeiten reichen Schritte von 5 oder 10 Grad völlig aus. Halte die Umschalttaste gedrückt, während du den Regler ziehst, dann springt er automatisch in diesen größeren Schritten.

A Ja, und der ist besser als Raten. Öffnen Sie den Screenshot in einem Bildeditor mit Farbpipette und nehmen Sie den exakten Pixel auf, den Sie brauchen. Das liefert einen RGB-Wert. Tragen Sie diese drei Zahlen in die RGB-Felder unseres Konverters ein, und Sie erhalten sofort die HSL-Aufschlüsselung plus passendes HEX. Das funktioniert prima für Logos, Fotos oder UI-Entwürfe. Ein Tipp: Screenshot bei 100% Zoom aufnehmen, sonst erwischen Sie unscharfe Kantenpixel, die die Farbe verfälschen.

A Sie sind verwandt, aber nicht identisch. HSL nutzt einen Doppelkegel-Farbraum, bei dem die Helligkeit von Schwarz bis Weiß reicht. Bei L=50% erhältst du die reinste Form eines Farbtons. HSV verwendet einen einzelnen Kegel, bei dem die Helligkeit von Schwarz bis zur vollen Farbe skaliert. Ein kräftiges Gelb wäre HSL(60, 100%, 50%), aber HSV(60, 100%, 100%). Dieser Konverter arbeitet mit HSL. Wenn du Werte aus Photoshops HSV-Reglern übernimmst, korrigiere Sättigung und Helligkeit manuell. Für CSS passt HSL direkt zur modernen `hsl()`-Funktion.

A Verbreiteter Irrtum, aber nein. Beide beschreiben exakt dieselbe Farbe — HSL(210, 50%, 40%) und der HEX-Zwilling #336699 sind identische Werte, nur anders notiert. Die Genauigkeit hängt vom Bildschirm ab, nicht von der Schreibweise. Beim Feinjustieren gewinnt HSL trotzdem: 5 % mehr Sättigung schieben ist einfacher, als HEX-Ziffern zu raten. Also mit HSL experimentieren und am Ende den HEX-Wert kopieren.

A Lehrkräfte nutzen die Regler oft, um Schülern zu zeigen, wie sich die Sättigung auf den Grundton auswirkt. Du kannst die Hex-Werte direkt an die Tafel projizieren, um zu demonstrieren, wie null Prozent Helligkeit zu Schwarz führt. Das nimmt Anfängern die Angst vor dem Farbcode.

A Marketingteams benötigen exakte Farbwerte für Social-Media-Grafiken und Drucksachen. Du sicherst deine Markenfarbe ab, indem du den HEX-Code einträgst und die HSL-Werte für den Styleguide übernimmst. Grafiker können die Helligkeit um 15 Prozent anheben, um einen Hover-Zustand zu erstellen. Teile diese HEX-Werte direkt mit deiner Agentur.