#3B82F6
HTML-/CSS-Farbe
rgb(59, 130, 246)
hsl(217, 91%, 60%)
hsv(217, 76%, 96%)
cmyk(76%, 47%, 0%, 4%)
Was es tut
Der Farbwähler & Konverter lässt dich jede Farbe wählen und sofort in fünf Formaten sehen - HEX, RGB, HSL, HSV und CMYK - nebeneinander mit einer Live-Vorschau. Ändere einen Wert in einem dieser Formate, und jedes andere Format aktualisiert sich aus derselben einzigen Quelle der Wahrheit, sodass die Werte nie auseinanderdriften können. Das Tool nennt außerdem die nächstgelegene benannte CSS-Farbe, sagt dir, ob schwarzer oder weißer Text darauf lesbar bleibt (WCAG AA/AAA), und merkt sich deine zuletzt genutzten Farben. Wähle mit dem nativen Farbquadrat, tippe einen Hex-Code, scrubbe die HSL-Slider, randomisiere - oder greife in Chromium-Browsern mit der Pipette eine Farbe direkt vom Bildschirm. Alles läuft 100 % clientseitig: Die Farbe, die du wählst, verlässt deinen Browser nie.
So verwendest du es
- Wähle eine Startfarbe: das native Farbquadrat, das HEX-Feld, die Screen-Pipette (nur Chromium), die HSL-Slider oder Randomize.
- Beobachte, wie sich die Live-Vorschau (mit ihrer nächstgelegenen benannten Farbe) und die fünf Format-Karten gemeinsam aktualisieren.
- Um aus einem anderen Farbraum zu konvertieren, bearbeite die Felder R/G/B, H/S/L, H/S/V oder C/M/Y/K direkt - tippe eine Zahl und verlasse das Feld (oder drücke Enter), um sie zu übernehmen.
- Prüfe die Textlesbarkeit, um zu sehen, ob schwarzer oder weißer Text auf dieser Farbe WCAG AA/AAA besteht - samt der exakten Kontrastverhältnisse.
- Klicke auf ein beliebiges Recent-Swatch, um zu einer Farbe zurückzuspringen, die du gerade benutzt hast.
- Tippe auf einer Karte auf Copy, um den String dieses Formats zu kopieren (
#3B82F6,rgb(59, 130, 246), …), oder auf Copy share link, um die exakte Farbe an jemanden zu schicken.
Beispiele
Blaues Primary → jedes Format
Wähle #3b82f6:
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Name: royal blue
Text: #000000 (5.71:1 - AA pass)HSL nach Hex konvertieren
Gib H 0, S 0%, L 50% ein → ein neutrales Grau:
HEX: #808080
RGB: rgb(128, 128, 128)Eine Farbe teilen
Wähle eine Farbe, dann wird die URL zu …/tools/color-picker?c=3b82f6 - öffne sie überall und landest bei exakt derselben Farbe.
Gut zu wissen
- Eine Quelle der Wahrheit: jede Änderung läuft durch ein einziges normalisiertes RGB, sodass HEX/RGB/HSL/HSV/CMYK immer übereinstimmen. HSL, HSV und CMYK sind verlustbehaftete Darstellungen; ein von dir eingegebener Wert kann daher auf die nächste ganze Zahl gerundet angezeigt werden - das ist erwartetes Verhalten, kein Bug.
- Benannte Farben sind Näherungen: die „nächstgelegene benannte Farbe“ wird gegen eine kuratierte Teilmenge bekannter CSS-Namen gematcht; ungewöhnliche Schattierungen können auf einen nahen Nachbarn einrasten.
- Pipette: der Screen-Knopf nutzt die Browser-EyeDropper-API, verfügbar in Chromium-Browsern (Chrome, Edge, Arc). Wo sie nicht verfügbar ist, wird der Knopf ausgeblendet.
- Teilbar: deine Farbe ist in der URL kodiert (
?c=…), und die zuletzt genutzten Farben werden lokal in deinem Browser gespeichert - nie an einen Server gesendet. - Privat: jede Konvertierung passiert lokal.
- Verwandte Tools: Palette Generator, Color Contrast Checker, CSS Animation Playground.