Farbauswahl- und -Konverter — HEX, RGB, HSL, CMYK-Codes online

Farbe ist die Grundlage jeder visuellen Gestaltung. Ob Sie eine Website erstellen, eine mobile App entwerfen, eine Markenidentität gestalten oder eine Datei für den Druck vorbereiten — Sie benötigen präzise Farbcodes, die sich perfekt in jedem Medium übersetzen. Farben, die man mit dem Auge schätzt, führen zu ungleichmäßigen Ergebnissen. Unser kostenloser Farbauswahl- und -Konverter gibt Ihnen exakte Farbwerte in vier professionellen Formaten — HEX, RGB, HSL und CMYK — plus eine vollständige Palette von Tönen und Schattierungen, um harmonische Farbschemata in Sekunden zu erstellen.

Warum präzise Farben im Design wichtig sind

Farbe ist nicht nur Dekoration. Sie treibt das Nutzerverhalten an, kommuniziert die Markenidentität und gewährleistet Barrierefreiheit. Eine Studie des Color Marketing Group ergab, dass bis zu 85 Prozent der Verbraucher Farbe als primären Grund für den Kauf eines Produkts identifizieren. In der digitalen Gestaltung kann die falsche Blautonfarbe einen Button unsichtbar machen, während die richtige Grünfarbe die Konversionsrate durch das Signal für Vertrauen und Aktion erhöhen kann.

Das Problem besteht darin, dass Farbe in verschiedenen Formaten existiert, je nachdem, wo sie verwendet wird. Webentwickler arbeiten mit HEX und RGB. Grafikdesigner bevorzugen oft HSL, weil es intuitiv anzupassen ist. Druckexperten benötigen CMYK, weil Bildschirme und Drucker Farbe unterschiedlich erzeugen. Ohne einen zuverlässigen Konverter wird das Übersetzen einer einzigen Farbe in diese Formate ein manueller, fehleranfälliger Prozess.

Bildschirme emittieren Licht mithilfe des additiven RGB-Modells — sie kombinieren Rot, Grün und Blau, um Farben zu erzeugen. Drucker verwenden das subtraktive CMYK-Modell — sie überlagern Cyan, Magenta, Gelb und Schwarz, um Licht zu absorbieren und Farben zu erzeugen. Da diese Prozesse grundlegend unterschiedlich sind, kann eine Farbe, die auf dem Bildschirm lebhaft aussieht, auf Papier stumpf oder verschoben wirken. Ein ordnungsgemäßer Farbkonverter zeigt Ihnen die exakten Werte in jedem System, damit Sie wissen, was Sie erwarten, bevor Sie sich für ein Design entscheiden.

Wie Sie den Farbauswahl- und -Konverter verwenden

Das Finden und Konvertieren von Farben dauert Sekunden. Sie können mit einer visuellen Auswahl, einem HEX-Code oder RGB-Schiebereglern beginnen.

Wählen Sie eine Farbe mithilfe der nativen Farbeingabe. Klicken Sie auf das Farbverknüpfungselement, um den Farbauswahler Ihres Systems zu öffnen und jede Schattierung visuell auszuwählen. Alternativ können Sie einen HEX-Code direkt in das Eingabefeld tippen.
Feinabstimmung mit RGB-Schiebereglern für präzise Kontrolle. Justieren Sie die Werte für Rot, Grün und Blau unabhängig mithilfe der Schiebereglern oder durch Eingabe exakter Zahlen (0–255).
Sehen Sie sofortige Konvertierungen in allen vier Formaten. Während Sie die Farbe anpassen, werden die HEX-, RGB-, HSL- und CMYK-Werte in Echtzeit aktualisiert. Jedes Format hat seine eigene Kopierfunktion.
Kopieren Sie jeden Code mit einem Klick. Klicken Sie auf das Kopiericon neben jedem Format, um den exakten Wert in Ihre Zwischenablage zu speichern. Ein Haken bestätigt den erfolgreichen Kopiervorgang.
Erkunden Sie Töne und Schattierungen unter dem Hauptauswahler. Das Tool generiert automatisch ein Raster von hellen Tönen (durch Hinzufügen von Weiß) und dunklen Schattierungen (durch Hinzufügen von Schwarz) basierend auf Ihrer ausgewählten Farbe. Klicken Sie auf eine Variation, um sie auszuwählen und ihre konvertierten Werte sofort zu sehen.

Der gesamte Prozess ist visuell und interaktiv. Sie müssen nicht die Mathematik hinter Farbräumen kennen — das Tool übernimmt jede Konvertierung automatisch.

Verständnis der Farbformate

