I would like to know if there is some way to get a hexcode or any color code from a palette color name in Material UI?

My use case is as follows:

I have a styled Badge that I would like to be able to customize as with the normal badges with the color property. So my component looks like this:

import { styled, alpha } from "@mui/material/styles";
import Badge, { BadgeProps } from "@mui/material/Badge";

const PulsingBadge = styled(Badge)<BadgeProps>(({ theme, color }) => ({
  position: "relative",
  "&:before": {
    content: '""',
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "5px",
    height: "5px",
    borderRadius: "50%",
    background: color,
    opacity: 0.7,
    animation: `pulsing 1500ms ${theme.transitions.easing.easeOut} infinite`,
  },
  "@keyframes pulsing": {
    "0%": {
      width: "5px",
      height: "5px",
      opacity: 0.7,
    },
    "70%": {
      width: "24px",
      height: "24px",
      opacity: 0.05,
    },
    "100%": {
      width: "26px",
      height: "26px",
      opacity: 0.0,
    },
  },
}));

export default PulsingBadge;

It’s that line in particular that’s important:

background: color,

but this results in compiling background: warning which is obviously not recognized as a color. Also if I try using a method like alpha(color, 0.5), I get the following error as well:

MUI: Unsupported warning color. The following formats are supported:
#nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

I was wondering if there was something like a getter from the palette like theme.palette.get(color). I tried theme.palette[color] but since apparently the color property can be undefined, I get the following error:

Type ‘undefined’ cannot be used as an index

I feel like I am missing something because this feels like a very basic feature that is probably included in MUI but I can’t seem to find the solution anywhere…

Thanks for your help!