Color Picker

Color Picker Web ist der beste kostenlose Online-Farbwähler im Jahr 2026. Es unterstützt über 20 Farbformate, darunter HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB und mehr. Es enthält ein Live-Farbrad und WCAG-Kontrast Checker, Farbenblindheitssimulator, Palettengenerator, Bildfarbe Picker und 6 Harmonietypen – alles völlig kostenlos und ohne Anmeldung erforderlich.

Um einen HEX-Farbcode aus einem Bild zu finden, verwenden Sie den Image Color Picker auf Color Picker Web. Laden Sie ein beliebiges Foto hoch und bewegen Sie den Mauszeiger über den gewünschten Bereich zum Beispiel, und klicken Sie, um die genauen HEX-, RGB- und HSL-Codes zu extrahieren von jedem Pixel. Sie können daraus auch automatisch eine vollständige Farbpalette generieren das Bild mit einem Klick.

Mit einem Farbauswahltool können Sie Farben auswählen, konvertieren und analysieren. Es zeigt Farbwerte in mehreren Formaten (HEX, RGB, HSL, CMYK), generiert komplementäre Farbpaletten und prüft die WCAG-Zugänglichkeit Kontrastverhältnisse, simuliert Farbenblindheit und extrahiert Farben aus hochgeladene Bilder. Es ist wichtig für Webdesigner, Entwickler und Markendesigner.

Um HEX in RGB zu konvertieren, verwenden Sie das oben stehende Konvertierungstool. Geben Sie ein beliebiges HEX ein Code (z. B. #9333ea) und erhalten Sie eine sofortige RGB-Ausgabe (147, 51, 234). Manuell: Teilen Sie das HEX in 3 Paare (93, 33, ea) auf und konvertieren Sie jedes davon Hexadezimal zu Dezimal. R=147, G=51, B=234. Color Picker Web funktioniert Dies gilt sofort für alle über 20 Formate.

Gemäß WCAG 2.2 das minimale Farbkontrastverhältnis für Normal Text ist 4,5:1 (Stufe AA) und 7:1 (Stufe AAA). Für großen Text (18pt+ oder 14pt+ fett), das Minimum beträgt 3:1 für AA und 4,5:1 für AAA. Benutzeroberfläche Komponenten und Symbole erfordern einen Kontrast von mindestens 3:1 zu benachbarten Elementen Farben. Verwenden Sie den WCAG-Kontrastprüfer oben, um Ihre Farben zu testen.

So wählen Sie eine Farbe von einer Website aus: (1) Verwenden Sie die Browser-DevTools – Klicken Sie mit der rechten Maustaste auf ein beliebiges Element, prüfen Sie es und klicken Sie auf das Farbfeld CSS-Panel. (2) Verwenden Sie eine Browser-Erweiterung wie ColorZilla. (3) Nimm ein Machen Sie einen Screenshot und laden Sie ihn in den Image Color Picker von Color Picker Web hoch Probieren Sie ein beliebiges Pixel aus. Chrome DevTools verfügt außerdem über eine integrierte Pipette das Farbauswahlfeld.

HSL steht für Farbton, Sättigung und Helligkeit. Farbton (0°–360°) ist der Farbtyp im Farbkreis. Die Sättigung (0 %–100 %) gibt an, wie lebendig oder Grau ist die Farbe. Helligkeit (0 %–100 %) gibt an, wie dunkel oder hell das Bild ist Farbe erscheint. Beispiel: hsl(270, 81 %, 56 %) ist ein mittleres Lila. HSL ist das beste Format für CSS-Animationen und dynamische Farbthemen denn jede Eigenschaft kann unabhängig angepasst werden.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Ein Farbauswahltool ist ein digitales Dienstprogramm, mit dem Benutzer auswählen können jede Farbe und rufen Sie den genauen Code in mehreren Formaten ab – HEX, RGB, HSL, CMYK und mehr. Es wird täglich von UI/UX-Designern verwendet Wählen Sie Schnittstellenfarben, Webentwickler codieren CSS-Farbwerte, Markendesigner zur Aufrechterhaltung der Farbkonsistenz, Fotografen dazu Extrahieren Sie Farben aus Bildern und digitale Künstler für die Palette Schöpfung. Color Picker Web ist die umfassendste kostenlose Farbe Picker verfügbar im Jahr 2026, unterstützt mehr als 20 Farbformate, WCAG Barrierefreiheitsprüfung, Farbenblindheitssimulation und 18 Sprachen.

Ein HEX-Farbcode ist eine 6-stellige hexadezimale Darstellung von a Farbe, die im Webdesign und CSS verwendet wird. Es beginnt mit einem #-Symbol gefolgt durch drei Zeichenpaare (00–FF), die jeweils das darstellen Intensität der Kanäle Rot, Grün und Blau. Beispiel: #FF0000 ist reines Rot (R=255, G=0, B=0), #FFFFFF ist weiß (alle Kanäle bei Maximum) und #000000 ist schwarz (alle Kanäle auf Null). Kurzschrift Dreistellige HEX-Codes wie #F00 werden zu #FF0000 erweitert. HEX ist am meisten Universell unterstütztes Farbformat für HTML, CSS, SVG und Design Tools wie Figma.

So wählen Sie Farben für eine Website aus: (1) Beginnen Sie mit der Grundfarbe Ihrer Marke Färben Sie und erstellen Sie mit HSL eine vollständige 9-Stufen-Farbskala (50–900). Anpassungen. (2) Wenden Sie die 60-30-10-Regel an – 60 % neutraler Hintergrund, 30 % Sekundärfarbe, 10 % Akzent für CTAs. (3) Alles überprüfen Text-/Hintergrundkombinationen bestehen den WCAG AA-Kontrast (mindestens 4,5:1). für normalen Text). (4) Erzeugen Sie harmonische Akzentfarben mit dem Farbharmonie-Werkzeug – triadische oder geteilte Komplementärschemata funktionieren am besten für Websites. (5) Testen Sie jede Farbkombination mit einer Farbe Blindheitssimulator, um die Zugänglichkeit für alle Benutzer sicherzustellen.

