Hex-Farbwähler und -Konverter (RGB, HSL, HSV)

Konvertieren Sie Hex in RGB, HSL und HSV, kopieren Sie Harmonie-Farbfelder und exportieren Sie CSS oder JSON – direkt in Ihrem Browser.

Für interaktive Funktionen ist JavaScript erforderlich. Bitte aktivieren Sie JavaScript in Ihrem Browser, um dieses Tool zu verwenden.

Hex-Farbe

Geben Sie #RGB oder #RRGGBB (mit oder ohne #) ein. Bei ungültigen Werten wird die letzte gute Konvertierung beibehalten.

Konvertierungen

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Harmonie-Farbfelder

Harmonietyp

Swatch-Anzahl

Tönungs-/Schattenstreifen

Tönungs-/Schattierungsschritte

Farbfelder exportieren

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Wählen Sie eine Hex-Farbe aus oder fügen Sie sie ein, konvertieren Sie sie in RGB, HSL und HSV, generieren Sie komplementäre/analoge/triadische/monochrome Farbfelder, kopieren Sie Werte und exportieren Sie CSS oder JSON. Kostenlos, schnell und läuft vollständig in Ihrem Browser.

So verwenden Sie diesen Hex-Farbwähler

Geben oder fügen Sie einen Hexadezimalwert ein oder verwenden Sie die native Auswahl. Die Seite konvertiert es sofort in RGB, HSL und HSV, generiert Harmoniemuster und einen Tönungs-/Schattierungsstreifen und hält alles kopierbereit. Teilen Sie Ihr Setup mit der URL – der Status wird in der Abfragezeichenfolge gespeichert.

Hex-, RGB-, HSL- und HSV-Referenz

Hex ist eine kompakte RGB-Kodierung. RGB beschreibt Rot/Grün/Blau-Kanäle. HSL drückt Farbton, Sättigung und Helligkeit aus; HSV verwendet Farbton, Sättigung und Wert (Helligkeit). Dieses Tool verwendet deterministische Mathematik in Ihrem Browser – keine Uploads und keine externen APIs.

Komplementär, analog, triadisch und monochromatisch

Komplementär dreht den Farbton um 180°. Analoge Schritte werden in einem festen Winkel um Ihre Basis herum eingefärbt. Triadic verwendet 120°-Versatze. Monochromatisch hält den Farbton und variiert die Helligkeit. Zählsteuerungen gelten für analoge und monochromatische Modi.

CSS-Variablen und JSON-Export

Der Export erzeugt benutzerdefinierte :root-Eigenschaften mit stabilen Namen (z. B. --color-base, --color-analogous-1) und JSON mit baseHex, Harmony-Modus und Farbfeldlisten für Skripte oder Design-Tokens.

Häufig gestellte Fragen

Erweitert sich #ABC auf sechs Ziffern?

Ja. Dreistellige Hexadezimalzahlen werden pro Ziffernpaar erweitert, sodass #ABC zu #AABBCC wird.

Was passiert, wenn mein Hex ungültig ist?

Es wird ein Inline-Fehler angezeigt. Die letzte gültige Farbe bleibt in den Konvertierungszeilen, der Auswahl und den Exporten erhalten, bis Sie erneut ein gültiges Hexadezimal eingeben.

Wie werden Harmoniefarben berechnet?

Sie sind deterministisch: Komplementär ist eine 180°-Farbtonverschiebung in HSL; analog verwendet feste Farbtonschritte; triadisch verwendet 120°-Versatz; Monochromatisch variiert die Helligkeit und behält gleichzeitig Farbton und Sättigung der Basis bei.

Was ist im JSON-Export enthalten?

Stabile Schlüssel: baseHex, Harmony, HarmonyCount (sofern zutreffend), HarmonySwatches (Hex-Strings), TintShadeStrip und StripCount – geeignet für Tools oder Dokumentation.

Kann ich meine Farben teilen?

Ja. Die URL wird mit Hexadezimalwert, Harmoniemodus, Anzahl und Streifengröße aktualisiert, sodass Sie ein genaues Setup mit einem Lesezeichen versehen oder teilen können.