Zum Inhalt springen
SPCXTools

Farbkonverter

Jede Farbe zwischen HEX, RGB, HSL, HSV und CMYK umrechnen und den Kontrast prüfen.

Läuft lokal – Dateien verlassen dein Gerät nicht

Tool wird geladen…

So nutzt du: Farbkonverter

  1. 1Geben Sie eine Farbe in einem beliebigen Format ein – z. B. #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) oder einen CSS-Namen wie tomato – oder verwenden Sie die Farbauswahl.
  2. 2Lesen Sie dieselbe Farbe in HEX, RGB, HSL, HSV und CMYK ab und kopieren Sie das gewünschte Format.
  3. 3Prüfen Sie das Kontrastverhältnis auf weißem und schwarzem Hintergrund, um zu sehen, ob Text in dieser Farbe lesbar ist.
  4. 4Klicken Sie auf ein Farbfeld in der Skala für Tönungen und Schattierungen, um hellere und dunklere Varianten zu entdecken.

Farben zwischen allen gängigen Formaten umrechnen

Designer, Entwickler und Marketing-Experten verschieben ständig Farben zwischen Tools, die unterschiedliche Sprachen sprechen: CSS benötigt HEX oder HSL, ein Styleguide listet RGB und CMYK auf, und eine Design-Anwendung zeigt HSB. Dieser Farbkonverter nimmt eine Farbe in einem dieser Formate entgegen und zeigt sie sofort in allen anderen an – jedes mit einer Ein-Klick-Kopierfunktion. Er prüft auch den Textkontrast für die Barrierefreiheit und generiert eine Skala mit Tönungen und Schattierungen.

Funktionen

  • Beliebiges Eingabeformat: HEX (3, 4, 6 oder 8 Ziffern), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, einfache Zahlentripel und CSS-Farbnamen.
  • Alle Formate auf einmal: HEX, RGB, HSL, HSV und CMYK, jeweils mit Kopier-Button.
  • Unterstützung für Transparenz — Alpha-Werte werden in HEX8, RGBA und HSLA beibehalten.
  • Nativer Color-Picker zur visuellen Auswahl einer Farbe.
  • WCAG-Kontrastprüfung auf weißem und schwarzem Hintergrund, mit AA-Ergebnissen für normalen und großen Text.
  • Tönungen und Schattierungen von 10 % bis 90 % Helligkeit; klicken Sie auf ein Farbfeld, um es zu laden.

Farbmodelle erklärt

  • HEX — #RRGGBB in Hexadezimal, das gängigste Format im Webdesign. Ein optionales viertes Paar legt die Transparenz fest.
  • RGB — Rot, Grün und Blau von 0 bis 255; so erzeugen Bildschirme Farben.
  • HSL — Farbton (Position auf dem Farbkreis), Sättigung (Intensität) und Helligkeit. Einfach manuell anzupassen: Ändern Sie nur die Helligkeit, um hellere oder dunklere Versionen derselben Farbe zu erhalten.
  • HSV / HSB — Farbton, Sättigung und Wert (Helligkeit), wird von den meisten Color-Pickern in Design-Tools verwendet.
  • CMYK — Prozentanteile der Druckfarben Cyan, Magenta, Gelb und Key (Schwarz), die im Druck verwendet werden.

Beispiel

Das Himmelblau #0EA5E9 ist rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) und ungefähr cmyk(94%, 29%, 0%, 9%). Sein Kontrast auf Weiß beträgt etwa 2.8:1 – ausreichend für große Überschriften und Icons, aber zu niedrig für Fließtext, der 4.5:1 benötigt. Auf Schwarz erreicht es etwa 7.6:1 und besteht den Test problemlos.

Tipps für die Arbeit mit Farben

  • Erstellen Sie Paletten in HSL. Halten Sie Farbton und Sättigung konstant und variieren Sie die Helligkeit, um konsistente Zustände für Buttons, Hintergründe und Ränder zu erzeugen.
  • Prüfen Sie den Kontrast frühzeitig. Viele Markenfarben sind für Text auf weißem Grund zu hell; verwenden Sie für Text einen dunkleren Ton aus der Skala und das Original für Akzente.
  • Verlassen Sie sich nicht allein auf Farben, um Bedeutung zu vermitteln – fügen Sie für Menschen mit Farbsehschwäche Icons oder Beschriftungen hinzu.
  • Rechnen Sie mit Abweichungen im Druck. Helle RGB-Farben, insbesondere leuchtende Blau- und Grüntöne, wirken in CMYK oft matter.