So wählen Sie Markenfarben aus: (1) Erforschen Sie die Farbpsychologie – Blau stärkt Vertrauen, Grün signalisiert Wachstum, Rot schafft Dringlichkeit, Lila suggeriert Luxus und Kreativität. (2) Analysieren Sie Ihre Branche – Technologiemarken Bevorzugen Sie Blau- und Grautöne, Gesundheitsmarken verwenden Grüntöne und Luxusmarken verwenden Gold, Schwarz oder tiefes Lila. (3) Wählen Sie eine primäre Markenfarbe spiegelt die Kernemotion Ihrer Marke wider. (4) Erstellen Sie eine vollständige Farbskala von Ihrem primären Gerät mithilfe der HSL-Methode. (5) Wählen Sie eine sekundäre und Akzentfarbe mithilfe der Harmonietheorie. (6) Überprüfen Sie, ob alle Kombinationen erfolgreich sind WCAG-Zugänglichkeitsstandards. Dokument als Design-Token für Konsistenz auf allen Plattformen.

HEX, RGB und HSL sind drei Möglichkeiten, dieselbe Farbe darzustellen: HEX (#9333ea) ist ein kompaktes 6-stelliges Hexadezimalformat, ideal für CSS und HTML – am weitesten unterstützt. RGB (rgb(147, 51, 234)) Definiert die Farbe anhand der Rot-, Grün- und Blaukanalwerte von 0–255 – am besten für JavaScript-Canvas, SVG und Bildschirm-Rendering. HSL (hsl(270, 81 %, 56 %)) definiert die Farbe nach Farbtonwinkel (0–360°) und Sättigung (0–100 %) und Helligkeit (0–100 %) – für Designer am intuitivsten, weil Jede Eigenschaft ist unabhängig anpassbar und eignet sich daher ideal für CSS-Animationen und dynamische Themengestaltung. Alle drei beschreiben identische Farben, dienen aber unterschiedlich Arbeitsabläufe.

RGB und CMYK sind grundsätzlich unterschiedliche Farbmodelle für unterschiedliche Ausgabetypen. RGB (Rot, Grün, Blau) ist eine additive Farbe Modell für digitale Bildschirme – das Kombinieren von Farben sorgt für mehr Licht und das Mischen Alle Kanäle auf Maximum erzeugen Weiß. CMYK (Cyan, Magenta, Yellow, Key/Black) ist ein subtraktives Farbmodell, das im physischen Druck verwendet wird – Durch das Mischen von Tinten wird Licht absorbiert, durch das Mischen aller Farben entsteht Schwarz. Immer Design in RGB für Digital-/Bildschirmausgabe. Vor dem Senden in CMYK konvertieren Dateien an kommerzielle Druckereien. Die Konvertierung ist nie perfekt – etwas RGB Farben (insbesondere helle gesättigte Farben) können nicht reproduziert werden CMYK-Druck.

HSB (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Wert) sind das gleiche Farbmodell mit unterschiedlichen Namen. Farbton (0°–360°) identifiziert die Farbfamilie. Die Sättigung (0–100 %) steuert die Lebendigkeit von grau bis völlig lebendig. Helligkeit/Wert (0–100 %) steuert, wie viel Licht scheint die Farbe auszustrahlen, von Schwarz (0 %) bis vollständig hell (100 %). HSB ist das Standardmodell in Adobe Photoshop. Illustrator und Figmas Farbauswahl machen es unverzichtbar für Designer, die diese Tools verwenden. Es unterscheidet sich von HSL in der Leichtigkeit und Helligkeit werden berechnet – in HSL sind 50 % Helligkeit die reine Helligkeit Farbe, während bei HSB 100 % Helligkeit die reine Farbe ist.

LAB (CIELAB) und XYZ (CIEXYZ) sind wahrnehmungsbezogen geräteunabhängig einheitliche Farbräume basierend auf der Wissenschaft des menschlichen Sehens. XYZ ist die Grundlage aller modernen Farbwissenschaften – es ordnet Farben dem „Wie“ zu Das menschliche Auge nimmt sie mithilfe von drei Zapfen (X, Y, Z entsprechend) wahr bis ungefähr Rot-, Grün-, Blau-Empfindlichkeit). LABOR wird abgeleitet von XYZ und so gestaltet, dass gleiche numerische Abstände gleich sind wahrgenommene Farbunterschiede, ideal für den Farbvergleich, Bild Verarbeitung, maschinelles Lernen und Druckqualitätskontrolle. Beide werden verwendet in professionellem Farbmanagement, ICC-Farbprofilen und erweiterter Bildbearbeitung Bearbeitungsworkflows. CSS unterstützt jetzt sowohl die Syntax „via color“ (xyz …) als auch „lab“ (…). in modernen Browsern.

