Geben Sie eine Farbe ein
Visueller Farbwähler
Geben Sie einen 6-stelligen HEX-Code mit oder ohne das # Präfix ein
Geben Sie eine Farbe ein, um sie zu konvertieren
Geben Sie einen HEX-Code ein, geben Sie RGB- oder HSL-Werte ein, verwenden Sie den Farbwähler oder klicken Sie auf 'Zufallsfarbe', um zu beginnen. Alle Formate aktualisieren sich live.
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).