Farbkonverter
Zwischen HEX, RGB, und HSL Formaten sofort konvertieren.
Farben visualisieren und CSS-Codes für Ihre Projekte übernehmen.
#3B82F6
Click to pick color
CSS Usage
Häufige Anwendungsfälle
Webdesign
Diesen zufälligen HEX-Code, den Sie gefunden haben, in einen HSL-Wert konvertieren, um einfach hellere oder dunklere Variationen für Hover-Zustände zu erstellen.
Druckvorbereitung
Den CMYK-Äquivalent Ihrer Markenfarben prüfen, um zu sehen, wie sie auf Visitenkarten aussehen könnten.
Entwicklung
Farbprobleme debuggen, indem Sie opake HEX-Codes (z.B. #RRGGBBAA) in lesbarere RGBA-Formate konvertieren.
Theme-Erstellung
Ihre Farbpalette standardisieren, indem Sie alle Legacy-RGB-Werte zu HEX für Ihre CSS-Variablen konvertieren.
Anleitung
Dieses Tool ist als Schweizer Taschenmesser für Farbformate in der Webentwicklung konzipiert.
Eingabe & Konvertierung
- Überall eingeben: Geben Sie einen Wert in einem beliebigen Feld ein (HEX, R/G/B, H/S/L). Die anderen Felder werden automatisch aktualisiert.
- Farbwähler: Klicken Sie auf die große Farbvorschau-Box, um den nativen Farbwähler Ihres Browsers (Pipette) zu öffnen.
In Zwischenablage kopieren
- Ein-Klick-Kopieren: Klicken Sie auf das Kopier-Symbol neben dem HEX-Feld.
- CSS-Snippets: In der Box unter der Vorschau klicken Sie auf eine beliebige Zeile (z.B. rgb(0,0,0)), um gültigen CSS-Code zu kopieren.
Farbkonvertierung im Code
Hex zu RGB programmatisch zu konvertieren ist eine häufige Aufgabe. So geht es in JavaScript und Python.
function hexToRgb(hex) {
// Remove hash
hex = hex.replace(/^#/, '');
// Parse components
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgb(${r}, ${g}, ${b})`;
}
console.log(hexToRgb("#ff0000"));
// Output: "rgb(255, 0, 0)"def hex_to_rgb(hex_val):
hex_val = hex_val.lstrip('#')
return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4))
print(hex_to_rgb("#3B82F6"))
# Output: (59, 130, 246)/* Classic */
.color { color: #ff0000; }
.color { color: rgb(255, 0, 0); }
/* Modern (Level 4) - Space separated */
.color { color: rgb(255 0 0); }
.color { color: rgb(255 0 0 / 50%); } /* with alpha */Häufig gestellte Fragen (FAQ)
Was ist HEX?
HEX ist eine hexadezimale Darstellung von RGB-Werten. Es beginnt mit # gefolgt von 6 Zeichen (0-9, A-F). Das erste Paar repräsentiert Rot, das zweite Grün und das dritte Blau.
Wann sollte ich HSL verwenden?
HSL (Farbton, Sättigung, Helligkeit) ist für Menschen intuitiver. Es ist einfacher, Farbpaletten zu erstellen, indem man einfach die Helligkeit für Schattierungen oder den Farbton für komplementäre Farben anpasst.
Was ist Opazität (Alpha)?
Opazität kontrolliert die Transparenz einer Farbe. In RGBA ist es eine Zahl zwischen 0 (vollständig transparent) und 1 (vollständig opak).
Wie verbreitet ist Farbenblindheit?
Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbenblindheit. Es ist wichtig, hohen Kontrast zu verwenden und sich nicht allein auf Farbe für kritische Informationen zu verlassen.