Changed color utility functions to maintain color format supplied

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `maxWidth` prop to `EuiTour`, made `subtitle` optional, and fixed heading levels and footer background ([#5225](https://github.com/elastic/eui/pull/5225))
+- Updated `tint`, `shade`, `saturate`, `desaturate`, and `makeHighContrastColor` utility functions to maintain color format supplied ([#5230](https://github.com/elastic/eui/pull/5230))
 
 **Breaking changes**
 

src-docs/src/views/color/color_example.js

@@ -45,7 +45,8 @@ export const ColorExample = {
         <EuiLink to="https://gka.github.io/chroma.js">chroma.js</EuiLink> for
         calculations. This means that most functions accept most Chroma{' '}
         <EuiLink to="https://gka.github.io/chroma.js/#chroma">Color</EuiLink>{' '}
-        types.
+        types. They will all attempt to maintain the color format that was
+        passed in.
       </p>
     </EuiText>
   ),

src-docs/src/views/color/contrast_body.js

@@ -28,6 +28,7 @@ export default () => {
                 title={color}
                 css={css`
                   padding: ${euiTheme.size.base};
+                  background: ${euiTheme.colors.body};
                   border-radius: ${euiTheme.border.radius.small};
                   border: ${euiTheme.border.thin};
                   color: ${color};

src/services/color/contrast.ts

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

src/services/color/manipulation.ts

@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import chroma from 'chroma-js';
+import chroma, { Color } from 'chroma-js';
+import { isValidHex } from './is_valid_hex';
+
+const inOriginalFormat = (originalColor: string, newColor: Color) => {
+  return isValidHex(originalColor) ? newColor.hex() : newColor.css();
+};
 
 /**
  * Makes a color more transparent.
@@ -21,32 +26,40 @@ export const transparentize = (color: string, alpha: number) =>
  * @param color - Color to mix with white
  * @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();
+export const tint = (color: string, ratio: number) => {
+  const tint = chroma.mix(color, '#fff', ratio, 'rgb');
+  return inOriginalFormat(color, tint);
+};
 
 /**
  * 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();
+export const shade = (color: string, ratio: number) => {
+  const shade = chroma.mix(color, '#000', ratio, 'rgb');
+  return inOriginalFormat(color, shade);
+};
 
 /**
  * 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();
+export const saturate = (color: string, amount: number) => {
+  const saturate = chroma(color).set('hsl.s', `+${amount}`);
+  return inOriginalFormat(color, saturate);
+};
 
 /**
  * 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();
+export const desaturate = (color: string, amount: number) => {
+  const desaturate = chroma(color).set('hsl.s', `-${amount}`);
+  return inOriginalFormat(color, desaturate);
+};
 
 /**
  * Returns the lightness value of a color. 0-100