Farbkonverter/ HEX · RGB · HSL · HSV · CMYK

Konvertieren Sie zwischen HEX, RGB, HSL, HSV und CMYK Farbformaten — mit Live-Farbwähler und Abstufungspalette.

HEX
Abstufungen
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)

Hat dieses Tool Ihr Problem gelöst?

Code-Beispiele

CSS / Tailwind
/* CSS custom properties */
:root {
  --color-primary: #3b82f6;         /* HEX */
  --color-primary-rgb: 59, 130, 246; /* RGB values only */
}

/* Usage */
.button {
  background: var(--color-primary);
  color: hsl(210, 40%, 98%);        /* HSL */
  border: 1px solid rgb(59 130 246 / 30%); /* CSS 4 syntax */
}

/* Tailwind config */
// tailwind.config.js
colors: { brand: '#3b82f6' }
JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

// RGB → HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}

// npm: chroma-js (full-featured)
import chroma from 'chroma-js';
chroma('#3b82f6').rgb()   // [59, 130, 246]
chroma('#3b82f6').hsl()   // [0.58, 0.89, 0.60]
chroma.scale(['white','#3b82f6']).colors(6)
Python
import colorsys

# HEX → RGB
hex_str = '#3b82f6'
rgb = tuple(int(hex_str[i:i+2], 16) for i in (1, 3, 5))
# (59, 130, 246)

# RGB → HSL (0-1 range)
r, g, b = (v / 255 for v in rgb)
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")

# pip install colour-science
import colour
colour.sRGB_to_XYZ([0.23, 0.51, 0.96])
Swift / iOS
import SwiftUI

// HEX to Color
extension Color {
  init(hex: String) {
    let hex = hex.trimmingCharacters(
      in: .alphanumerics.inverted)
    var int = UInt64()
    Scanner(string: hex).scanHexInt64(&int)
    let r = Double((int >> 16) & 0xFF) / 255
    let g = Double((int >> 8)  & 0xFF) / 255
    let b = Double( int        & 0xFF) / 255
    self.init(red: r, green: g, blue: b)
  }
}

Color(hex: "#3b82f6")

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX (Hexadezimal) ist das gängigste Webformat — z. B. #FF5733 — und ist im Wesentlichen RGB in Basis-16. RGB gibt die Intensität der Rot-, Grün- und Blaukanäle (0–255) direkt an. HSL verwendet Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness), was intuitiver für Farbanpassungen ist.
Was ist der Unterschied zwischen HSV und HSL?
HSV (Farbton, Sättigung, Hellwert/Value) und HSL (Farbton, Sättigung, Helligkeit/Lightness) sind beide menschenfreundliche Farbmodelle. Hauptunterschied: Bei HSV ist V=100% der reinste, hellste Farbton. Bei HSL ergibt L=50% den reinsten Farbton — L=100% ist Weiß, L=0% ist Schwarz. Photoshop und Figma verwenden HSB (≈ HSV); CSS verwendet HSL.
Was ist CMYK und warum wird es im Web nicht verwendet?
CMYK (Cyan, Magenta, Gelb, Schwarz/Key) ist das Farbmodell der Druckindustrie, basierend auf subtraktiver Farbmischung von Tinte. Web und Bildschirme verwenden additives RGB (Lichtmischung). CSS unterstützt CMYK nicht nativ — Designer konvertieren typischerweise von RGB zu CMYK vor dem Druck.
Wie verwende ich HEX-Farben in CSS?
CSS akzeptiert: 6-stelliges #RRGGBB (z. B. #3b82f6), 3-stelliges Kurzformat #RGB (z. B. #38f = #3388ff) und 8-stelliges #RRGGBBAA für Alpha (z. B. #3b82f680 = 50% Deckkraft). Moderne Browser unterstützen auch die CSS Color Level 4 color(srgb ...) Syntax.
Wie wird der Farbkontrast berechnet?
WCAG empfiehlt ein Kontrastverhältnis von mindestens 4,5:1 (AA) oder 7:1 (AAA) für Fließtext gegenüber dem Hintergrund. Der Kontrast wird über die relative Leuchtdichte berechnet: RGB-Werte linearisieren, dann (L1 + 0,05) / (L2 + 0,05) berechnen.
Wie werden Farbabstufungen (Shades) erzeugt?
Die Abstufungspalette hält den ursprünglichen Farbton (H) und die Sättigung (S) konstant und variiert die HSL-Helligkeit (L) über 6 Werte (90% bis 15%). Dies entspricht der Farbpaletten-Generierung von Tailwind CSS — nützlich für den schnellen Aufbau einer Markenfarb-Skala.