diff --git a/src/angular/pipes/color-password.pipe.ts b/src/angular/pipes/color-password.pipe.ts
new file mode 100644
index 0000000000..1867032faf
--- /dev/null
+++ b/src/angular/pipes/color-password.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+/**
+ * A pipe that sanitizes HTML and highlights numbers and special characters (in different colors each).
+ */
+@Pipe({ name: 'colorPassword' })
+export class ColorPasswordPipe implements PipeTransform {
+    transform(password: string): SafeHtml {
+        return password
+            // Sanitize HTML first.
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            // Replace special chars (since that will exclude numbers anyway).
+            .replace(/((&amp;|&lt;|&gt;|[^\w ])+)/g, `<span class="passwordSpecial">$1</span>`)
+            // Finally replace the numbers.
+            .replace(/(\d+)/g, `<span class="passwordNumber">$1</span>`);
+    }
+}