reflex-dev/reflex · error · TypeError

Color is not a valid color.

Error message

Color is not a valid color.

What it means

After unwrapping color/alpha/shade to literals, json() validates their types: color must be str, alpha must be bool, shade must be int. Wrong types produce a malformed CSS var string, so it raises TypeError.

Source

Thrown at packages/reflex-base/src/reflex_base/vars/color.py:165

            The JSON representation of the var.

        Raises:
            TypeError: If the color is not a valid color.
        """
        color, alpha, shade = map(
            get_python_literal,
            (self._var_value.color, self._var_value.alpha, self._var_value.shade),
        )
        if color is None or alpha is None or shade is None:
            msg = "Cannot serialize color that contains non-literal vars."
            raise TypeError(msg)
        if (
            not isinstance(color, str)
            or not isinstance(alpha, bool)
            or not isinstance(shade, int)
        ):
            msg = "Color is not a valid color."
            raise TypeError(msg)
        return f"var(--{color}-{'a' if alpha else ''}{shade})"

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Coerce inputs: shade=int(shade), color=str(color), alpha=bool(alpha)
2. Validate external color input against the expected types before calling rx.color

Example fix

# before
rx.color("grass", alpha=1, shade="5")
# after
rx.color("grass", alpha=True, shade=5)

assert isinstance(color, str) and isinstance(alpha, bool) and isinstance(shade, int), 'invalid color parts'

def is_valid_color_parts(color, alpha, shade) -> bool:
    return isinstance(color, str) and isinstance(alpha, bool) and isinstance(shade, int)

When it happens

Trigger: Passing shade="5" (string), alpha=1 (int instead of bool), or color=123 to rx.color and then serializing it.

Common situations: Colors parsed from config files or user input where types are strings; accidental truthy ints for alpha.

Related errors

• Cannot serialize color that contains non-literal vars.
• The component `{child_name}` can only be a child of the comp
• reflex.Config.plugins must contain Plugin instances, but got
• No valid JSON representation for {self}
• The keys and values of the object must be literal vars to ge

AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/211d03b4276e6534. Report an issue: GitHub.