Format	Was es darstellt	Beste Verwendung	Beispiel
HEX	Sechsstelliger Hexadezimalcode, der RGB-Werte darstellt	Webdesign, CSS, HTML, digitale Grafiken	`#3B82F6`
RGB	Rot-, Grün- und Blaulichtwerte von 0 bis 255	Bildschirmanzeigen, CSS, Bildbearbeitung, Video	`rgb(59, 130, 246)`
HSL	Farbton (0–360°), Sättigung (0–100%), Helligkeit (0–100%)	Intuitive Farbanpassung, Themen, Barrierefreiheit	`hsl(217, 91%, 60%)`
CMYK	Prozentwerte für Cyan, Magenta, Gelb und Schlüssel (Schwarz) von 0 bis 100	Professioneller Druck, Verpackungen, Veröffentlichungen	`cmyk(76%, 47%, 0%, 4%)`

HEX-Codes

HEX ist das am häufigsten verwendete Format in der Webentwicklung. Es stellt Rot, Grün und Blau als zwei stellige Hexadezimalzahlen dar, die zu einem sechsziffrigen String kombiniert werden, der mit einem Hash vorangestellt ist. #FF0000 ist reines Rot, #00FF00 ist reines Grün und #0000FF ist reines Blau. Das kompakte Format macht es einfach, in CSS-Dateien, Design-Token und Konfigurationsdateien einzufügen.

RGB-Werte

RGB definiert Farben durch die Intensität von Rot, Grün und Blaulicht auf einer Skala von 0 bis 255. Dies ist die natürliche Sprache von Computermonitoren, Fernsehbildschirmen und Smartphone-Displays. RGB ist auch die Grundlage, auf der HEX-Codes basieren — jeder HEX-Wert kann direkt in RGB konvertiert werden und umgekehrt.

HSL-Werte

HSL steht für Farbton, Sättigung und Helligkeit. Designer bevorzugen oft HSL, weil es sich auf die Art und Weise bezieht, wie Menschen über Farben denken. Farbton ist die tatsächliche Farbe im Spektrum (0° ist Rot, 120° ist Grün, 240° ist Blau). Sättigung steuert, wie lebhaft oder gedämpft die Farbe ist. Helligkeit steuert, wie hell oder dunkel sie ist. Möchten Sie eine hellere Version Ihrer Blaufarbe? Erhöhen Sie einfach den Helligkeitswert. Möchten Sie sie gedämpfter? Verringern Sie die Sättigung. Diese intuitive Struktur macht HSL ideal für das Erstellen von Farbpaletten und Design-Systemen.

CMYK-Werte

CMYK ist der Standard für den Druck, weil physische Tinte Licht nicht erzeugen kann. Anstatt wie ein Bildschirm Rot, Grün und Blau zu emittieren, absorbieren gedruckte Materialien Licht. Cyan absorbiert Rot, Magenta absorbiert Grün und Gelb absorbiert Blau. Schwarz (der "K" in CMYK) wird hinzugefügt, weil das Zusammenmischen von Cyan, Magenta und Gelb selten ein tiefes, reiches Schwarz erzeugt. Wenn Sie eine RGB- oder HEX-Farbe in CMYK konvertieren, übersetzen Sie die Bildschirmlichtwerte in Tintenabdeckungsprozentsätze, die ein Drucker verstehen kann.

Wichtige Funktionen

Funktion	Was sie tut	Warum sie wichtig ist
Eigener Farbauswahler	Öffnet den Systemfarbauswahler für visuelle Auswahl	Ermöglicht die natürliche Farbauswahl mit dem Auge vor der Feinabstimmung
Manuelle HEX-Eingabe	Jeder gültige HEX-Code direkt eingeben	Perfekt, wenn Sie eine Farbe aus einem Markenleitfaden oder Designfile haben
RGB-Schiebereglern	Unabhängige Schiebereglern für Rot, Grün und Blau	Präzise Anpassungen, um exakte Spezifikationen zu erfüllen
Echtzeit-Konvertierung	Alle vier Formate werden sofort aktualisiert, während Sie anpassen	Kein Raten — sehen Sie alle Werte gleichzeitig, ohne zwischen Tabs zu wechseln
Ein-Klick-Kopie	Kopierbutton für jedes Format mit visueller Bestätigung	Holen Sie sich den exakten Code, den Sie benötigen, ohne manuelle Auswahl
Töne-Palette	Hellere Versionen Ihrer Farbe durch Hinzufügen von Weiß	Erstellen Sie Hover-Zustände, Hintergründe und subtile Akzente
Schattierungen-Palette	Dunklere Versionen Ihrer Farbe durch Hinzufügen von Schwarz	Erstellen Sie Rahmen, aktive Zustände und Tiefe in Ihrem Design
Klick-zur-Auswahl-Variationen	Klicken Sie auf jede Tönung oder Schattierung, um sie auszuwählen	Iterieren Sie durch Palette-Optionen, ohne Codes erneut einzugeben