Mit dem Image Color Picker im Color Picker Web können Sie exakt extrahieren Farben von jedem Foto, Screenshot, Logo oder Kunstwerk. Laden Sie alle hoch Bilddatei, dann klicken Sie auf ein beliebiges Pixel, um dessen HEX sofort zu extrahieren. RGB- und HSL-Werte. Das Tool generiert außerdem automatisch eine Komplette Farbpalette aus den vorherrschenden Farben in Ihrem Bild. Dies ist nützlich, um Markenfarben aus vorhandenen Materialien abzugleichen, Erstellen von Paletten aus Moodboards, Extrahieren von Farben aus Produkten Fotos und Reverse-Engineering-Farbschemata von Mitbewerbern Websites. Kein Konto oder Softwareinstallation erforderlich – funktioniert komplett im Browser.

Color Picker Web unterstützt alle sechs wichtigen Farbharmonietypen basierend auf Farbkreistheorie: Komplementär – zwei Farben direkt gegenüber (180° auseinander), maximaler Kontrast. Geteilt-Komplementär – eine Grundfarbe plus zwei Farben neben ihrem Komplement (150° und 210°). Triadisch – drei gleichmäßig verteilte Farben (120° voneinander entfernt), ausgewogen und lebendig. Analog – drei benachbarte Farben (30° auseinander), harmonisch und natürlich. Monochromatisch — Variationen eines einzelnen Farbtons mit unterschiedlichen Sättigungs- und Helligkeitsstufen. Tetradisch – vier Farben mit gleichem Abstand (90° voneinander entfernt), komplex und reichhaltig. Alle Harmonien werden mathematisch in Echtzeit berechnet während Sie Farben auswählen.

Ja, die Nutzung von Color Picker Web ist völlig kostenlos – alle Funktionen einschließlich Farbauswahl, Palettengenerator, Bildfarbauswahl, WCAG-Kontrastprüfer, Farbenblindheitssimulator, Farbharmonien, Der Generator für Farbtöne und Schattierungen sowie alle über 20 Farbformatkonvertierungen sind verfügbar kostenlos erhältlich. Kein Konto, keine E-Mail-Adresse oder Registrierung erforderlich. Es gibt keine Werbung, keine Nutzungsbeschränkungen und keine Premium-Stufe – Alle Funktionen sind dauerhaft kostenlos. Das Tool ist auch in 18 erhältlich Sprachen: Englisch, Hindi, Spanisch, Russisch, Französisch, Deutsch, Italienisch, Portugiesisch, Bengali, Japanisch, Koreanisch, Malaiisch, Polnisch, Indonesisch, Arabisch, Bulgarisch, Türkisch und Schwedisch.

