diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ac144d839..a3646ba851 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 - Add exit code to compile-scss script on failure ([#1024](https://github.com/opensearch-project/oui/pull/1024))
 - Correct file path for import of Query component ([#1069](https://github.com/opensearch-project/oui/pull/1069))
+- Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111))
 
 ### 🚞 Infrastructure
 
diff --git a/src-docs/src/views/guidelines/colors/_utilities.js b/src-docs/src/views/guidelines/colors/_utilities.js
index 8a2a7122c7..ba8e4e9c6a 100644
--- a/src-docs/src/views/guidelines/colors/_utilities.js
+++ b/src-docs/src/views/guidelines/colors/_utilities.js
@@ -11,8 +11,9 @@
 
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../../components';
-import { calculateContrast, rgbToHex } from '../../../../../src/services';
+import { calculateContrast } from '../../../../../src/services';
 import { getSassVars } from '../_get_sass_vars';
+import { hexToRgb } from '../../../../../src/services/color/hex_to_rgb';
 
 import { OuiBadge, OuiCopy, OuiFlexItem } from '../../../../../src/components';
 import { OuiIcon } from '../../../../../src/components/icon';
@@ -74,8 +75,8 @@ export const ratingAll = <OuiBadge color="#eee">ALL</OuiBadge>;
 
 function getContrastRatings(background, foreground, palette) {
   const contrast = calculateContrast(
-    [palette[background].r, palette[background].g, palette[background].b],
-    [palette[foreground].r, palette[foreground].g, palette[foreground].b]
+    hexToRgb(palette[background]),
+    hexToRgb(palette[foreground])
   );
 
   let contrastRating;
@@ -151,8 +152,8 @@ color: $${foreground};`;
             onClickAriaLabel="Click to copy SASS configurations"
             disabled={!contastIsAcceptableToCopy}
             style={{
-              backgroundColor: palette[background].rgba,
-              color: palette[foreground].rgba,
+              backgroundColor: palette[background],
+              color: palette[foreground],
             }}>
             {foreground}
           </OuiBadge>
@@ -161,8 +162,3 @@ color: $${foreground};`;
     </OuiFlexItem>
   );
 };
-
-export function getHexValueFromColorName(palette, colorName, key) {
-  const hex = key ? palette[colorName][key] : palette[colorName];
-  return rgbToHex(hex.rgba).toUpperCase();
-}
diff --git a/src-docs/src/views/guidelines/colors/color_section.js b/src-docs/src/views/guidelines/colors/color_section.js
index 3def069a06..9a0f499fc6 100644
--- a/src-docs/src/views/guidelines/colors/color_section.js
+++ b/src-docs/src/views/guidelines/colors/color_section.js
@@ -23,7 +23,6 @@ import {
   OuiPanel,
 } from '../../../../../src/components';
 import {
-  getHexValueFromColorName,
   ColorsContrastItem,
   allowedColors,
   textVariants,
@@ -40,7 +39,7 @@ export const ColorSection = ({
   const theme = useContext(ThemeContext).theme;
   const palette = getSassVars(theme);
   const colorsForContrast = showTextVariants ? textVariants : allowedColors;
-  const hex = getHexValueFromColorName(palette, color);
+  const hex = palette[color];
   const iconClass =
     color.includes('Lightest') ||
     color.includes('Empty') ||
diff --git a/src-docs/src/views/guidelines/colors/core_palette.js b/src-docs/src/views/guidelines/colors/core_palette.js
index 3d9eaee275..711d576e07 100644
--- a/src-docs/src/views/guidelines/colors/core_palette.js
+++ b/src-docs/src/views/guidelines/colors/core_palette.js
@@ -20,7 +20,6 @@ import {
   OuiScreenReaderOnly,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export function scrollToSelector(selector, attempts = 5) {
   const element = document.querySelector(selector);
@@ -46,7 +45,7 @@ export const CorePalette = ({ theme, colors }) => {
       <OuiFlexItem key={index} grow={false}>
         <OuiCopy
           title={`$${color}:
-          ${rgbToHex(hex.rgba).toUpperCase()}`}
+          ${hex}`}
           beforeMessage={
             <small>
               <kbd>Click</kbd> to copy color name
@@ -66,7 +65,7 @@ export const CorePalette = ({ theme, colors }) => {
                 className={iconClass}
                 size="xxl"
                 type="stopFilled"
-                color={rgbToHex(hex.rgba)}
+                color={hex}
               />
               <OuiScreenReaderOnly>
                 <span>{color}</span>
diff --git a/src-docs/src/views/guidelines/colors/vis_palette.js b/src-docs/src/views/guidelines/colors/vis_palette.js
index 663a64616c..790349e4e1 100644
--- a/src-docs/src/views/guidelines/colors/vis_palette.js
+++ b/src-docs/src/views/guidelines/colors/vis_palette.js
@@ -21,9 +21,9 @@ import {
   OuiText,
   OuiPanel,
 } from '../../../../../src/components';
-import { rgbToHex } from '../../../../../src/services';
 
 export const VisPalette = ({ variant }) => {
+  // ouiPaletteColorBlind() is currently shared across themes and dark/light modes. This will need to be  made dynamic once we have different visualization palettes as in https://github.com/opensearch-project/oui/issues/818
   const visColors = getSassVars('light').ouiPaletteColorBlind;
   const visColorKeys = Object.keys(getSassVars('light').ouiPaletteColorBlind);
 
@@ -41,7 +41,7 @@ export const VisPalette = ({ variant }) => {
                   onClick={copy}
                   size="xl"
                   type="stopFilled"
-                  color={rgbToHex(hex.rgba)}
+                  color={hex}
                 />
               )}
             </OuiCopy>
@@ -54,7 +54,7 @@ export const VisPalette = ({ variant }) => {
           <OuiFlexItem>
             <OuiText size="s" color="subdued">
               <p>
-                <code>{rgbToHex(hex.rgba).toUpperCase()}</code>
+                <code>{hex}</code>
               </p>
             </OuiText>
           </OuiFlexItem>
diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
index f6c2836884..a3d060f784 100644
--- a/src-docs/src/views/guidelines/sass.js
+++ b/src-docs/src/views/guidelines/sass.js
@@ -14,7 +14,6 @@ import sizes from '!!variables-from-scss!!../../../../src/global_styling/variabl
 import zindexs from '!!variables-from-scss!!../../../../src/global_styling/variables/_z_index.scss';
 import animations from '!!variables-from-scss!!../../../../src/global_styling/variables/_animations.scss';
 import breakpoints from '!!variables-from-scss!!../../../../src/global_styling/variables/_responsive.scss';
-import { rgbToHex } from '../../../../src/services';
 
 import { Link } from 'react-router-dom';
 
@@ -113,7 +112,7 @@ function renderPaletteColor(palette, color) {
       <OuiFlexItem grow={false}>
         <div
           className="guideSass__swatch"
-          style={{ background: rgbToHex(palette[color].rgba).toUpperCase() }}
+          style={{ background: palette[color] }}
         />
       </OuiFlexItem>
       <OuiFlexItem grow={false}>
diff --git a/wiki/consuming.md b/wiki/consuming.md
index c683a4d68b..22d2dfbe84 100644
--- a/wiki/consuming.md
+++ b/wiki/consuming.md
@@ -91,7 +91,7 @@ If you want to use the new, but in progress Next theme, you can import it simila
 
 ### Using Sass to customize OUI
 
-OUI's Sass themes are token based, which can be altered to suite your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
+OUI's Sass themes are token based, which can be altered to suit your theming needs like changing the primary color. Simply declare your token overrides before importing the whole OUI theme. This will re-compile **all of the OUI components** with your colors.
 
 *Do not use in conjunction with the compiled CSS.*