reflex-dev/reflex · error · ValueError

Color must be one of {COLORS}, received {color}

Error message

Color must be one of {COLORS}, received {color}

What it means

The `rx.color()` helper validates its `color` argument against the fixed palette of Reflex color names (COLORS). Any string that is not one of those names (and not a Var placeholder) is rejected, because the framework compiles the name into a theme lookup like ` Shades.color.8`. Custom CSS colors are not accepted here.

Source

Thrown at packages/reflex-components-core/src/reflex_components_core/core/colors.py:36

    alpha: bool | Var[bool] = False,
) -> Color:
    """Create a color object.

    Args:
        color: The color to use.
        shade: The shade of the color to use.
        alpha: Whether to use the alpha variant of the color.

    Returns:
        The color object.

    Raises:
        ValueError: If the color, shade, or alpha are not valid.
    """
    if isinstance(color, str):
        if color not in COLORS and REFLEX_VAR_OPENING_TAG not in color:
            msg = f"Color must be one of {COLORS}, received {color}"
            raise ValueError(msg)
    elif not isinstance(color, Var):
        msg = "Color must be a string or a Var"
        raise ValueError(msg)

    if isinstance(shade, int):
        if shade < MIN_SHADE_VALUE or shade > MAX_SHADE_VALUE:
            msg = f"Shade must be between {MIN_SHADE_VALUE} and {MAX_SHADE_VALUE}"
            raise ValueError(msg)
    elif not isinstance(shade, Var):
        msg = "Shade must be an integer or a Var"
        raise ValueError(msg)

    if not isinstance(alpha, (bool, Var)):
        msg = "Alpha must be a boolean or a Var"
        raise ValueError(msg)

    return Color(color, shade, alpha)

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Use a valid Reflex palette color name, e.g. rx.color('red', 7)
2. If you need a literal CSS color, pass it directly as the prop value instead of through rx.color() (e.g. background='#ff0000')
3. For dynamic colors, pass a Var (e.g. State.my_color) which bypasses the string check

Example fix

// before
rx.box(background=rx.color('#ff0000'))
// after
rx.box(background=rx.color('red', 7))

from reflex.components.core.colors import COLORS
from reflex.vars import Var

def valid_color(c) -> bool:
    return isinstance(c, Var) or (isinstance(c, str) and (c in COLORS or '{' in c))

When it happens

Trigger: Calling `rx.color('hotpink')`, `rx.color('#ff0000')`, or passing a typo like `rx.color('rede')`. Only names present in the COLORS list (e.g. 'red', 'sky', 'grass') or a Var containing a color are valid.

Common situations: Migrating code that used raw hex/RGB colors to the themed color system; copying color names from CSS/Tailwind that don't exist in Reflex's palette; passing a computed string color variable.

Related errors

• Var-returning `@rx.memo` `{func_name}` cannot depend on embe
• Invalid prop(s) {invalid_fields_str} for {component_name!r}.
• default_color_mode must be one of {allowed_color_modes}, but
• Invalid event chain: {value!s} of type {value._var_type}
• Invalid event: {v}

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