Softonic

HEX-Farbwähler

Schritt 1 / 4 HEX colour picker

Häufige Voreinstellungen

Wählen Sie eine Farbe mit dem visuellen Farbfeld Ihres Browsers oder geben Sie einen drei- beziehungsweise sechsstelligen HEX-Wert ein. Der Farbwähler berechnet RGB, HSL, einen ungefähren CMYK-Wert, die relative Leuchtdichte und die genauen Kontrastverhältnisse zu Weiß und Schwarz. Die Farbe wird in diesem Browser verarbeitet und nicht in die Funnel-URL geschrieben.

So wählen Sie eine Farbe aus

  1. 1

    Mit Vorgabe oder Farbfeld beginnen

    Wählen Sie eine Beispielfarbe oder öffnen Sie das native Farbfeld Ihres Browsers.

  2. 2

    Exakten HEX-Wert eingeben

    Tippen Sie drei Stellen wie #F60 oder sechs wie #FF6600 ein. Kurze HEX-Werte werden korrekt erweitert.

  3. 3

    Berechnete Formate prüfen

    Sehen Sie HEX, RGB, HSL, geschätztes CMYK und die relative sRGB-Leuchtdichte zusammen.

  4. 4

    Kontrast prüfen und kopieren

    Vergleichen Sie die Farbe mit Weiß und Schwarz und kopieren Sie dann HEX, RGB oder HSL.

Farbnotationen in der Praxis

Jedes Farbmodell beantwortet eine etwas andere Frage.

Notationsreferenz

Notation Bestandteile Typischer Einsatz
HEX #RRGGBB CSS, Design-Tools, Markenhandbücher
RGB Rot 0–255, Grün 0–255, Blau 0–255 CSS rgb(), Bildbearbeitung
HSL Farbton 0–360°, Sättigung %, Helligkeit % CSS hsl(), Designsysteme
CMYK Cyan %, Magenta %, Gelb %, Key/Schwarz % Druck, Druckvorstufe

Kontrast für Barrierefreiheit

WCAG 2.2 definiert Mindestkontraste zwischen Text und Hintergrund:

  • AA für normalen Text: ≥ 4,5:1
  • AA für großen Text (18 pt oder 14 pt fett): ≥ 3:1
  • AAA für normalen Text: ≥ 7:1

Der Farbwähler berechnet die Verhältnisse zu Weiß und Schwarz aus der relativen sRGB-Leuchtdichte. Diese beiden Werte beweisen nicht, dass eine andere Vordergrundfarbe lesbar ist; prüfen Sie jedes konkrete Farbpaar gesondert.

Tipps

  • HEX ist in den meisten Design-Tools der Standard, aber die kurze dreistellige Schreibweise (#F60) entspricht #FF6600, nicht #F06060.
  • Kopieren Sie HSL, wenn Sie Farbton, Sättigung oder Helligkeit in CSS oder einem Designprogramm verändern möchten.
  • Der CMYK-Wert ist eine einfache mathematische Näherung. Druckmaschine, Farbe, Papier und Farbprofil beeinflussen das Ergebnis; verwenden Sie für Produktionsdruck Farbmanagement und einen Proof.
  • Ein Verhältnis von mindestens 4,5:1 erfüllt WCAG AA für normalen Text. Schriftgröße, Gewicht und das genaue Vordergrund-Hintergrund-Paar bleiben dennoch wichtig.

Häufig gestellte Fragen

Photoshop verwendet ein Farbprofil, meist sRGB für Bildschirme und oft ein anderes Profil für Druckdaten. Browser behandeln nicht profilierte HEX-Werte als sRGB. Ist Ihr Dokument auf Adobe RGB oder ProPhoto eingestellt, bleiben die Pixelwerte gleich, aber die wahrgenommene Farbe verschiebt sich.

Ja, beides beschreibt reines Rot: Rot steht auf 255, Grün und Blau auf 0. HEX ist nur die zweistellige hexadezimale Schreibweise für jeden Kanalwert von 0 bis 255.

Wählen Sie die Primärfarbe und kopieren Sie den HSL-Wert. Halten Sie in CSS oder im Designprogramm Farbton und Sättigung fest und verändern Sie die Helligkeit. Prüfen Sie jedes Vordergrund-Hintergrund-Paar einzeln.

Die aktuelle Farbe bleibt bis zu 30 Minuten in diesem Browser-Tab gespeichert, damit sie zwischen den geführten Schritten erhalten bleibt. Sie wird weder in die Funnel-URL geschrieben noch über unsere Server übertragen. Neustart, Schließen des Tabs, Löschen der Browserdaten oder Ablauf der Frist entfernt sie.

Verwandte Tools

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.

Binär zu Dezimal

Konvertieren Sie Binärzahlen sofort in Dezimalzahlen. Zeigt die Positionsausweitung, damit Sie sehen können, wie jedes Bit beiträgt.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.

JSON-Formatierer

Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.

Base64 zu Hex-Konverter

Konvertieren Sie einen Base64-String in seine zugrunde liegenden Bytes, die als Hexadezimal dargestellt werden. Nützlich zum Überprüfen von Tokens, Schlüsseln, Zertifikaten und JWTs.