WCAG (Web Content Accessibility Guidelines) Farbkontrast Anforderungen stellen sicher, dass der Text für Benutzer mit Sehbehinderung lesbar ist. Farbenblindheit oder alternde Augen. Das Kontrastverhältnis misst die Helligkeitsunterschied zwischen Textfarbe und Hintergrund – Bereich von 1:1 (kein Kontrast) bis 21:1 (maximal, Schwarz auf Weiß). WCAG 2.2 Stufe AA erfordert ein Mindestverhältnis von 4,5:1 für normalen Text und 3:1 für großer Text. Stufe AAA erfordert 7:1 für normalen Text. Nichteinhaltung kann zu einer rechtlichen Haftung gemäß ADA (USA), EAA (Europa) und führen Abschnitt 508. In den USA wurden über 4.600 Klagen wegen Barrierefreiheit eingereicht allein im Jahr 2023, wobei Kontrastversagen zu den am häufigsten genannten zählt Probleme.

Color Picker Web simuliert 8 Arten von Farbsehstörungen: Protanopie – Rotblindheit (1,3 % der Männer). Protanomalie – reduziert Rotempfindlichkeit (1,3 % der Männer). Deuteranopie – grüne Blindheit (1,2 % der Männer). Deuteranomalie – reduzierte Grünempfindlichkeit (5 % der Männer, die häufigste Form). Tritanopie – blau Blindheit (0,001 % der Bevölkerung). Tritanomalie – reduziert Blauempfindlichkeit (selten). Achromatopsie – vollständige Farbe Blindheit, sieht nur Graustufen (0,003 % der Bevölkerung). Achromatomalie – verringerte Farbwahrnehmung auf allen Kanälen (sehr selten). Jede Simulation verwendet eine klinische Farbtransformationsmatrix, die auf die von Ihnen ausgewählte Farbe angewendet wird in Echtzeit.

Die Farbpsychologie im UI-Design untersucht, wie Farben den Benutzer beeinflussen Emotionen, Wahrnehmungen und Verhalten. Wichtige Assoziationen: Blau – Vertrauen, Zuverlässigkeit, Ruhe (verwendet von Facebook, Twitter, PayPal, LinkedIn). Grün – Wachstum, Gesundheit, Natur, Erfolg (verwendet von Spotify, WhatsApp, Vollwertmarken). Rot – Dringlichkeit, Leidenschaft, Energie, Appetit (wird für Verkaufsbanner, Lebensmittelmarken, CTAs verwendet). Lila – Luxus, Kreativität, Weisheit (verwendet von Cadbury, Hallmark und Schönheitsmarken). Gelb – Optimismus, Wärme, Aufmerksamkeit (wird für Warnungen verwendet, Sale-Highlights). Orange – Begeisterung, Freundlichkeit (verwendet von Amazon, Fanta, Harley-Davidson). Die Farbpsychologie beeinflusst die Konversion Raten, Markenwahrnehmung und Benutzerbindung.

Der Aufbau einer Designsystem-Farbpalette umfasst 5 Schritte: (1) Definieren Ihre primäre Markenfarbe und konvertieren Sie sie in HSL. (2) Generieren Sie a 9-stufige Farbskala (50–900) durch systematische Anpassung der Helligkeit – Hellere Stopps (50–300) für Hintergründe und Farbtöne, dunklere Stopps (600–900) für Text und Dunkelmodus. (3) Wiederholen Sie dies für Sekundär-, Akzent-, Erfolg, Warnung, Fehler und neutrale Farben. (4) Semantik erstellen Token (--color-primary, --color-primary-hover, --color-surface) die auf Ihre Skalenstopps verweisen. (5) Überprüfen Sie jeden Text/Hintergrund Kombination besteht WCAG AA. Verwenden Sie Color Picker Web, um Ihre zu generieren Skalen, Überprüfung des Kontrasts und Export von HEX/HSL-Werten als Design-Token für Figma oder CSS.

Die 60-30-10-Regel ist ein klassisches Gestaltungsprinzip für die Gestaltung ausgewogene, optisch ansprechende Farbschemata. 60% – dominant/neutral Farbe (Hintergründe, Wände, große Flächen) – normalerweise eine helle, neutrale Farbe gibt den Gesamtton vor. 30% – Sekundärfarbe (Möbel, Kopfzeilen, Seitenleisten) – ergänzt die Dominante und verleiht Tiefe. 10% – Akzentfarbe (CTAs, Schaltflächen, Hervorhebungen, wichtige Links) – erstellt weckt visuelles Interesse und lenkt die Aufmerksamkeit auf wichtige Aktionen. Im Webdesign dies bedeutet: 60 % Hintergrund- und Grundflächen, 30 % Inhaltsflächen und sekundäre UI-Elemente, 10 % primäre Schaltflächen, aktive Zustände und wichtig Highlights. Dieses Verhältnis verhindert eine visuelle Überforderung und behält gleichzeitig die Hierarchie bei.