Arbeiten Sie auch mit Bildern? Der Bildkonverter wandelt Formate zwischen JPG, PNG und WebP um. Um ein kleines Bild oder Icon für CSS zu kodieren, verwenden Sie Base64.

Häufige Fragen

Wie rechnet man HEX in RGB um?
Eine HEX-Farbe besteht aus drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau. Rechnen Sie jedes Paar von Basis 16 in Basis 10 um: Bei #FF8800 ist FF = 255, 88 = 136 und 00 = 0, die Farbe ist also rgb(255, 136, 0). Bei der dreistelligen Kurzschreibweise wie #F80 wird zuerst jede Ziffer verdoppelt.
Was ist der Unterschied zwischen HSL und HSV (HSB)?
Beide beschreiben eine Farbe durch Farbton (0–360°) und Sättigung, verwenden aber einen unterschiedlichen dritten Wert. Bei HSL ist bei 50 % Helligkeit die reine Farbe, bei 0 % Schwarz und bei 100 % Weiß. Bei HSV/HSB ist bei einem Wert (Value) oder einer Helligkeit (Brightness) von 100 % die reine Farbe bei voller Sättigung, und bei 0 % ist sie Schwarz. Design-Anwendungen wie Photoshop und Figma verwenden oft HSB in ihrer Farbauswahl, während CSS HSL verwendet.
Ist die CMYK-Umrechnung für den Druck genau?
Die CMYK-Werte sind eine mathematische Umrechnung von RGB und eignen sich als Ausgangspunkt. Der tatsächliche Druck hängt von Drucker, Tinte und Papier ab, die durch ICC-Farbprofile definiert werden. Für professionelle Druckaufträge sollten Sie die Umrechnung in Ihrer Design-Software mit dem Profil Ihres Druckers durchführen.
Was bedeuten die Kontrastverhältnisse?
Die Web Content Accessibility Guidelines (WCAG) messen den Kontrast zwischen Text und Hintergrund von 1:1 bis 21:1. Normaler Text benötigt mindestens 4.5:1, um die Stufe AA zu bestehen, und großer Text (ca. 24 px oder 18.7 px fett) benötigt 3:1. Die Prüfung zeigt, ob die Farbe auf einem weißen und auf einem schwarzen Hintergrund besteht.
Welche Eingabeformate werden unterstützt?
HEX mit 3, 4, 6 oder 8 Ziffern (mit oder ohne #), rgb() und rgba(), hsl() und hsla(), hsv() oder hsb(), cmyk(), drei einfache Zahlen wie 255 136 0 und CSS-Farbnamen wie rebeccapurple. Sowohl die kommagetrennte als auch die moderne, durch Leerzeichen getrennte Syntax funktionieren, einschließlich Alpha-Werten wie rgb(14 165 233 / 50%).

Ähnliche Tools

Bild-KonverterFotos und Grafiken zwischen JPG, PNG, WebP und AVIF umwandeln – stapelweise und ohne Upload.Groß- und Kleinschreibung umwandelnÄndern Sie die Schreibweise von Text – von Titel-Schreibweise bis snake_case – und sehen Sie alle Formate auf einen Blick.Base64 Kodieren & DekodierenWandeln Sie Text und Dateien in Base64 um und zurück, mit voller Unterstützung für UTF-8 und Base64URL.Box Shadow GeneratorPasse weiche, harte, mehrschichtige oder Inset-Schatten mit einer Live-Vorschau an und kopiere den CSS-Code.Farbenblindheit-SimulatorBetrachte deine Bilder durch die Augen von Menschen mit Farbfehlsichtigkeit, um sicherzustellen, dass deine Designs barrierefrei sind.Farbkontrast-CheckerPrüfe, ob dein Text ausreichend lesbar ist — und finde die ähnlichste Farbe, die den WCAG-Richtlinien entspricht.