diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html
index 8786a79e8b..f9dd169ec3 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -1,5 +1,6 @@
 <mat-toolbar
     [color]="color"
+    [style.background-color]="color"
     [style.background-image]="'url(' + backgroundImage + ')'">
     <button
         *ngIf="showSidenavToggle && position === 'start'"
diff --git a/lib/core/src/lib/layout/components/header/header.component.spec.ts b/lib/core/src/lib/layout/components/header/header.component.spec.ts
index abe4f40c91..0965e3f170 100644
--- a/lib/core/src/lib/layout/components/header/header.component.spec.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.spec.ts
@@ -72,6 +72,15 @@ describe('HeaderLayoutComponent', () => {
             expect(await host.getAttribute('ng-reflect-color')).toBe('primary');
         });
 
+        it('should change background color when custom is provided', async () => {
+            component.color = '#42f57e';
+            fixture.detectChanges();
+
+            const toolbarHarness = await loader.getHarness(MatToolbarHarness);
+            const toolbar = await toolbarHarness.host();
+            expect(await toolbar.getCssValue('background-color')).toBe('rgb(66, 245, 126)');
+        });
+
         it('should change background image when provided', async () => {
             component.backgroundImage = '/assets/someImage.png';
             fixture.detectChanges();
diff --git a/lib/core/src/lib/layout/components/header/header.component.stories.ts b/lib/core/src/lib/layout/components/header/header.component.stories.ts
index 5ecd89f363..bb8b54ee0c 100644
--- a/lib/core/src/lib/layout/components/header/header.component.stories.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.stories.ts
@@ -41,7 +41,7 @@ export default {
     argTypes: {
         color: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
+            options: ['primary', 'accent', 'warn', '#42f57e', undefined],
             defaultValue: undefined,
             description: `Background color for the header.
                 It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
diff --git a/lib/core/src/lib/layout/components/header/header.component.ts b/lib/core/src/lib/layout/components/header/header.component.ts
index 8ba2e855d8..6739c691b6 100644
--- a/lib/core/src/lib/layout/components/header/header.component.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.ts
@@ -46,7 +46,7 @@ export class HeaderLayoutComponent implements OnInit {
      * Background color for the header. It can be any hex color code or one
      * of the Material theme colors: 'primary', 'accent' or 'warn'.
      */
-    @Input() color: ThemePalette;
+    @Input() color: ThemePalette | string;
 
     /** Path to a background image for the header. */
     @Input() backgroundImage: string;