Im Gegensatz zu isolierten Farbauswählern, die nur ein Format ausgeben, verbindet dieses Tool die Lücke zwischen digitaler und Druckgestaltung. Ein Webentwickler kann eine Farbe auswählen, den HEX-Code für CSS kopieren und gleichzeitig die CMYK-Werte sehen, um sie einem Druckdesigner zu teilen. Ein Grafikkünstler kann mit einem CMYK-Wert aus einem Druckbrief beginnen und sofort den RGB-Äquivalenten für digitale Mockups erhalten.

Reale Anwendungsfälle

Webentwickler, die CSS schreiben Bei der Erstellung einer Website benötigen Entwickler konsistente Farbwerte über Dutzende von CSS-Regeln. Wählen Sie eine primäre Markenfarbe, kopieren Sie ihren HEX-Code für Buttons und Überschriften, und holen Sie sich eine hellere Tönung für Hover-Zustände und eine dunklere Schattierung für aktive Zustände. Alle Werte sind mathematisch konsistent, weil sie sich aus derselben Grundfarbe ableiten.

UI/UX-Designer, die Komponentenbibliotheken erstellen Designsysteme erfordern sorgfältig strukturierte Farbpaletten. Ein Designer könnte eine primäre Blaue definieren und dann fünf Töne und fünf Schattierungen generieren, um eine vollständige Skala für Hintergründe, Rahmen, Text und interaktive Zustände zu erstellen. Das HSL-Format macht dies besonders einfach, weil das Anpassen des Helligkeitswerts vorhersehbare Schritte erzeugt.

Grafikdesigner, die Druckmaterialien vorbereiten Ein Designer, der eine Visitenkarte oder Broschüre erstellt, benötigt CMYK-Werte, die sich so weit wie möglich mit dem Bildschirmvorschau übereinstimmen. Indem der Designer die Marken-HEX-Farbe in CMYK konvertiert, kann er dem Drucker exakte Tintenprozentsätze geben und Überraschungen vermeiden, wenn das physische Muster ankommt.

Digitale Künstler und Illustratoren Farbharmonie ist in der digitalen Kunst entscheidend. Ein Künstler könnte eine Grundfarbe auswählen und dann die Töne und Schattierungen verwenden, um Tiefe, Schatten und Hervorhebungen ohne manuelle Berechnung von helleren oder dunkleren Versionen zu erstellen. Durch Klicken auf Variationen wird der kreative Prozess beschleunigt, während die Palette kohärent bleibt.

Marketingteams, die Markenkonstanz aufrechterhalten Markenrichtlinien spezifizieren oft Farben in einem Format, aber verschiedene Plattformen benötigen unterschiedliche Codes. Eine Markenblau, die im HEX-Format für die Website definiert ist, benötigt einen RGB-Äquivalenten für eine PowerPoint-Vorlage und eine CMYK-Version für einen gedruckten Flyer. Der Konverter stellt sicher, dass jeder Teammitglied die exakt gleiche Farbe verwendet, unabhängig vom Medium.

Barrierefreiheitsexperten, die Kontrast prüfen Bei der Beurteilung, ob Text gegen einen Hintergrund lesbar ist, benötigen Experten präzise Farbwerte. Der Konverter liefert exakte HEX- und RGB-Codes, die in Kontrastverhältnisrechner eingegeben werden können, um die WCAG-Konformität zu überprüfen.

Tipps und Best Practices

