{"record":{"id":"df649328d3c662ed","repo":"reflex-dev/reflex","slug":"color-must-be-one-of-colors-received-color","errorCode":null,"errorMessage":"Color must be one of {COLORS}, received {color}","messagePattern":"Color must be one of (.+?), received (.+?)","errorType":"validation","errorClass":"ValueError","httpStatus":null,"severity":"error","filePath":"packages/reflex-components-core/src/reflex_components_core/core/colors.py","lineNumber":36,"sourceCode":"    alpha: bool | Var[bool] = False,\n) -> Color:\n    \"\"\"Create a color object.\n\n    Args:\n        color: The color to use.\n        shade: The shade of the color to use.\n        alpha: Whether to use the alpha variant of the color.\n\n    Returns:\n        The color object.\n\n    Raises:\n        ValueError: If the color, shade, or alpha are not valid.\n    \"\"\"\n    if isinstance(color, str):\n        if color not in COLORS and REFLEX_VAR_OPENING_TAG not in color:\n            msg = f\"Color must be one of {COLORS}, received {color}\"\n            raise ValueError(msg)\n    elif not isinstance(color, Var):\n        msg = \"Color must be a string or a Var\"\n        raise ValueError(msg)\n\n    if isinstance(shade, int):\n        if shade < MIN_SHADE_VALUE or shade > MAX_SHADE_VALUE:\n            msg = f\"Shade must be between {MIN_SHADE_VALUE} and {MAX_SHADE_VALUE}\"\n            raise ValueError(msg)\n    elif not isinstance(shade, Var):\n        msg = \"Shade must be an integer or a Var\"\n        raise ValueError(msg)\n\n    if not isinstance(alpha, (bool, Var)):\n        msg = \"Alpha must be a boolean or a Var\"\n        raise ValueError(msg)\n\n    return Color(color, shade, alpha)\n","sourceCodeStart":18,"sourceCodeEnd":54,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/packages/reflex-components-core/src/reflex_components_core/core/colors.py#L18-L54","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Use a valid Reflex palette color name, e.g. rx.color('red', 7)","If you need a literal CSS color, pass it directly as the prop value instead of through rx.color() (e.g. background='#ff0000')","For dynamic colors, pass a Var (e.g. State.my_color) which bypasses the string check"],"exampleFix":"// before\nrx.box(background=rx.color('#ff0000'))\n// after\nrx.box(background=rx.color('red', 7))","handlingStrategy":"validation","validationCode":"from reflex.components.core.colors import COLORS\nfrom reflex.vars import Var\n\ndef valid_color(c) -> bool:\n    return isinstance(c, Var) or (isinstance(c, str) and (c in COLORS or '{' in c))","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep a constant list of palette names and validate user-supplied colors against it","Use rx.color only for theme colors; pass raw CSS values directly to props"],"tags":["reflex","color","theming","validation"],"backgroundTag":"invalid-color-value","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}