Softonic

HEX-Farbwähler

Schritt 1 / 4 Hex-Farbe

Designer und Entwickler brauchen dieselbe Farbe im Alltag in mehreren Schreibweisen. Klicken Sie in das 2D-Feld für Sättigung und Helligkeitswert, ziehen Sie den Farbtonregler oder fügen Sie einen Wert ein: Der Farbwähler zeigt HEX, RGB, HSL, HSV und CMYK nebeneinander — inklusive WCAG-Kontrastprüfung gegen Schwarz und Weiß, damit Sie sofort sehen, ob die Farbe lesbar ist.

So wählen Sie eine Farbe aus

  1. 1

    Farbton wählen

    Ziehen Sie den vertikalen Farbtonregler durch das gesamte Spektrum von 0 bis 360°.

  2. 2

    Sättigung und Helligkeit festlegen

    Klicken oder ziehen Sie im 2D-Quadrat, um zu bestimmen, wie kräftig und wie hell die Farbe wirkt.

  3. 3

    Werte exakt eingeben

    Geben Sie präzise Werte in HEX, RGB, HSL, HSV oder CMYK ein — alle fünf Felder bleiben synchron.

  4. 4

    Kontrast prüfen und kopieren

    Die Kontrastverhältnisse gegen Schwarz und Weiß werden direkt angezeigt; ein Klick kopiert die benötigte Schreibweise.

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
HSV/HSB Farbton 0–360°, Sättigung %, Wert/Helligkeit % Farbwähler in Photoshop und Figma
CMYK Cyan %, Magenta %, Gelb %, Key/Schwarz % Druck, Druckvorstufe
OKLCH Helligkeit %, Chroma, Farbton Moderne Paletten in CSS Color Module 4

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 das Verhältnis zu Weiß und zu Schwarz in Echtzeit. Wenn eine eigene Vordergrundfarbe entscheidend ist, prüfen Sie jedes Farbpaar zusätzlich mit einem spezialisierten Kontrast-Checker.

Tipps

  • HEX ist in den meisten Design-Tools der Standard, aber die kurze dreistellige Schreibweise (#F60) entspricht #FF6600, nicht #F06060.
  • HSL eignet sich gut für Paletten: Farbton fixieren, Helligkeit variieren und so helle und dunkle Abstufungen bauen.
  • CMYK und RGB lassen sich nicht perfekt ineinander umrechnen — CMYK im Druck hängt vom jeweiligen Druckprofil ab. Prüfen Sie Druckdaten immer mit einem Proof auf echtem Papier.
  • Für modernes CSS lohnt sich OKLCH, wenn Helligkeitsschritte visuell gleichmäßiger wirken sollen.

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, wechseln Sie zu HSL und verändern Sie die Helligkeit in 10%-Schritten, während Farbton und Sättigung fix bleiben. So entsteht eine stimmige Skala heller und dunkler Varianten desselben Farbtons.

Zuletzt verwendete Farben werden im lokalen Speicher Ihres Browsers abgelegt, damit sie nach einem Neuladen erhalten bleiben. Es wird nichts an einen Server gesendet, und Sie können den Palettenverlauf jederzeit löschen.

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.

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.

Zufälliger Farbgenerator

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

Farbpaletten-Generator

Erstellen Sie monochromatische, analoge, komplementäre, triadische oder tetradische Farbpaletten aus einer HEX-Basisfarbe und exportieren Sie kopierfertige CSS-Variablen.

Generator für zufällige Farbpaletten

Erstellen Sie zufällige Farbpaletten mit 2 bis 15 Farbfeldern, wählen Sie einen kräftigen, pastelligen, gedämpften oder dunklen Stil und kopieren Sie HEX-Codes oder CSS-Variablen.

ASCII zu Binärkonverter

Konvertiere jeden ASCII-String in seine binäre Darstellung. Jedes Zeichen wird zu acht Bits, durch Leerzeichen getrennt, bereit zum Einfügen in einen Protokolltrace oder Hausaufgaben.