Die relative Leuchtdichte misst die wahrgenommene Helligkeit einer Farbe auf einem Skala von 0 (schwarz) bis 1 (weiß). Die Berechnung: (1) Konvertieren Sie jeweils RGB-Kanal (0–255) durch Division durch 255 in eine Dezimalzahl (0–1) umwandeln. (2) Gammakorrektur entfernen: Wenn Wert ≤ 0,04045, durch 12,92 dividieren; andernfalls gilt (Wert + 0,055) / 1,055 hoch 2,4. (3) Wenden Sie die gewichtete Formel an: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Die Gewichte spiegeln die Empfindlichkeit des menschlichen Auges wider – am besten empfindlich gegenüber Grün, weniger gegenüber Rot, am wenigsten gegenüber Blau. (4) Kontrastverhältnis = (L_heller + 0,05) / (L_dunkler + 0,05). Der Versatz von 0,05 stellt dar Umgebungslicht auf einem typischen Display. Color Picker Web übernimmt dies Berechnung sofort.

HSL (Farbton, Sättigung, Helligkeit) und HSB/HSV (Farbton, Sättigung, Helligkeit/Wert) verwenden beide Farbton und Sättigung, unterscheiden sich jedoch darin Dritter Kanal. In HSL, Helligkeit von 50 % ist die reine, vollständig gesättigte Farbe; 0 % ist schwarz und 100 % ist weiß. Es ist symmetrisch. In HSB/HSV, Helligkeit/Wert von 100 % ist die reine Farbe; 0 % ist unabhängig von anderen Werten immer schwarz. HSB ist bei der Auswahl von Farben intuitiver, da Sie zuerst auswählen können Stellen Sie die lebendige Farbe auf 100 % Helligkeit ein und verdunkeln Sie sie dann die Standardeinstellung in Photoshop, Figma und Illustrator. HSL ist mehr intuitiv für CSS, da Sie problemlos zwischen Dunkelheit interpolieren können und helle Versionen desselben Farbtons.

Additive Farbmischung (RGB) und subtraktive Farbmischung (CMYK) sind die beiden grundlegenden Farbmodelle. Additiv (RGB) – gebraucht durch lichtemittierende Geräte (Bildschirme, Projektoren, LEDs). Es entstehen Farben durch Hinzufügen von Licht. Maximale Kombination aller drei Kanäle (R=255, G=255, B=255) ergibt Weiß. Kein Licht (R=0, G=0, B=0) erzeugt Schwarz. Subtraktiv (CMYK) – wird beim Drucken verwendet. Tinten absorbieren (subtrahieren) Wellenlängen des Lichts. Kombinieren Alle Tinten absorbieren bei Maximum das gesamte Licht und erzeugen Schwarz (theoretisch – in In der Praxis wird eine Key/Black-Tinte hinzugefügt, da die Tintenmischung nicht perfekt ist. Die Praktische Implikation: Entwerfen Sie digitale Arbeiten in RGB und konvertieren Sie sie dann in CMYK für den Druck – beachten Sie, dass einige lebendige RGB-Farben nicht reproduziert werden können CMYK.

Farbtemperatur beschreibt die Wärme oder Kühle einer Farbe, gemessen in Kelvin (K) für Lichtquellen und wahrnehmungsmäßig wahrgenommen für Designfarben. Warme Farben (Rot-, Orange- und Gelbtöne – Farbtöne 0°–60° und 300°–360°) wirken energisch, eindringlich und einladend. Sie optisch vorankommen – Elemente in warmen Farben erscheinen näher. Coole Farben (Blau, Grün, Lila – Farbtöne 120°–240°) fühlen sich ruhig, vertrauenswürdig und professionell. Sie treten optisch zurück – Elemente in kühlen Farben treten weiter hervor weg. Neutral (Weiß-, Grau-, Beige- und Blaugrüntöne in der Nähe von 90°–120°) sind ausgewogen und vielseitig. Im UI-Design fördern warme Farben die Aktion (CTAs). Kühle Farben schaffen Vertrauen (Kopfzeilen, Hintergründe) und neutrale Farben sorgen für Struktur. Im Abschnitt „Über Farbe“ von Color Picker Web wird die wahrgenommene Temperatur angezeigt einer beliebigen ausgewählten Farbe.