HEX ↔ RGB-Farbkonverter

HEX-Farben sind 3 Paare von Hexadezimalziffern, die die Kanäle Rot, Grün und Blau darstellen. #RRGGBB. Jedes Paar ist eine Basis-16-Zahl (0–FF = 0–255 dezimal). Konvertierung: Hex in Paare aufteilen, jedes von Basis 16 in Basis 10 konvertieren. Beispiel: #1A2B3C → R=0x1A=26, G=0x2B=43, B=0x3C=60 → rgb(26, 43, 60). Kurzes Hex #RGB: Jede Ziffer wird verdoppelt. #F3A → #FF33AA → rgb(255, 51, 170). CSS akzeptiert beide Formen: #FF33AA und #F3A sind identisch. Programmgesteuert: parseInt("1A", 16) = 26.

HSL steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit) – ein intuitiveres Farbmodell als RGB. Farbton: 0–360 Grad auf einem Farbkreis. 0/360=Rot, 60=Gelb, 120=Grün, 180=Cyan, 240=Blau, 300=Magenta. Sättigung: 0–100%. 0% = Grau, 100% = vollständig gesättigt (lebendige Farbe). Helligkeit: 0–100%. 0% = Schwarz, 100% = Weiß, 50% = reine Farbe. CSS: hsl(240, 100%, 50%) = reines Blau. Vorteil gegenüber RGB: Sie können intuitiv Variationen erstellen – um eine Farbe heller zu machen, erhöhen Sie die Helligkeit. Um eine Pastellfarbe zu erhalten, reduzieren Sie die Sättigung. Um den Farbton zu drehen, addieren/subtrahieren Sie Grad. Wird in Designsystemen verwendet, um Farbpaletten zu generieren.

HSV (Hue, Saturation, Value) wird auch HSB (Hue, Saturation, Brightness) genannt. Ähnlich wie HSL, aber unterschiedlich: Value/Brightness (Wert/Helligkeit): 0=Schwarz, 100%=vollständig hell (reine Farbe oder Weiß abhängig von Sättigung). HSV vs. HSL: In HSL ist 100% Helligkeit immer Weiß, unabhängig von der Sättigung. In HSV ist 100% Wert mit 0% Sättigung Weiß, mit 100% Sättigung die reine Farbton. HSV ist das Modell, das von den meisten Farbwählern in Designtools verwendet wird (Photoshop, Figma, etc.). Es ist natürlicher für die Farbauswahl: Wählen Sie den Farbton, wählen Sie dann Sättigung und Helligkeit auf einem 2D-Quadrat.

Alpha fügt Transparenz zu Farben hinzu. Bereich: 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). CSS-Formate mit Alpha: rgba(255, 100, 50, 0.5) – 50% transparent. hsla(120, 60%, 50%, 0.8) – 20% transparent. Hex mit Alpha: #RRGGBBAA (8-stelliges Hex). #FF000080 = Rot bei etwa 50% Deckkraft (0x80 = 128 = 128/255 ≈ 0,5). Kurz: #RGBA (4-stellig). #FF08 = Rot bei etwa 53% Deckkraft. Modernes CSS: color(display-p3 1 0 0 / 0.5) für breites Farbumfang. Die CSS-Eigenschaft opacity vs. Alpha-Farbe: opacity beeinflusst das gesamte Element und seine untergeordneten Elemente; Alpha-Farbe beeinflusst nur diese spezifische Eigenschaft. opacity: 0.5 auf einem div mit Text macht sowohl Hintergrund als auch Text transparent; background-color: rgba(0,0,0,0.5) beeinflusst nur den Hintergrund.

CSS hat über 140 benannte Farben. Bekannte: red, blue, green, white, black, gray, orange, purple, pink, cyan. Einige mit spaßigen Namen: rebeccapurple (#663399, hinzugefügt zu Ehren der Tochter des CSS-Spec-Autors Eric Meyer), cornflowerblue (#6495ED), papayawhip (#FFEFD5), lawngreen (#7CFC00). Wann zu verwenden: Benannte Farben sind für schnelle Prototypen in Ordnung. Für die Produktion: Verwenden Sie HEX oder HSL für Konsistenz und Tool-Kompatibilität. HSL ist am besten für Designsysteme – Sie können Paletten-Varianten programmgesteuert generieren: hsl(210, 80%, 20%/30%/40%/50%/60%) für eine Blau-Skala. Vermeiden Sie benannte Farben in Design-Token, da diese die tatsächlichen Werte verbergen.