diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index ca540d50670659..e14d461e81b6ed 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -210,6 +210,9 @@ function ColorTool() {
     );
   };
 
+  const COLOR_WIDTH = 156;
+  const SLIDER_WIDTH_CALC = 'calc(100% - 80px)';
+
   const colorPicker = (intent) => {
     const intentInput = state[`${intent}Input`];
     const intentShade = state[`${intent}Shade`];
@@ -229,7 +232,7 @@ function ColorTool() {
         <Box sx={{ display: 'flex', alignItems: 'center', mt: 2, mb: 2 }}>
           <Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
           <Slider
-            sx={{ width: 'calc(100% - 80px)', ml: 3, mr: 3 }}
+            sx={{ width: SLIDER_WIDTH_CALC, ml: 3, mr: 3 }}
             value={intentShade}
             min={0}
             max={13}
@@ -237,7 +240,9 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <div style={{ width: `${COLOR_WIDTH}px` }}>
+            <Typography>{shades[intentShade]}</Typography>
+          </div>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {