Farbkonverter + Palette

Konvertiere Farben zwischen HEX, RGB, HSL, HSB und CMYK. Generiere komplementäre, analoge, triadische und andere Paletten. Überprüfe WCAG-Kontrastverhältnisse. Die gesamte Verarbeitung erfolgt in deinem Browser.

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

#3b82f6
R
G
B
Formate
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSBhsb(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
WCAG-Kontrast
3.68:1AA Large
5.71:1AA
Palette
Senden an:

Konverter & Beispiele

HEX-zu-RGB Konverter: Farbcode-Übersetzer

Konvertiere HEX-Farbcodes wie #3b82f6 in RGB-Werte (59, 130, 246). Deckt hex Kurznotation, Alphakanäle und Verwendung in CSS ab.

 RGB-zu-HSL Konverter: Farbmodell-Übersetzer

Konvertiere RGB-Farbwerte in HSL (Farbton, Sättigung, Helligkeit). Verstehe Farbmodelle für CSS, Designsysteme und programmatische Farbmanipulation.

 Tailwind CSS Farbe zu HEX: Farben-Nachschlagewerk

Schlage Tailwind CSS Farbnamen nach und erhalte ihre HEX-Werte. blue-500 ist #3b82f6, gray-900 ist #111827. Schnellreferenz der Tailwind-Farbpalette.

Verwandte Werkzeuge

sha
Hash-Generator

Erzeugt MD5-, SHA-1-, SHA-256- und SHA-512-Hashes aus Text oder Dateien. Nutzt die Web Crypto API für SHA und reines JavaScript für MD5.

 %20
URL-Kodierer und HTML-Entitäten-Kodierer

Kodiere Text für URLs mit encodeURIComponent oder encodeURI und maskiere HTML-Sonderzeichen als benannte oder numerische Entitäten. Alles im Browser.

Farbkonverter + Palettengenerator

Konvertiere Farben sofort zwischen HEX, RGB, HSL, HSB/HSV und CMYK. Wähle eine Farbe visuell aus oder gib einen beliebigen CSS-Farbwert, eine benannte Farbe oder einen rohen Formatstring ein. Das Tool generiert gleichzeitig alle Formatdarstellungen und erzeugt Paletten basierend auf der Farbtheorie.

Wie man es verwendet

  1. Wähle eine Farbe. Klicke auf die Farbvorschau, um die Systemfarbauswahl zu öffnen, gib einen Wert in das Eingabefeld ein oder ziehe die RGB-Schieberegler
  2. Lese die Konvertierungen. Alle fünf Formate (HEX, RGB, HSL, HSB, CMYK) werden in Echtzeit aktualisiert
  3. Kopiere jedes Format. Klicke auf Kopieren neben dem benötigten Format oder auf Alles Kopieren
  4. Generiere Paletten. Wähle einen Harmonietyp (komplementär, analog, triadisch usw.)
  5. Überprüfe den Kontrast. Das WCAG-Kontrastverhältnis gegen Weiß und Schwarz wird automatisch angezeigt

Wie Farbmodelle funktionieren

Jede Farbe auf deinem Bildschirm entsteht durch Mischen von rotem, grünem und blauem Licht in unterschiedlichen Intensitäten. RGB drückt dies direkt aus: drei Kanäle, jeder von 0 bis 255, was 16,7 Millionen mögliche Farben ergibt. HEX ist dasselbe Modell, in Basis 16 geschrieben. #FF0000 ist rgb(255, 0, 0).

HSL und HSB ordnen dieselbe Information in einer Form neu an, die besser abbildet, wie Menschen über Farbe denken. Der Farbton (Hue) ist die Position im Farbkreis in Grad (0 = Rot, 120 = Grün, 240 = Blau). Die Sättigung misst, wie lebendig die Farbe im Vergleich zu Grau ist. Die dritte Achse unterscheidet sich: HSL verwendet Helligkeit (0% = Schwarz, 100% = Weiß, 50% = reine Farbe), während HSB Helligkeit/Brightness verwendet (0% = Schwarz, 100% = volle Intensität). CSS verwendet HSL. Designtools wie Figma, Sketch und Photoshop verwenden HSB.

CMYK (Cyan, Magenta, Gelb, Schwarz) ist ein subtraktives Modell für den Druck. Farben absorbieren Licht, anstatt es zu emittieren. Die Konvertierung von RGB in CMYK ist eine mathematische Annäherung, da die beiden Farbräume nicht denselben Gamut abdecken.

Der Palettengenerator verwendet den Farbkreis, um harmonische Kombinationen zu erzeugen. Komplementäre Paletten (180° Gegensätze) bieten maximalen Kontrast. Analoge Paletten (30° Abstand) wirken harmonisch. Triadische Paletten (120° Abstand) bieten ausgewogenen Kontrast. Geteilte Komplementärpaletten und tetradische Paletten sind Variationen für komplexere Farbschemata.