Softonic

HEX-Farbwähler

Schritt 1 / 4 Hex color

Designer und Entwickler jonglieren täglich hundertmal mit derselben Farbe in vier Notationen. Klicken Sie irgendwo im 2D-Sättigungs-/Wertfeld, ziehen Sie den Farbtonregler oder fügen Sie einen Wert ein, und dieser Wähler zeigt HEX, RGB, HSL, HSV und CMYK nebeneinander an — mit WCAG-Kontrastprüfungen gegen Schwarz und Weiß, damit Sie sofort wissen, ob die Farbe lesbar ist.

So wählen Sie eine Farbe aus

  1. 1

    Wählen Sie einen Farbton

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

  2. 2

    Wählen Sie Sättigung und Wert

    Klicken oder ziehen Sie im 2D-Quadrat, um festzulegen, wie lebhaft und wie hell die Farbe ist.

  3. 3

    Feinabstimmung mit den Eingaben

    Geben Sie genaue Werte in HEX, RGB, HSL, HSV oder CMYK ein — alle fünf Felder bleiben synchronisiert.

  4. 4

    Überprüfen Sie die Zugänglichkeit und kopieren Sie

    Kontrastverhältnisse gegen Schwarz und Weiß erscheinen inline; ein Klick kopiert die benötigte Notation.

Farbnotationen in der Praxis

Jedes Farbmodell beantwortet eine leicht andere Frage.

Notationsreferenz

Notation Komponenten Wo es verwendet wird
HEX #RRGGBB CSS, Design-Tools, Markenrichtlinien
RGB rot 0-255, grün 0-255, blau 0-255 CSS rgb(), Bildbearbeitungsprogramme
HSL Farbton 0-360°, Sättigung %, Helligkeit % CSS hsl(), Designsysteme
HSV/HSB Farbton 0-360°, Sättigung %, Wert/Helligkeit % Photoshop, Figma Farbwähler
CMYK cyan %, magenta %, gelb %, schwarz % Druck, Vorstufe
OKLCH Helligkeit %, Chroma, Farbton Moderne CSS-Farbmodul 4 Paletten

Zugänglichkeitskontrast

WCAG 2.2 definiert minimale Kontrastverhältnisse zwischen Text und Hintergrund:

Der Wähler berechnet das Verhältnis gegen Weiß und Schwarz in Echtzeit. Wenn eine benutzerdefinierte Vordergrundfarbe entscheidend ist, verwenden Sie einen speziellen Kontrastprüfer für jedes Paar.

Tipps

Häufig gestellte Fragen

Photoshop wendet ein Farbprofil an (normalerweise sRGB für Bildschirm, oft anders für Druck). Browser rendern ungetaggtes HEX als sRGB. Wenn Ihr Dokument auf Adobe RGB oder ProPhoto eingestellt ist, sind die Pixelwerte gleich, aber die wahrgenommene Farbe verschiebt sich.

Ja — beide beschreiben volles Rot, mit Rot bei 255 und Grün und Blau bei 0. HEX ist nur eine zweistellige hexadezimale Notation für jeden 0-255 Kanalwert.

Wählen Sie Ihre Primärfarbe, wechseln Sie zu HSL und variieren Sie dann die Helligkeit in 10%-Schritten, während Sie Farbton und Sättigung sperren. Sie erhalten eine kohärente Leiter von Tönungen und Schattierungen, die auf demselben Farbton basieren.

Kürzlich verwendete Farben werden im lokalen Speicher Ihres Browsers gespeichert, sodass sie ein Refresh überstehen. Nichts wird an einen Server gesendet, und Sie können die Palettenhistorie jederzeit löschen.

Verwandte Tools

Farbpaletten-Generator

Erzeugen Sie eine harmonische 4-8 Farbenpalette aus einer Basisfarbe mit komplementären, analogen, triadischen und split-komplementären Schemen.

Zufälliger Farbgenerator

Generieren Sie eine zufällige RGB-Farbe, sehen Sie die Hex-, HSL- und RGB-Werte und kopieren Sie jedes Format mit einem Klick.

Zufälliger Farbpalettengenerator

Erzeugen Sie fünf-Farben-Paletten basierend auf einem zufälligen Grundton, mit komplementären, analogen und triadischen Varianten.

JSON-Formatter

Formatieren und schön ausgeben von JSON mit einstellbarem Einzug, sortierten Schlüsseln und Inline-Validierung, die Fehler an der genauen Position hervorhebt.

Zufallsbuchstabengenerator

Generieren Sie zufällige Buchstaben aus dem englischen Alphabet. Wählen Sie die Groß- oder Kleinschreibung, ob Duplikate oder einzigartige Ziehungen enthalten sein sollen, und legen Sie fest, wie viele.

Altersrechner

Berechnen Sie das genaue Alter in Jahren, Monaten und Tagen ab einem Geburtsdatum, plus insgesamt Tage, Stunden und den Countdown bis zum nächsten Geburtstag.