Beginnen Sie mit HSL für die Palette-Erstellung. Wenn Sie eine Farbskala von Grund auf neu erstellen, verwenden Sie HSL. Halten Sie den Farbton konstant und justieren Sie Sättigung und Helligkeit, um harmonische Variationen zu erzeugen. Dies erzeugt visuell konsistentere Paletten als das direkte Anpassen von RGB-Werten.
Konvertieren Sie immer in CMYK vor dem Drucken. RGB- und HEX-Farben sind für Lichtemittierende Bildschirme konzipiert. Farben, die auf dem Bildschirm hell und gesättigt wirken — insbesondere Blautöne und Grün — verschieben sich oft beim Drucken. Das frühzeitige Konvertieren in CMYK hilft Ihnen, zu sehen, wie die Farbe in Tinte aussehen wird.
Verwenden Sie Töne für Hintergründe und Schattierungen für Text. Hellere Töne sind hervorragende subtile Hintergründe, die nicht mit dem Inhalt konkurrieren. Dunklere Schattierungen eignen sich gut für Textkörper und Rahmen, weil sie genügend Kontrast gegen weiß oder hellen Hintergründen bieten.
Kopieren Sie das Format, das Ihre Plattform erwartet. CSS akzeptiert HEX, RGB und HSL direkt. JavaScript-Canvas verwendet RGB. Druckereien benötigen CMYK. Designsoftware wie Figma und Sketch akzeptiert HEX. Kopieren Sie das richtige Format, um Konvertierungsfehler zu vermeiden.
Testen Sie Farben auf echten Geräten. Bildschirmkalibrierung variiert zwischen Monitoren, Handys und Tablets. Eine Farbe, die auf Ihrem Laptop perfekt aussieht, kann auf einem mobilen Gerät anders aussehen. Vorschauen Sie Designs immer auf mehreren Bildschirmen, bevor Sie sie finalisieren.
Berücksichtigen Sie Farbsehbehinderungen bei der Auswahl von Paletten. Etwa 8 Prozent der Männer und 0,5 Prozent der Frauen haben eine Form von Farbsehbehinderung. Verwenden Sie den Konverter, um sicherzustellen, dass Ihre Farbauswahl genügend Helligkeitsunterschiede aufweist, nicht nur Farbtonunterschiede, um unterscheidbar zu bleiben.
Speichern Sie Ihre Grundfarben. Sobald Sie die perfekte Farbe gefunden haben, speichern Sie den HEX-Code in Ihrem Designsystem oder Stilguide. Ein einziger Quellcode verhindert, dass sich die Farben während des Wachstums eines Projekts und bei der Beitragsnahme mehrerer Teammitglieder verändern.

Häufig gestellte Fragen

Ist der Farbauswahl- und -Konverter kostenlos?

Ja. Der Farbauswahl- und -Konverter ist vollständig kostenlos, ohne Nutzungsbeschränkungen, Registrierung oder Werbung. Sie können so oft wie nötig Farben auswählen, konvertieren und kopieren.

Können Sie jeden Farbformat in jedes andere konvertieren?

Ja. Das Tool unterstützt vollständige bidirektionale Konvertierung zwischen HEX, RGB, HSL und CMYK. Geben Sie einen Wert in jedem Format ein, und die anderen drei werden automatisch in Echtzeit aktualisiert.

Was sind Töne und Schattierungen?

Töne entstehen, indem man Weiß zu einer Grundfarbe hinzufügt, um sie heller zu machen. Schattierungen entstehen, indem man Schwarz hinzufügt, um sie dunkler zu machen. Das Tool generiert eine Reihe von Tönen und Schattierungen aus Ihrer ausgewählten Farbe, wodurch Sie eine vollständige monochromatische Palette für Designarbeiten erhalten.

Warum sehen RGB-Farben anders aus, wenn sie gedruckt werden?

RGB ist ein additiver Farbmodell, das für Bildschirme konzipiert ist, die Licht emittieren. CMYK ist ein subtraktives Modell, das für Drucker konzipiert ist, die Licht absorbieren. Einige RGB-Farben — insbesondere helle Blautöne, Grün- und Purpurtöne — liegen außerhalb des Bereichs, den CMYK-Tinten reproduzieren können. Das Konvertieren in CMYK zeigt Ihnen den nächsten druckbaren Match.

Funktioniert dieses Tool auf mobilen Geräten?

Ja. Der Farbauswahl- und -Konverter ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Der native Farbauswahler öffnet sich auf mobilen Geräten genauso wie auf Desktops, und die Kopierbuttons sind für Touchscreens optimiert.

Welches Farbformat sollte ich für Webentwicklung verwenden?

HEX ist die häufigste Wahl, weil es kompakt und universell in CSS unterstützt wird. RGB ist nützlich, wenn Sie die Opazität mit RGBA anpassen müssen. HSL wird zunehmend beliebter, weil es intuitiver für das Erstellen von Variationen und Animationen ist. Alle drei funktionieren in modernen Browsern.

Was ist der Unterschied zwischen HSL und HSV?

Sowohl HSL als auch HSV (auch HSB genannt) beschreiben Farben mithilfe von Farbton und Sättigung, definieren aber den dritten Komponenten unterschiedlich. HSL verwendet Helligkeit, wobei 0 Prozent Schwarz, 50 Prozent die reine Farbe und 100 Prozent Weiß ist. HSV verwendet Wert, wobei 0 Prozent Schwarz und 100 Prozent die hellste Version der Farbe ist. HSL wird in der Webentwicklung allgemein bevorzugt, weil die Helligkeitsskala intuitiver für das Erstellen von zugänglichen Paletten ist.

Farbauswahl