diff --git a/src/app/modules/colors/components/recipe-info/recipe-info.component.html b/src/app/modules/colors/components/recipe-info/recipe-info.component.html
index 6fd3a80..cf8819f 100644
--- a/src/app/modules/colors/components/recipe-info/recipe-info.component.html
+++ b/src/app/modules/colors/components/recipe-info/recipe-info.component.html
@@ -3,7 +3,7 @@
     <h3>{{recipe.company.name}} - {{recipe.name}}</h3>
     <div
       class="recipe-color-circle"
-      [class.dark-mode]="darkColor"
+      [class.dark-mode]="isDarkColor"
       [style.backgroundColor]="recipe.color">
       <div>{{recipe.gloss}}%</div>
     </div>
diff --git a/src/app/modules/colors/components/recipe-info/recipe-info.component.ts b/src/app/modules/colors/components/recipe-info/recipe-info.component.ts
index f87ef6a..6ff2509 100644
--- a/src/app/modules/colors/components/recipe-info/recipe-info.component.ts
+++ b/src/app/modules/colors/components/recipe-info/recipe-info.component.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, Input} from '@angular/core'
-import {Recipe} from '../../../shared/model/recipe.model'
+import {getRecipeLuma, Recipe} from '../../../shared/model/recipe.model'
 
 @Component({
   selector: 'cre-recipe-info',
@@ -17,15 +17,7 @@ export class RecipeInfoComponent implements AfterViewInit {
     this.isBPacExtensionInstalled = document.querySelectorAll('.bpac-extension-installed').length > 0
   }
 
-  get darkColor(): boolean {
-    // https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
-    const c = this.recipe.color.substring(1)      // strip #
-    const rgb = parseInt(c, 16)   // convert rrggbb to decimal
-    const r = (rgb >> 16) & 0xff  // extract red
-    const g = (rgb >> 8) & 0xff  // extract green
-    const b = (rgb >> 0) & 0xff  // extract blue
-
-    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
-    return luma < 100
+  get isDarkColor(): boolean {
+    return getRecipeLuma(this.recipe) < 100
   }
 }
diff --git a/src/app/modules/colors/pages/list/list.component.html b/src/app/modules/colors/pages/list/list.component.html
index 3d536af..2116ae1 100644
--- a/src/app/modules/colors/pages/list/list.component.html
+++ b/src/app/modules/colors/pages/list/list.component.html
@@ -52,7 +52,7 @@
     <ng-container matColumnDef="color">
       <th mat-header-cell *matHeaderCellDef>Couleur</th>
       <td mat-cell *matCellDef="let recipe">
-        <div class="recipe-color-circle" [class.light-mode]="isLightColor(recipe)"
+        <div class="recipe-color-circle" [class.light-mode]="isLight(recipe)"
              [style.backgroundColor]="recipe.color"></div>
       </td>
     </ng-container>
diff --git a/src/app/modules/colors/pages/list/list.component.ts b/src/app/modules/colors/pages/list/list.component.ts
index 5000b6a..a877447 100644
--- a/src/app/modules/colors/pages/list/list.component.ts
+++ b/src/app/modules/colors/pages/list/list.component.ts
@@ -3,7 +3,7 @@ import {ErrorHandlingComponent} from '../../../shared/components/subscribing.com
 import {RecipeService} from '../../services/recipe.service'
 import {EmployeePermission} from '../../../shared/model/employee'
 import {AccountService} from '../../../accounts/services/account.service'
-import {Recipe} from '../../../shared/model/recipe.model'
+import {getRecipeLuma, Recipe} from '../../../shared/model/recipe.model'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorModel, ErrorService} from '../../../shared/service/error.service'
 
@@ -56,16 +56,8 @@ export class ListComponent extends ErrorHandlingComponent {
     return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
   }
 
-  isLightColor(recipe: Recipe): boolean {
-    // https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
-    const c = recipe.color.substring(1)      // strip #
-    const rgb = parseInt(c, 16)   // convert rrggbb to decimal
-    const r = (rgb >> 16) & 0xff  // extract red
-    const g = (rgb >> 8) & 0xff  // extract green
-    const b = (rgb >> 0) & 0xff  // extract blue
-
-    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
-    return luma > 200
+  isLight(recipe: Recipe): boolean {
+    return getRecipeLuma(recipe) > 200
   }
 
   get hasEditPermission(): boolean {
diff --git a/src/app/modules/shared/model/recipe.model.ts b/src/app/modules/shared/model/recipe.model.ts
index 3355946..9e9c13c 100644
--- a/src/app/modules/shared/model/recipe.model.ts
+++ b/src/app/modules/shared/model/recipe.model.ts
@@ -113,3 +113,14 @@ export function sortMixMaterialsDto(mixMaterials: MixMaterialDto[]): MixMaterial
   return mixMaterials.sort((a, b) => a.position - b.position)
 }
 
+export function getRecipeLuma(recipe: Recipe): number {
+  // https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
+  const c = recipe.color.substring(1)      // strip #
+  const rgb = parseInt(c, 16)   // convert rrggbb to decimal
+  const r = (rgb >> 16) & 0xff  // extract red
+  const g = (rgb >> 8) & 0xff  // extract green
+  const b = (rgb >> 0) & 0xff  // extract blue
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
+}
+