DecoToolkit Logo

Farbwähler & Farbkonverter

Wähle jede Farbe visuell aus und konvertiere sie sofort zwischen HEX, RGB, HSL, HSV und CMYK. Überprüfe WCAG-Kontrastverhältnisse für Barrierefreiheit und extrahiere Farben direkt aus hochgeladenen Bildern.

Link copied to clipboard

Farbwähler

Deckkraft

#3B82F5

Farbformate

HEX
RGB
HSL
HSV
CMYK
ⓘ

Kontrastprüfer

Kontrastverhältnis

21.00:1

AA Normaler TextBestanden
AA Großer TextBestanden
AAA Normaler TextBestanden
AAA Großer TextBestanden
The quick brown fox jumps over the lazy dog

Aus Bild auswählen

So verwenden Sie dieses Tool

  1. Ziehe den Kreis auf der Farbleinwand, um Farbton, Sättigung und Helligkeit zu wählen, oder bewege den Farbton-Schieberegler darunter.
  2. Bearbeite ein beliebiges Formatfeld — HEX, RGB, HSL, HSV oder CMYK — und alle anderen Felder werden sofort aktualisiert.
  3. Klicke auf das Kopiersymbol neben einem Format, um diesen Wert in die Zwischenablage zu kopieren.
  4. Nutze den Abschnitt Kontrastprüfer, um zwei Farben einzufügen und die WCAG AA- und AAA-Bestehens-/Nichtbestehens-Bewertung für barrierefreien Text zu sehen.
  5. Lade ein Bild im Abschnitt 'Aus Bild auswählen' hoch und klicke dann auf ein Pixel, um dessen Farbe in alle Formatfelder zu übertragen.

Warum unser Farbwähler & Farbkonverter verwenden?

Ob du ein Designsystem aufbaust, die Barrierefreiheits-Compliance prüfst oder Markenfarben im Code abgleichst — du brauchst ein schnelles und genaues Farbwerkzeug. Dieser Konverter läuft vollständig in deinem Browser — keine Bilder oder Farbdaten werden jemals an einen Server gesendet.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX (#3b82f6) ist die kompakte Notation, die in CSS und HTML verwendet wird — drei Paare hexadezimaler Ziffern, die die Rot-, Grün- und Blaukanäle kodieren. RGB (rgb(59, 130, 246)) macht diese Kanäle als Dezimalzahlen von 0 bis 255 explizit. HSL (hsl(217, 91%, 60%)) beschreibt dieselbe Farbe als Farbton (0–360°), Sättigung (%) und Helligkeit (%) — ein intuitiveres Modell, wenn man die Helligkeit anpassen oder Farbharmonien erstellen möchte.

Was ist CMYK und wann sollte ich es verwenden?

CMYK steht für Cyan, Magenta, Gelb und Schwarz (Key). Es ist ein subtraktives Farbmodell, das im physischen Druck verwendet wird. Verwende CMYK-Werte bei der Vorbereitung von Druckvorlagen für eine professionelle Druckerei. Beachte, dass die hier gezeigte RGB-zu-CMYK-Konvertierung eine mathematische Annäherung ist — die professionelle Druckproduktion erfordert ein ICC-Farbprofil, das auf den Zieldrucker und das Papier abgestimmt ist.

Was bedeutet WCAG AA und AAA für den Kontrast?

Die WCAG (Web Content Accessibility Guidelines) definieren Kontrastverhältnis-Schwellenwerte für lesbaren Text. AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist die strengere Stufe und erfordert 7:1 für normalen Text und 4,5:1 für großen Text. AA zu bestehen ist in vielen Ländern die gesetzliche Anforderung.

Was ist der Unterschied zwischen HSL und HSV?

Sowohl HSL als auch HSV beschreiben Farbe in Bezug auf Farbton und Sättigung, definieren aber die dritte Achse unterschiedlich. HSL verwendet Helligkeit — bei 100% Helligkeit ist die Farbe immer weiß, unabhängig vom Farbton. HSV verwendet Wert/Helligkeit — bei 100% Wert ist die Farbe vollständig gesättigt und hell, nicht weiß. HSV bildet natürlicher ab, wie Maler über das Mischen von Farben nachdenken.

Warum sind CMYK-Werte nur Näherungswerte?

Bildschirmfarben werden im sRGB-Farbraum definiert, während CMYK geräteabhängig ist — dieselben CMYK-Werte erzeugen auf verschiedenen Druckern, Tinten und Papiertypen unterschiedliche gedruckte Farben. Die hier gezeigte Konvertierung verwendet die Standard-Mathematikformel, die einen guten Ausgangspunkt bietet, aber nicht genau dem entspricht, was ein professioneller RIP mit einem kalibrierten ICC-Profil erzeugen würde.

Verwandte Werkzeuge

Markdown zu HTML

Konvertieren Sie Markdown sofort in HTML. Unterstützt GFM-Tabellen, Aufgabenlisten und Codeblöcke.

YAML-zu-JSON-Konverter

Konvertieren Sie zwischen YAML und JSON sofort. Automatische Richtungserkennung — im Browser.

Base64 Encoder / Decoder

Kodieren und dekodieren Sie Base64-Text schnell und einfach.

Cron-Ausdruck-Generator

Erstellen, testen und verstehen Sie Cron-Ausdrücke mit einem visuellen Builder und nächsten Ausführungszeiten.

Zuletzt besuchte Werkzeuge

JWT Decoder

Developer

Decode and inspect JWT tokens. Verify HS256 signatures and check token expiry — all in your browser.

Cron Expression Builder

Developer

Build, test, and understand cron expressions with a visual builder and next run times.

CSS Gradient Generator

Developer

Create linear, radial and conic CSS gradients with a live visual editor. Copy the CSS code instantly.