Skip to main content

Farbpicker Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

Farbpicker illustration
🎨

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

1

Wählen Sie eine Farbe

Klicken Sie auf die Farbpalette, verwenden Sie den nativen Farbwähler oder passen Sie die HSL-Schieberegler an.

2

Alle Formate anzeigen

Betrachten Sie die Farbe in HEX, RGB, HSL und CMYK gleichzeitig.

3

Kopieren Sie jedes Format

Klicken Sie auf Kopieren neben jedem Format, um den Wert für Ihr Projekt zu übernehmen.

Loading tool...

What Is Farbpicker?

Ein interaktiver Farbwähler, mit dem Sie jede Farbe auswählen und sofort ihre Werte in vier großen Farbformaten sehen können: HEX, RGB, HSL und CMYK. Das Tool verfügt über eine Sättigungs-Helligkeits-Leinwand, einen Farbton-Regler und eine native Farbeingabe, sodass Sie auf mehrere Arten die genaue Farbe finden, die Sie benötigen. Ob Sie ein Designer sind, der nach dem perfekten Schatten sucht, ein Entwickler, der Farbwerte für CSS benötigt, oder jemand, der mit Farben arbeitet, dieses Tool bietet alle Werte, die Sie an einem Ort benötigen. Die Leinwand rendert ein vollständiges Sättigungs-Helligkeits-Raster für den aktuellen ausgewählten Farbton, sodass Sie farbliche Variationen visuell erkunden können. Alle vier Format-Ausgaben werden in Echtzeit aktualisiert und enthalten Kopier-Schaltflächen, damit Sie den benötigten Wert schnell kopieren können - egal ob für die Web-Entwicklung, Print-Design oder Anwendungs-Entwicklung.

Why Use Farbpicker?

  • Mehrere Eingabemethoden: Farbpalette, nativer Farbwähler und HSL-Schieberegler
  • Vier simultane Ausgabeformate: HEX, RGB, HSL, CMYK
  • Große Farbvorschaufläche für eine genaue visuelle Bewertung
  • Farbpalette-basierte Sättigung-Helligkeits-Auswahl für präzise Farberkundung
  • Ein-Klick-Kopieren für jedes Format

Common Use Cases

Webentwicklung

Finden und kopieren Sie die perfekte Farbe in jedem CSS-kompatiblen Format (HEX, RGB, HSL).

Designarbeit

Erkunden Sie Farben visuell mit der Farbpalette und erhalten Sie exakte Werte für Design-Tools.

Cross-Format-Referenz

Sehen Sie, wie eine einzelne Farbe in HEX, RGB, HSL und CMYK gleichzeitig übersetzt wird.

Druckvorbereitung

Wählen Sie eine Farbe visuell aus und erhalten Sie CMYK-Werte für die Druckspezifikation.

Technical Guide

Der Farbwähler rendert eine 256×256-Leinwand, bei der die X-Achse die Sättigung (0-100%) und die Y-Achse die Helligkeit (100-0%) darstellt. Für jeden Pixel wird die HSL-zu-RGB-Umwandlung berechnet und gezeichnet. Der Farbton-Regler steuert, welcher Farbton auf der Leinwand angezeigt wird, wodurch ein umfassender Erkundungsraum für jede Farbe geschaffen wird. Die Leinwand verwendet die HTML5-Canvas-API für die Echtzeit-Renderung. Wenn der Benutzer auf die Leinwand klickt, werden die Mauspositionen auf Sättigungs- und Helligkeitswerte abgebildet, die dann in alle vier Ausgabeformate umgewandelt werden. Die native HTML-Farbeingabe bietet eine alternative Auswahlmethode und synchronisiert sich bidirektional mit den HSL-Reglern. Die CMYK-Ausgabe verwendet die mathematische RGB-zu-CMYK-Umwandlungsformel. Alle Umwandlungen erfolgen in Echtzeit ohne jegliche Serverinteraktion, was das Tool responsiv und privat macht.

Tips & Best Practices

  • 1
    Klicken Sie irgendwo auf der Farbpalette, um schnell eine Farbe in der aktuellen Hue-Familie zu finden
  • 2
    Verwenden Sie den Hue-Schieberegler, um durch das Spektrum zu fegen und dann mit der Farbpalette fein abzustimmen
  • 3
    Der native Farbwähler bietet Zugriff auf Ihren OS-Farbdialog für maximale Präzision
  • 4
    Kopieren Sie HEX für Web, RGB für Canvas/JavaScript, HSL für CSS-Themen und CMYK für Druck
  • 5
    HSL-Werte sind oft die nützlichsten für die Erstellung von Design-System-Farbskalen

Related Tools

Frequently Asked Questions

Q Warum benötige ich einen Farbwähler?
Ein Farbwähler hilft Ihnen, exakte Farben visuell zu finden und auszuwählen, und bietet dann die präzisen Werte, die für die Implementierung in jedem Format erforderlich sind. Er eliminiert das Raten und manuelles Umrechnen zwischen Formaten.
Q Was ist der Unterschied zwischen der Farbpalette und dem nativen Farbwähler?
Die Farbpalette zeigt ein 2D-Sättigung-Helligkeits-Raster für präzise Erkundung innerhalb einer Hue. Der native Farbwähler verwendet Ihren Betriebssystem-Farbdialog, der möglicherweise zusätzliche Funktionen wie einen Pipetten-Tool bietet.
Q Kann ich Farben von meinem Bildschirm auswählen?
Der native Farbeingabe auf einigen Browsern (Chrome, Edge) enthält ein Pipetten-Tool, das es Ihnen ermöglicht, jede sichtbare Farbe auf Ihrem Bildschirm auszuwählen.
Q Sind die vier Format-Ausgaben immer synchronisiert?
Ja, alle Formate stellen immer dieselbe exakte Farbe dar. Eine Änderung der Farbe durch eine beliebige Eingabemethode aktualisiert alle vier Ausgaben gleichzeitig.

About This Tool

Farbpicker is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.