Pick colors, convert between HEX/RGB/HSL, and check WCAG contrast ratios.
All color conversion and contrast calculations run locally in your browser — no data is uploaded. The WCAG contrast ratios follow the official W3C standard (≥4.5:1 for normal text, ≥3:1 for large text).
HEX, RGB and HSL describe the same pixel in different languages. HEX is a compact 24-bit integer; RGB is three light intensities (each 0–255); HSL is perceptual — hue (the color), saturation (intensity), lightness (dark↔light). Contrast, meanwhile, is a ratio of relative luminance, not a "brightness difference" you eyeball.
#E76F51 == rgb(231, 111, 81). Raise lightness or drop saturation and you get a different tint/paste — even though hue, the 'color name', barely moves. That is why HSL is friendlier for design tweaks.
You want a button background that keeps its 'coral' identity but passes AA on white.
To pick a color: use the color wheel or enter a HEX/RGB/HSL value — the tool shows conversions between all formats and checks WCAG accessibility contrast ratios.
FreeToolHub Color Picker is a free browser-based tool that picks colors and converts between HEX, RGB, and HSL with WCAG contrast checking, no signup.
Wählen Sie Farben mit HEX-, RGB- und HSL-Umwandlung sowie WCAG-AA/AAA-Kontrastprüfung. 100 % im Browser, kostenlos, ohne Registrierung.
Dieses Tool vereint die beiden Aufgaben, die jede Farbwahl für Benutzeroberflächen beinhaltet: die Farbauswahl und den Nachweis der Lesbarkeit. Wählen Sie eine Farbe über den visuellen Picker oder durch Eingabe von HEX, und das Tool konvertiert sofort in RGB und HSL, mit Schiebereglern zur Feinabstimmung von Farbton, Sättigung und Helligkeit. Kombinieren Sie sie mit einer zweiten Farbe — Text auf Hintergrund — und die WCAG-Engine berechnet das Kontrastverhältnis, bewertet es anhand der AA- und AAA-Schwellenwerte für normalen und großen Text. So wird die Barrierefreiheit von einer nachträglichen Prüfung zu einer Entscheidung, die Sie treffen, während die Farbpalette noch flexibel ist.
UI-Designer, die barrierefreie Paletten erstellen, prüfen den Kontrast von Schaltflächentext und Beschriftungen vor der Übergabe, nicht nach der rechtlichen Prüfung. Frontend-Entwickler, die Marken-HEX-Werte in HSL für Opazitätsvarianten und Themensysteme umwandeln, erledigen die Berechnungen an einem Ort. Content-Teams überprüfen die Lesbarkeit von Overlay-Texten auf Hero-Bildern. Kleinunternehmer, die ihre eigene Webseite auf WCAG 2.1 AA prüfen — zunehmend eine Beschaffungs- und Rechtsanforderung gemäß ADA in den USA und EN 301 549 in Europa — erhalten Ja/Nein-Antworten, ohne ein Prüftool kaufen zu müssen.
(1) Wählen Sie Ihre Vorder- und Hintergrundfarben über den Picker, die HEX-Eingabe oder die RGB/HSL-Schieberegler. (2) Das Kontrastverhältnis wird live als einzelne Zahl von 1:1 (identisch) bis 21:1 (schwarz auf weiß) berechnet. (3) Das Verdict-Panel bewertet beide Farben gegen vier Schwellenwerte — AA normaler Text 4,5:1, AA großer Text 3:1, AAA normal 7:1, AAA groß 4,5:1 — mit Grün oder Rot pro Zeile. (4) Kopieren Sie Formate für CSS: hex-, rgb()-, hsl()-Zeichenketten, die zum Einfügen bereitstehen. Das Wechseln eines Slots auf Schwarz oder Weiß schlägt automatisch die bessere Textoption vor.
WCAG 2.1 definiert zwei Konformitätsstufen mit numerischen Schwellenwerten. Stufe AA, der Standard für rechtliche und Beschaffungsanforderungen, erfordert 4,5:1 für normalen Text und 3:1 für großen Text — 18,66px fett oder 24px regulär und darüber hinaus — sowie 3:1 für bedeutende UI-Komponenten wie Eingabegrenzen und Symbol-Schaltflächen. Stufe AAA erhöht den normalen Text auf 7:1 und senkt den großen Text auf 4,5:1. Häufige Fehler sind vorhersehbar: grauer Platzhaltertext um 3:1, markenfarbene Schaltflächen mit weißen Beschriftungen und Text mit geringer Opazität über Bildern. Praktische Lösungen, die das Design intakt halten: Verdunkeln Sie den Text anstelle des Hintergrunds, reservieren Sie hellere Graustufen für deaktivierte Zustände und testen Sie Overlays gegen die hellsten und dunkelsten Bildbereiche. Die Mathematik basiert auf der Leuchtdichte, sodass dasselbe Paar bei der geringsten Änderung der Helligkeit einer der Farben andere Verdicte erhalten kann — weshalb die Live-Prüfung während des Designs der nachträglichen Stapelkorrektur überlegen ist.
Schwellenwerte für Webzugänglichkeit vom W3C. AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Fließtext (3:1 für großen Text ≥18pt); AAA, die strengere Stufe, verlangt 7:1. Dieser Prüfer bewertet Ihr Vordergrund/Hintergrund-Paar live und teilt Ihnen mit, welche Stufen bestehen, damit Schaltflächen und Text für Nutzer mit Sehbehinderungen lesbar bleiben — und rechtlich sicher unter Zugänglichkeitsregeln wie dem Europäischen Zugänglichkeitsgesetz.
Sie müssen das nicht tun — wählen Sie eine Farbe einmal aus, und das Tool zeigt alle Formate gleichzeitig an: HEX für Design-Dateien, RGB für rgba()-Transparenzarbeiten und HSL für die Erstellung von Paletten (seine Farbton/Sättigung/Helligkeitsachsen entsprechen der Art, wie Menschen Farben tatsächlich anpassen). Die Werte sind mathematisch äquivalente Darstellungen derselben sRGB-Farbe.
Die letzten beiden Ziffern sind Alpha (Opazität): #3B82F6 ist vollständig deckend, #3B82F680 ist dasselbe Blau bei 50 % Transparenz. 8-stelliges HEX funktioniert in allen modernen Browsern und CSS und ist oft klarer als rgba(), weil die Basisfarbe im Code visuell erkennbar bleibt.
HEX für gemeinsame Design-Tokens (kompakt, universell verständlich), rgba() wenn Sie Transparenz aus einer Basisfarbe berechnen müssen, und HSL wenn Paletten programmatisch abgeleitet werden (Farbton drehen, Helligkeit anpassen). Konsistenz innerhalb eines Projekts ist wichtiger als das Format selbst — das Mischen von drei Formaten für dieselbe Variable — so schleichen sich Kontrastfehler ein.
Ja. Wählen Sie zwei beliebige Farben, und es berechnet sofort das WCAG-2.1-Kontrastverhältnis (Bereich 1:1 bis 21:1). Die AA-Konformität erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18px+ fett oder 24px+). AAA erfordert 7:1. Das Tool kennzeichnet Bestehen/Nichtbestehen für jede Stufe mit spezifischen Verbesserungsvorschlägen.
Es konvertiert zwischen HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91 %, 60 %) und zeigt die nächste Tailwind-CSS-Utility-Klasse an. Kopieren Sie jedes Format mit einem Klick. Der visuelle Picker unterstützt Farbton, Sättigung, Helligkeit und Alpha-Kanäle für eine präzise Farbauswahl ohne Design-Software.
Yes. Pick any two colors and it instantly calculates the WCAG 2.1 contrast ratio (range 1:1 to 21:1). AA compliance requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1. The tool flags pass/fail for each level with specific remediation suggestions.
It converts between HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91%, 60%), and displays the closest Tailwind CSS utility class. Copy any format with one click. The visual picker supports hue, saturation, lightness, and alpha channels for precise color selection without needing design software.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.