Kostenlose Farb-Tools
Farben konvertieren, Paletten erzeugen, Barrierefreiheits-Kontrast prüfen, Farbenblindheit simulieren und mehr.
Alle Farb-Tools
Farbkonverter
Konvertieren Sie zwischen HEX-, RGB- und HSL-Farbformaten.
Kostenloser Online-Farbpaletten-Generator
Klicken Sie auf "CSS kopieren", um einsatzbereite CSS-Eigenschaften zu erhalten.
Farbkontrast-Prüfer
Testen Sie WCAG 2.1 Kontrastverhältnisse für Barrierefreiheit.
Farbtongenerator
Wählen Sie eine Farbe und generieren Sie eine vollständige Palette mit helleren Tönen und dunkleren Schattierungen.
Farbmischer
Mischen Sie zwei oder mehr Farben mit einstellbaren Gewichtungen. Sehen Sie die resultierende Farbe in HEX, RGB und HSL.
Farbenblindheitssimulator
Sehen Sie, wie Bilder und Farben für Menschen mit Farbsehmängeln aussehen.
Bildfarbwähler
Laden Sie ein Bild hoch und klicken Sie überall, um Farben zu extrahieren.
HEX-zu-RGB-Konverter
Konvertieren Sie HEX-Farbcodes in RGB-Werte und umgekehrt.
CSS-Farbnamen-Finder
Geben Sie einen Hex-Code ein oder wählen Sie eine Farbe, um die nächstgelegene benannte CSS-Farbe zu finden. Vergleichen Sie nebeneinander.
Kostenloses Farbrad
Erkunden Sie Farbharmonien mit einem interaktiven Farbrad. Finden Sie komplementäre, analoge.
Kostenloser Farbverlauf-Hintergrundbild-Generator
Erstellen und laden Sie individuelle Farbverlauf-Hintergrundbilder für Desktop oder Mobilgerät herunter.
Kostenloser Farbpaletten-Extraktor
Extrahieren Sie die dominanten Farben aus jedem Bild, um eine Farbpalette zu erstellen.
Generator für barrierefreie Farbpaletten
Erstellen Sie eine Farbpalette und sehen Sie sofort, welche Kombinationen die WCAG 2.2 AA (4,5:1) und AAA (7:1) Kontrastverhältnisse erfüllen.
Über unsere Farb-Tools
Absolutool bietet 7 spezialisierte Farb-Tools für Designer, Entwickler und Barrierefreiheits-Fachleute. Konvertieren Sie zwischen den Formaten HEX, RGB, HSL und HSB. Erzeugen Sie harmonische Paletten mit Hilfe der Farbtheorie. Prüfen Sie WCAG-Kontrastverhältnisse, um sicherzustellen, dass Ihre Designs für alle zugänglich sind.
Der Farbenblindheits-Simulator nutzt Brettel-/Viénot-Forschungsmatrizen, um 8 Arten von Farbsehschwäche genau zu modellieren · laden Sie ein Bild hoch oder testen Sie einzelne Farben. Verwenden Sie den Farbschattierungs-Generator für Design-System-Tokens, den Farbmischer für präzises Mischen und die Bildfarbpipette, um Farben aus jedem Foto zu extrahieren. Alle Tools laufen vollständig in Ihrem Browser.
Farbmodelle im Web
Jedes Pixel auf einer modernen Webseite wird durch einen Farbwert beschrieben, den der Browser interpretiert und den die GPU darstellen soll. Die zwei Formate, die Sie am häufigsten sehen, sind HEX (ein sechsstelliges Hexadezimal-Tripel wie #3b82f6) und RGB (Dezimalwerte wie rgb(59 130 246)). Beide beschreiben dasselbe: wie viel rotes, grünes und blaues Licht auf einem Bildschirm gemischt werden soll, der additive Farbe verwendet. Ein gängiger 24-Bit-Bildschirm bietet 256 Stufen pro Kanal, was bedeutet, dass 16,78 Millionen eindeutige Farben adressierbar sind. HEX ist kürzer, RGB lässt sich leichter berechnen, und beide sind austauschbar.
HSL (Farbton, Sättigung, Helligkeit) und HSB (Farbton, Sättigung, Helligkeitswert) beschreiben dieselbe Bildschirmfarbe, aber in Koordinaten, die näher daran liegen, wie wir Menschen sie wahrnehmen. Der Farbton ist die Position der Farbe auf dem Farbkreis von 0° (Rot) bis 360°. Die Sättigung gibt an, wie lebhaft die Farbe ist, von Grau bis vollständig rein. Die Helligkeit steuert, wie viel Weiß oder Schwarz beigemischt wird. HSL ist das Format, das Designer üblicherweise beim Aufbau von Designsystemen wählen, weil das Anpassen eines einzelnen Kanals eine vorhersehbare Verschiebung erzeugt, etwa einen Button für den Hover-Zustand um 10 % dunkler zu machen. CSS unterstützt HEX, RGB, HSL und die neueren Formate LCH und OKLCH nativ.
Hinter all diesen Formaten steht ein Farbraum, der genau definiert, was „Rot 255" physikalisch bedeutet. Der Standard des Webs ist sRGB, 1996 von der IEC normiert und der Farbumfang, den nahezu jedes Desktop- und Telefondisplay abdeckt. Neuere Apple-, OLED- und Hochwertgeräte unterstützen Display P3, einen breiteren Farbumfang, der etwa 25 % mehr gesättigte Rot- und Grüntöne hinzufügt. CSS erlaubt Ihnen nun, color(display-p3 1 0 0) zu schreiben, um das zu nutzen. Die meisten Farbwerkzeuge auf dieser Website arbeiten in sRGB und erreichen jeden Browser; P3 erweitert das Verfügbare, ohne den Arbeitsablauf zu ändern.
Den WCAG-Farbkontrast verstehen
Die Web Content Accessibility Guidelines (WCAG 2.1) legen numerische Schwellen für den Kontrast zwischen Text und seinem Hintergrund fest. Stufe AA, die Stufe, die die meisten Barrierefreiheitsprüfungen anstreben, verlangt ein Verhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18 pt normal oder 14 pt fett und darüber). Stufe AAA verschärft diese auf 7:1 und 4,5:1. Das Verhältnis wird aus der relativen Leuchtdichte jeder Farbe berechnet, einem Wert der wahrgenommenen Helligkeit, der aus den sRGB-Primärfarben über die Formel IEC 61966-2-1 abgeleitet wird. Zwei Farben, die „fast gleich" aussehen, können trotzdem bestehen, und zwei völlig verschiedene Farben können durchfallen, wenn die eine Grau auf Grau ist.
Diese Zahlen sind wichtig, weil etwa 5 % der erwachsenen Weltbevölkerung eine messbar verringerte Kontrastempfindlichkeit durch grauen Star, grünen Star, diabetische Retinopathie oder altersbedingte Makulaveränderungen haben. Helles Sonnenlicht im Freien verringert den effektiven Kontrast für alle. Mobile Bildschirme, die schräg betrachtet werden, verringern den Kontrast weiter. Die Schwellen der WCAG sind darauf ausgelegt, Text unter diesen realen Bedingungen lesbar zu halten, nicht auf einem farbkalibrierten Monitor in einem abgedunkelten Büro. Ein neuerer Algorithmus namens APCA (der für die WCAG 3.0 vorgesehene Nachfolgekandidat) berücksichtigt Dinge, die die WCAG 2.x ignoriert, etwa Schriftstärke und Polarität. Vorerst bleibt 4,5:1 AA der Standard, auf den sich die meisten Regulierungsbehörden beziehen.
Farbenblindheit und inklusives Design
Etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Abstammung haben eine Form der Rot-Grün-Sehschwäche, und die weltweiten Zahlen sind ähnlich groß. Die drei häufigsten Typen beeinflussen, wie die Zapfen in der Netzhaut auf bestimmte Wellenlängen reagieren. Die Deuteranomalie (die häufigste, etwa 5 % der Männer) verringert die Empfindlichkeit für grünes Licht mittlerer Wellenlänge. Die Protanomalie verringert die Empfindlichkeit für rotes Licht langer Wellenlänge. Die Tritanomalie betrifft die Blau-Gelb-Wahrnehmung und ist weit seltener. Die Simulatoren auf dieser Website verwenden die Farbmatrix-Herleitung von Brettel, Viénot und Mollon (1997), der Standardreferenz für diese Transformationen in der Farbwissenschaft.
Die praktische Designregel lautet „verlassen Sie sich nicht allein auf die Farbe". Ein rotes Fehlersymbol und ein grünes Erfolgssymbol sehen für viele Nutzer mit Deuteranomalie identisch aus. Eine andere Form hinzuzufügen (ein Kreuz statt eines Häkchens), eine Beschriftung („Fehler" oder „Erfolg") oder ein Muster behebt das ohne Kosten für die übrigen Nutzer. Diagramm- und Dashboard-Designs sind die häufigsten Übeltäter, weil Legenden sich typischerweise auf ein Farbfeld stützen. Der Farbenblindheits-Simulator auf dieser Website ermöglicht es Ihnen, einen echten Screenshot durch jede gängige Sehschwäche vorab anzusehen, bevor Sie veröffentlichen, sodass Sie die Stellen erkennen, die in der Produktion versagt hätten.
Farbtheorie für Paletten
Der Farbkreis ordnet die Farbtöne nach ihrem Winkel rund um den Kreis an: Rot bei 0°, Gelb bei 60°, Grün bei 120°, Cyan bei 180°, Blau bei 240°, Magenta bei 300°. Komplementäre Farben liegen einander direkt gegenüber (Rot und Cyan, Blau und Orange) und erzeugen den stärksten Kontrast. Analoge Paletten verwenden zwei bis vier auf dem Kreis benachbarte Farbtöne und wirken ruhig und einheitlich, gut geeignet für Hintergründe und Verläufe. Triadische Paletten verwenden drei gleichmäßig um 120° versetzte Farbtöne und bieten Ausgewogenheit mit Abwechslung. Tetradische Paletten verwenden vier Farbtöne, die ein Rechteck bilden. Diese Regeln stammen aus Künstlerhandbüchern des 19. Jahrhunderts, decken sich aber mit dem, was die Wahrnehmungsforschung seither bestätigt hat.
Ein typisches Markensystem braucht etwa fünf Farben: eine primäre Markenfarbe, eine Akzentfarbe (oft komplementär), ein neutrales Grau, dazu ein Erfolgs-Grün und ein Fehler-Rot. Der Palettengenerator auf dieser Website wählt zuerst die Harmonie und bietet dann für jede gewählte Farbe zehnstufige Tönungs- und Schattierungsskalen, dieselbe Struktur, die Designsysteme wie Tailwind, Material und Carbon verwenden. Das Werkzeug für barrierefreie Paletten beschränkt die Erzeugung auf Kombinationen, die den WCAG-AA-Kontrast auf einem weißen oder dunklen Hintergrund erfüllen. Beide Werkzeuge laufen vollständig in Ihrem Browser, sodass die Farben, die Sie für eine noch nicht veröffentlichte Marke wählen, niemals irgendwohin gesendet werden.
Häufig gestellte Fragen
Warum sieht dieselbe Farbe auf verschiedenen Bildschirmen anders aus?
Die meisten Monitore zielen auf den sRGB-Farbumfang, aber jedes Panel hat eine leicht andere Weißpunkt-Kalibrierung, Helligkeit und Gamma. Zwei Bildschirme direkt aus dem Karton können #3b82f6 mit einem messbaren Unterschied in Farbton und Helligkeit zeigen. Professionelles Design stützt sich auf farbkalibrierte Monitore (Hardware-Messgeräte von X-Rite oder Calibrite), um das innerhalb der Toleranz zu halten. Für die tägliche Arbeit gibt Ihnen die Wahl eines Werts in HSL die besten Chancen, dass die von Ihnen beabsichtigten Farbbeziehungen (etwa ein Hover, der 10 % dunkler ist) von Bildschirm zu Bildschirm erhalten bleiben.
Ist ein Kontrast von 4,5:1 immer ausreichend für die Barrierefreiheit?
Es ist die AA-Latte, das gesetzliche Minimum, auf das sich die meisten Regulierungsbehörden beziehen (Section 508 in den USA, die EAA in Europa, die AODA in Ontario). Für Text, bei dem die Lesbarkeit entscheidend ist, für Nutzer mit Sehschwäche, bei Sonnenlicht lesbare Oberflächen oder Inhalte für ein älteres Publikum streben Sie das strengere Verhältnis AAA 7:1 an. Für Oberflächenelemente, die kein Text sind (Symbole, Button-Ränder), gilt die Regel der WCAG 2.1 für den Kontrast von Nicht-Text-Elementen von 3:1.
Was ist der Unterschied zwischen HSL und HSV/HSB?
Beide teilen die Kanäle für Farbton und Sättigung, unterscheiden sich aber in ihrer dritten Achse. Die Helligkeit von HSL ist symmetrisch um 50 %: 0 % ist Schwarz, 50 % ist der reine Farbton und 100 % ist Weiß. Der Helligkeitswert von HSV/HSB ist asymmetrisch: 0 % ist Schwarz und 100 % ist der reine Farbton ohne Weiß. HSL ist angenehmer für Designsysteme, in denen man zu beiden Enden hin mischt. HSV ist in der Bildbearbeitung häufiger, weil es der Intuition des Künstlers entspricht.
Sind Hex-Codes dasselbe wie Pantone- oder RAL-Farben?
Nein. Hex-Codes beschreiben eine Bildschirmfarbe, die aus rotem, grünem und blauem Licht gemischt wird (additiv, projiziert). Pantone, RAL und ähnliche Systeme beschreiben physische Pigmente, die auf Papier gedruckt werden (subtraktiv, reflektiert). Das Hex-Äquivalent von „Pantone 286" ist eine Bildschirmannäherung, keine perfekte Entsprechung, weil sich die Farbumfänge nicht vollständig überschneiden. Für Markenarbeit, die Bildschirm und Druck verbindet, geben Designer üblicherweise beides an: das Pantone für den Druck und ein Hex für das Digitale.
Warum Farbenblindheit an einem Design simulieren?
Etwa 1 von 12 Männern weltweit hat eine Form der Farbsehschwäche, daher erreicht jedes von einem allgemeinen Publikum genutzte Design Nutzer, die bestimmte Farbtöne nicht unterscheiden können. Eine rote gegenüber einer grünen Statusanzeige kann für sie identisch aussehen. Einen Screenshot vor der Veröffentlichung durch einen Simulator laufen zu lassen zeigt, welche Teile des Designs sich allein auf die Farbe stützen, sodass Sie eine Beschriftung, ein Symbol oder ein Muster hinzufügen können, damit die Bedeutung auch ohne Farbe ankommt.
Laden diese Farbwerkzeuge meine Bilder oder Paletten irgendwohin hoch?
Nein. Jedes Werkzeug in dieser Kategorie läuft vollständig in Ihrem Browser. Hochgeladene Bilder werden von JavaScript auf einem lokalen canvas-Element verarbeitet, Palettendaten liegen im localStorage, und nichts wird an einen Server gesendet. Sie können das überprüfen, indem Sie die Entwicklerwerkzeuge des Browsers öffnen und den Tab Netzwerk beobachten, während Sie eines der Werkzeuge verwenden. Die einzigen Anfragen, die Sie sehen, betreffen statische Ressourcen und Google Analytics, niemals die Bytes Ihrer Bilder oder Ihre Farbwerte.