diff --git a/src/files-ui/core/color/colors.ts b/src/files-ui/core/color/colors.ts
index 738dfbaa51bfa21e3d1dca845602bcd497dfa596..c0714f1b0d7e56ab4125a0d08e1c27321cd3b3aa 100644
--- a/src/files-ui/core/color/colors.ts
+++ b/src/files-ui/core/color/colors.ts
@@ -5,7 +5,7 @@ import { NAMED_COLORS } from "./namedColors";
  * @param colorInput 
  * @returns the darked color in
  */
- export const darkerColor = (colorInput: string, percentage = 25): string => {
+export const darkerColor = (colorInput: string, percentage = 25): string => {
     let darkedColor = "";
     const reduce = (100 - percentage) / 100;
     let component1: number = 0;
@@ -206,11 +206,26 @@ export const hexTodec = (letter: string): number => {
  * @param color param color given by user
  * @returns returns the same color 
  */
- export const asureColor = (color?: string): string => {
+export const asureColor = (color?: string): string => {
     if (color !== undefined && color !== "") {
         return color;
     } else {
-        return "#646c7f";
+        return DEFAULT_FONT_COLOR;
     }
 }
+/** 
+ * Asure a base color. When not given or when given an incorrect color format
+ * default color is this kind of grey #5d6475
+ * 
+ * @param color param color given by user
+ * @returns returns the same color 
+ */
+export const completeAsureColor = (color?: string, perc = 1): string => {
+
+    return hexColorToRGB(asureColor(colourNameToHex(color)), perc);
+
+}
+
+
 
+export const DEFAULT_FONT_COLOR = "#646c7f";
\ No newline at end of file
diff --git a/src/files-ui/core/color/index.ts b/src/files-ui/core/color/index.ts
index e7974729faf961a211c7b8939a3da9f60c19d043..6b33c40aefc4bddf0d41bb7d19e768b27b46be09 100644
--- a/src/files-ui/core/color/index.ts
+++ b/src/files-ui/core/color/index.ts
@@ -6,5 +6,6 @@ export {
     darkerColor,
     hexColorToRGB,
     hexTodec,
-    isHexColor
+    isHexColor,
+    completeAsureColor
 } from "./colors";
\ No newline at end of file
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index 0c918711726ce820aca4736f3bf15383de4348f8..32369769054827152abe0cb596200a6893c46d51 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -163,7 +163,8 @@ export {
     hexColorToRGB,
     hexTodec,
     isHexColor,
-    NAMED_COLORS
+    NAMED_COLORS,
+    completeAsureColor
 } from "./color";
 
 export {
diff --git a/src/files-ui/core/ripple/ripple.ts b/src/files-ui/core/ripple/ripple.ts
index a28249199325bb1aa8d4cb70d6fbe50fac4b48c2..aa52e4177c1f209af8d7c165c3adb825466cbb47 100644
--- a/src/files-ui/core/ripple/ripple.ts
+++ b/src/files-ui/core/ripple/ripple.ts
@@ -1,8 +1,7 @@
-import { asureColor, colourNameToHex, hexColorToRGB } from "../color";
+import { completeAsureColor, hexColorToRGB } from "../color";
 
 const asureRippleColor = (color: string): string => {
-  return hexColorToRGB(
-    asureColor(colourNameToHex(color)),
+  return completeAsureColor(color,
     0.4
   );
 }
@@ -69,10 +68,7 @@ export function createRippleButton<
   circle.classList.add("ripple");
 
   if (variant !== "contained") {
-    circle.style.backgroundColor = hexColorToRGB(
-      asureColor(colourNameToHex(color)),
-      0.4
-    );
+    circle.style.backgroundColor = asureRippleColor(color);
   } else {
 
     circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);