Changed color utilites to output hex instead of .css() or rgb

src/services/color/contrast.ts

@@ -76,7 +76,7 @@ Background: ${background}`
     }
   }
 
-  return highContrastTextColor;
+  return chroma(highContrastTextColor).hex();
 };
 
 /**

src/services/color/manipulation.ts

@@ -22,31 +22,31 @@ export const transparentize = (color: string, alpha: number) =>
  * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
  */
 export const tint = (color: string, ratio: number) =>
-  chroma.mix(color, '#fff', ratio, 'rgb').css();
+  chroma.mix(color, '#fff', ratio, 'rgb').hex();
 
 /**
  * Mixes a provided color with black.
  * @param color - Color to mix with black
  * @param ratio - Mix weight. From 0-1. Larger value indicates more black.
  */
 export const shade = (color: string, ratio: number) =>
-  chroma.mix(color, '#000', ratio, 'rgb').css();
+  chroma.mix(color, '#000', ratio, 'rgb').hex();
 
 /**
  * Increases the saturation of a color by manipulating the hsl saturation.
  * @param color - Color to manipulate
  * @param amount - Amount to change in absolute terms. 0-1.
  */
 export const saturate = (color: string, amount: number) =>
-  chroma(color).set('hsl.s', `+${amount}`).css();
+  chroma(color).set('hsl.s', `+${amount}`).hex();
 
 /**
  * Decreases the saturation of a color by manipulating the hsl saturation.
  * @param color - Color to manipulate
  * @param amount - Amount to change in absolute terms. 0-1.
  */
 export const desaturate = (color: string, amount: number) =>
-  chroma(color).set('hsl.s', `-${amount}`).css();
+  chroma(color).set('hsl.s', `-${amount}`).hex();
 
 /**
  * Returns the lightness value of a color. 0-100