Konvertieren Sie HEX, RGB, HSL, HSV, CMYK — Live-Vorschau, Schattierungen, Tönungen und Barrierefreiheit-Kontrast
Farbcodes sind die universelle Sprache des digitalen Designs. Egal, ob Sie eine Website erstellen, digitale Kunst schaffen, eine mobile App gestalten oder Markenfarben auswählen, das Verständnis von Farbcodes ist unerlässlich. Jede Farbe auf dem Bildschirm wird mathematisch als Kombination von Werten definiert, die dem Display sagen, wie viel rotes, grünes und blaues Licht emittiert werden soll — und jedes professionelle Designwerkzeug spricht diese Sprache in mehreren Dialekten: HEX, RGB, HSL, HSV, CMYK und mehr.
Verständnis von Farbcodes und Farbmodellen
Was sind Farbcodes?
Ein Farbcode ist eine standardisierte Möglichkeit, eine bestimmte Farbe als numerischen Wert oder eine Menge von Werten darzustellen. Digitale Displays mischen rotes, grünes und blaues Licht in unterschiedlichen Intensitäten, um jede sichtbare Farbe zu erzeugen — dies wird als additive Farbmischung bezeichnet. HEX-Codes repräsentieren diese RGB-Werte in der Basis-16 (hexadezimalen) Notation: #FF0000 bedeutet maximales Rot (FF), kein Grün (00), kein Blau (00). RGB-Notation drückt dieselben Werte als Dezimalzahlen von 0 bis 255 aus. HSL und HSV trennen den Farbton (den Farbtyp) von der Sättigung (Farbreichtum) und Helligkeit oder Wert (Helligkeit), was für Menschen intuitiver ist. CMYK, das im Druck verwendet wird, arbeitet mit subtraktiver Farbmischung unter Verwendung von Cyan-, Magenta-, Gelb- und Schwarz-Tinten. Jedes Format ist mathematisch äquivalent — sie beschreiben alle dasselbe Farbspektrum, nur in unterschiedlichen Notationen, die für verschiedene Anwendungsfälle optimiert sind.
Wie werden Farbkonvertierungen berechnet?
Die Konvertierung zwischen Farbformaten erfordert präzise mathematische Formeln. HEX zu RGB ist unkompliziert: jedes Paar von Hex-Ziffern (00-FF) wird mit Hilfe der Basis-16-Arithmetik in eine Dezimalzahl (0-255) umgewandelt. RGB zu HSL erfordert die Normalisierung der RGB-Werte auf 0-1, das Finden der maximalen und minimalen Kanalwerte, das Berechnen des Deltas und das Ableiten des Farbtons aus dem dominierenden Kanal, der Sättigung aus dem Delta im Verhältnis zur Helligkeit und der Helligkeit als Durchschnitt von Max und Min. RGB zu CMYK identifiziert zuerst die Schlüsselkomponente (Schwarz) als 1 minus das maximale RGB-Verhältnis und leitet dann C, M, Y aus der verbleibenden benötigten Tinte ab. CMYK zu RGB kehrt dies um: jeder Kanal wird als 255 mal (1 minus der Tintenfraktion) mal (1 minus der Schwarzfraktion) berechnet. Alle Konvertierungen bewahren die mathematische Präzision über das gesamte Spektrum der darstellbaren Farben.
Warum sind Farbcodes für das Design wichtig?
Die konsistente Verwendung von Farbcodes ist grundlegend für professionelle Designarbeit. Ohne präzise Farbcodes können Farben zwischen Designwerkzeugen, Browsern und Druckumgebungen verschieben, was die Markenidentität beeinträchtigt. Webdesigner verwenden HEX- und RGB-Codes, um eine pixelgenaue Farbabstimmung über Browser und Geräte hinweg sicherzustellen. Druckdesigner verlassen sich auf CMYK-Werte, um genaue Tintenverhältnisse an Druckereien zu kommunizieren, da Bildschirme und Drucker völlig unterschiedliche Farbmischmethoden verwenden. Barrierefreiheitsrichtlinien (WCAG) erfordern Mindestkontrastverhältnisse zwischen Text- und Hintergrundfarben, um die Lesbarkeit für Menschen mit Sehbehinderungen oder Farbenblindheit zu gewährleisten — die Überprüfung von Kontrastverhältnissen ist eine gesetzliche Anforderung für viele Organisationen. Designsysteme verwenden präzise definierte Farb-Tokens (in der Regel HEX- oder HSL-Werte), um Konsistenz über Produkte hinweg aufrechtzuerhalten, und HSL wird oft bevorzugt, da es programmatische Anpassungen ermöglicht, wie das Aufhellen einer Farbe um 10%, ohne ihren Farbton zu ändern.
Einschränkungen und Überlegungen zu Farbmodellen
Während HEX, RGB, HSL und CMYK die überwiegende Mehrheit der praktischen Designbedürfnisse abdecken, gibt es wichtige Einschränkungen zu verstehen. Das RGB-Farbmodell ist geräteabhängig — dieselben RGB-Werte können auf unterschiedlichen Bildschirmen unterschiedlich aussehen, aufgrund von Variationen in der Monitor-Kalibrierung, Farbprofilen (sRGB vs Display P3) und Umgebungslicht. CMYK-Werte, die in diesem Tool angezeigt werden, sind Annäherungen für die Standard sRGB-zu-CMYK-Konvertierung; professionelle Druckarbeiten erfordern oft das Management von Farbprofilen mit Tools wie Adobe Illustrator oder InDesign für eine genaue Pantone-Abstimmung. Die 140 CSS benannten Farben sind durch die CSS-Farbspezifikation definiert und sind exakt — jedoch verwendet die Funktion 'nächste benannte Farbe' die euklidische Distanz im RGB-Raum, was eine wahrnehmungsbasierte Annäherung ist. Moderne Farbmodelle wie OKLCH und OKLAB (hier nicht enthalten) bieten gleichmäßigere Farbverläufe, erfordern jedoch Browserunterstützung für CSS Color Level 4.
So verwenden Sie die Farbcode-Tabelle
Geben Sie Ihre Farbe ein
Geben Sie einen HEX-Code direkt (z.B. #FF5733) in das HEX-Feld ein, geben Sie dezimale RGB-Werte (jeweils 0–255) ein, geben Sie HSL- oder CMYK-Werte ein oder klicken Sie auf die Farbprobe, um den visuellen Farbwähler zu öffnen. Sie können auch auf 'Zufällige Farbe' klicken, um sofortige Inspiration zu erhalten. Alle Eingabemethoden aktualisieren das Ergebnis live, während Sie tippen.
Alle konvertierten Formate anzeigen
Das Ergebnisfeld zeigt Ihre Farbe gleichzeitig in HEX, RGB, HSL, HSV, CMYK und Ganzzahlformat an. Jedes Format hat eine Kopiertaste, damit Sie genau das erhalten, was Sie benötigen. Verwenden Sie die Schaltfläche 'Alles kopieren', um jedes Format auf einmal zu kopieren, oder exportieren Sie es als CSV zur Dokumentation.
Schattierungen, Farbtöne generieren und Zugänglichkeit überprüfen
Scrollen Sie nach unten zu den Ergebnissen, um einen Streifen von 9 Schattierungen (dunklere Varianten) und 9 Farbtönen (hellere Varianten) zu sehen — klicken Sie auf eine Farbprobe, um diese Variante in den Konverter zu laden. Der WCAG-Kontrastbereich zeigt Kontrastverhältnisse gegenüber Weiß und Schwarz an, mit AA/AAA Bestehensindikatoren, um zu überprüfen, ob Ihre Farbe den Zugänglichkeitsstandards entspricht.
Durchsuchen Sie das Nachschlagewerk für benannte Farben
Wechseln Sie zur Registerkarte 'Benannte Farben Tabelle', um alle 140 CSS-namensgebenden Farben, organisiert nach Familie (Rot, Grün, Blau, Violett usw.), zu erkunden. Jede Zeile zeigt die Farbprobe, den CSS-Namen, den HEX-Code und die RGB-Werte. Klicken Sie auf 'Farbe verwenden' in einer Zeile, um sie sofort in den Konverter zu laden.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX- und RGB-Farbcodes?
HEX und RGB beschreiben genau die gleiche Farbe mit unterschiedlichen Notationssystemen. RGB trennt die roten, grünen und blauen Kanäle in drei dezimale Ganzzahlen von 0 bis 255. Zum Beispiel ist rgb(59, 130, 246) ein mittleres Blau. HEX stellt diese drei Werte in hexadezimaler (Basis-16) Form dar: 59 wird zu 3B, 130 wird zu 82 und 246 wird zu F6, was #3B82F6 ergibt. HEX ist kompakter und das Standardformat für HTML und CSS. RGB ist mathematisch leichter lesbar und wird sowohl in CSS als auch in Grafikdesign-Software verwendet. Beide sind gleichwertig — jede Farbe, die in einem Format ausgedrückt werden kann, kann auch im anderen ausgedrückt werden.
Warum ist HSL besser für Designanpassungen als HEX oder RGB?
HSL (Farbton, Sättigung, Helligkeit) trennt die reine Farbidentität (Farbton, 0–360 Grad) von der Intensität (Sättigung) und der Helligkeit oder Dunkelheit (Helligkeit). Dies macht es viel intuitiver für Designarbeiten. Zum Beispiel, um eine Farbe um 20% heller zu machen, erhöhen Sie einfach den L-Wert um 20 — in HEX oder RGB würde dieselbe Operation erfordern, dass alle drei Kanäle separat berechnet werden. HSL ist auch, wie Menschen Farben natürlich beschreiben: 'ein helles, mittelhelles Blau' entspricht direkt hoher Sättigung und mittlerer Helligkeit bei einem blauen Farbton. CSS unterstützt nativ die hsl()-Notation, und Designwerkzeuge wie Figma verwenden intern HSL-ähnliche Modelle. Viele Designsysteme definieren Farb-Tokens aus diesem Grund in HSL.
Was ist CMYK und wann sollte ich es verwenden?
CMYK steht für Cyan, Magenta, Gelb und Key (Schwarz) — die vier Druckfarben, die im Farb-Druck verwendet werden. Im Gegensatz zu RGB, das Licht addiert (additive Mischung), subtrahiert CMYK Licht, indem es Tinten schichtet, die bestimmte Wellenlängen absorbieren (subtraktive Mischung). Deshalb kann eine Farbe, die auf dem Bildschirm lebhaft aussieht, beim Drucken blasser erscheinen — der RGB-Farbraum (Bereich der darstellbaren Farben) ist breiter als das, was der CMYK-Druck reproduzieren kann. Verwenden Sie CMYK-Werte, wenn Sie Dateien für den professionellen Druck vorbereiten, einschließlich Visitenkarten, Broschüren, Plakate und Verpackungen. Die meisten professionellen Druckereien und Designsoftware (Adobe Illustrator, InDesign) arbeiten in CMYK für Druckprojekte. Für Web- und Bildschirmdesign sollten Sie bei HEX oder RGB bleiben.
Was ist das WCAG-Kontrastverhältnis und warum ist es wichtig?
Das WCAG (Web Content Accessibility Guidelines) Kontrastverhältnis misst, wie unterschiedlich eine Vordergrund- und Hintergrundfarbe für jemanden mit Sehbehinderung oder Farbenblindheit erscheint. Es wird unter Verwendung der relativen Helligkeit berechnet — ein Maß für die wahrgenommene Helligkeit. Ein Verhältnis von 1:1 bedeutet keinen Kontrast (gleiche Farbe), während 21:1 maximalen Kontrast (schwarz auf weiß) bedeutet. Der WCAG AA-Standard erfordert 4.5:1 für normalen Text und 3:1 für großen Text. WCAG AAA erfordert 7:1. Die Einhaltung dieser Standards stellt sicher, dass Ihre Website für Benutzer mit Sehbehinderungen lesbar ist und ist oft für die rechtliche Einhaltung des ADA (Americans with Disabilities Act) und der WCAG 2.1/2.2 Standards erforderlich. Dieses Tool berechnet automatisch Kontrastverhältnisse gegenüber sowohl Weiß als auch Schwarz für jede Farbe, die Sie eingeben.
Wie werden Schattierungen und Farbtöne generiert?
Eine Schattierung wird erzeugt, indem eine Farbe mit Schwarz gemischt wird — mathematisch, indem jeder RGB-Kanal mit einem Faktor kleiner als 1 multipliziert wird. Zum Beispiel wäre eine 50%-Schattierung von Rot (255, 0, 0) (128, 0, 0). Ein Farbton wird erzeugt, indem man mit Weiß mischt — indem man den ursprünglichen Kanalwert in Richtung 255 mischt. Ein 50%-Farbton von Rot wäre (255, 128, 128). Dieses Tool generiert 9 gleichmäßig verteilte Schattierungen (von fast Schwarz bis zur Originalfarbe) und 9 gleichmäßig verteilte Farbtöne (von der Originalfarbe bis fast Weiß), was Ihnen insgesamt 19 Varianten gibt. Diese Streifen sind sehr nützlich für den Aufbau von Designsystempaletten — zum Beispiel verwendet Tailwind CSS eine ähnliche 10-Schattierungs-Skala von 50 (hellste) bis 950 (dunkelste) für jede seiner 22 Farbfamilien.
Was sind die 140 CSS-namensgebenden Farben?
Die 140 CSS-namensgebenden Farben sind eine Reihe von Farbkeywords, die in der CSS-Farbspezifikation (CSS Colors Level 4) definiert sind. Sie umfassen klassische Webfarben wie 'rot', 'blau' und 'grün', sowie beschreibende Namen wie 'kornblumenblau', 'lavendelrosa' und 'papayawhip'. Jeder Name entspricht einem bestimmten HEX/RGB-Wert, der in allen Browsern und Betriebssystemen konsistent ist. Sie stammen aus dem X11-Farbsystem, das in Unix-Umgebungen verwendet wird, und wurden später für CSS standardisiert. Während sie für gängige Farben praktisch sind, decken benannte Farben nur einen winzigen Bruchteil der 16,7 Millionen Farben ab, die in 24-Bit RGB darstellbar sind. Für präzise Designarbeiten sollten Sie immer HEX- oder RGB-Werte verwenden, anstatt sich auf benannte Farben zu verlassen, da die Namen irreführend sein können (zum Beispiel sind 'grau' und 'grey' leicht unterschiedlich).