So funktioniert das Muster
| Teil | Bedeutung |
|---|---|
^# | Beginnt mit # |
[0-9a-fA-F]{3,4} | Kurzform: #rgb oder #rgba |
[0-9a-fA-F]{6} | Langform: #rrggbb |
[0-9a-fA-F]{8} | Langform mit Alpha: #rrggbbaa |
Code-Beispiele
JavaScript
const re = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
re.test(value); // true or falsePython
import re
bool(re.fullmatch(r'#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})', value))PHP
preg_match('/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/', $value) === 1;Hinweise und Einschränkungen
Alle vier Längen sind gültiges CSS. Entferne die Alternativen {3,4} und {8}, wenn dein System nur sechsstellige Farben akzeptiert. Konvertiere zwischen Formaten mit dem Farbkonverter.
Regex-Tester
Gib ein Muster ein und sieh zu, wie Übereinstimmungen in deinem Testtext in Echtzeit hervorgehoben werden.
Häufige Fragen
Wie lautet der Regex für Hex-Farbcodes?
/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ — er prüft die gesamte Zeichenkette. In der Tabelle oben siehst du, was jeder Teil bewirkt.
Welche Beispiele treffen zu?
Von den getesteten Beispielen treffen diese zu: #fff, #1A2B3C, #1a2b3c80, #f0f8. Die anderen nicht.
Wie teste ich diesen Regex?
Klicke auf „Im Regex-Tester öffnen“ – Muster, Flags und Beispieltext werden automatisch geladen, und Treffer werden beim Bearbeiten markiert.