Change Background Color
change_background_colorModify the background color of a 3D scene using hex codes or predefined color names. Specify a color to update the scene's background instantly.
Instructions
Change the background color of the 3D scene
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| color | Yes | Hex color code (e.g., "#ff0000") or Apple crayon color name (e.g., "maraschino", "turquoise", "lemon"). Available colors: licorice, lead, tungsten, iron, steel, tin, nickel, aluminum, magnesium, silver, mercury, snow, cayenne, mocha, asparagus, fern, clover, moss, teal, ocean, midnight, eggplant, plum, maroon, maraschino, tangerine, lemon, lime, spring, sea foam, turquoise, aqua, blueberry, grape, magenta, strawberry, salmon, cantaloupe, banana, honeydew, flora, spindrift, ice, sky, orchid, lavender, bubblegum, carnation |
Implementation Reference
- server.js:518-547 (handler)The handler function for the 'change_background_color' tool. It normalizes the color input to hex, validates it, sends a 'changeBackgroundColor' command to the browser client via WebSocket, and returns a success or error response.
async ({ color }) => { const hexColor = normalizeColorToHex(color); if (!hexColor) { return { content: [ { type: 'text', text: `Invalid color: ${color}. Please use a hex code (e.g., "#000000") or an Apple crayon color name.` } ], isError: true }; } routeToCurrentSession({ type: 'changeBackgroundColor', color: hexColor }); const displayName = /^#[0-9A-Fa-f]{6}$/.test(color) ? hexColor : `${color} (${hexColor})`; return { content: [ { type: 'text', text: `Background color changed to ${displayName}` } ] }; } ); - server.js:508-547 (registration)Registration of the 'change_background_color' tool using mcpServer.registerTool. Defines the tool's title, description, and input schema (color parameter using the shared colorSchema with Zod validation).
// Register tool: change_background_color mcpServer.registerTool( 'change_background_color', { title: 'Change Background Color', description: 'Change the background color of the 3D scene', inputSchema: { color: colorSchema } }, async ({ color }) => { const hexColor = normalizeColorToHex(color); if (!hexColor) { return { content: [ { type: 'text', text: `Invalid color: ${color}. Please use a hex code (e.g., "#000000") or an Apple crayon color name.` } ], isError: true }; } routeToCurrentSession({ type: 'changeBackgroundColor', color: hexColor }); const displayName = /^#[0-9A-Fa-f]{6}$/.test(color) ? hexColor : `${color} (${hexColor})`; return { content: [ { type: 'text', text: `Background color changed to ${displayName}` } ] }; } ); - server.js:389-407 (schema)The colorSchema Zod validation used by the tool. Accepts hex color codes (#XXXXXX) or Apple crayon color names (case-insensitive, with variations for 'sea foam').
// Zod schema for color input - accepts hex codes or Apple crayon color names const colorSchema = z.string().refine( (val) => { // Accept hex codes if (/^#[0-9A-Fa-f]{6}$/.test(val)) { return true; } // Accept Apple crayon color names (case-insensitive) let normalizedName = val.toLowerCase().trim(); // Handle "sea foam" variations if (normalizedName === 'seafoam' || normalizedName === 'sea-foam') { normalizedName = 'sea foam'; } return appleCrayonColorsHexStrings.has(normalizedName); }, { message: `Must be a hex color code (e.g., "#ff0000") or an Apple crayon color name. Available colors: ${availableColorNames}` } ).describe(`Hex color code (e.g., "#ff0000") or Apple crayon color name (e.g., "maraschino", "turquoise", "lemon"). Available colors: ${availableColorNames}`); - server.js:69-95 (helper)The normalizeColorToHex helper function that converts a color input (hex code or Apple crayon color name) to a normalized hex color code, used by the tool handler.
function normalizeColorToHex(colorInput) { if (!colorInput || typeof colorInput !== 'string') { return null; } // Check if it's already a hex code if (/^#[0-9A-Fa-f]{6}$/.test(colorInput)) { return colorInput.toLowerCase(); } // Normalize the input: lowercase, trim, and handle variations let normalizedName = colorInput.toLowerCase().trim(); // Handle "sea foam" variations (with space, without space, with hyphen) if (normalizedName === 'seafoam' || normalizedName === 'sea-foam') { normalizedName = 'sea foam'; } // Try to find it as an Apple crayon color name const hexColor = appleCrayonColorsHexStrings.get(normalizedName); if (hexColor) { return hexColor.toLowerCase(); } return null; } - src/utils/color/color.js:8-185 (helper)The appleCrayonColorsHexStrings map providing the Apple crayon color palette (48 named colors mapped to hex values), used by normalizeColorToHex and colorSchema validation.
const appleCrayonColorsHexStrings = new Map() .set('licorice', '#000000') .set('lead', '#1E1E1E') .set('tungsten', '#3A3A3A') .set('iron', '#545453') .set('steel', '#6E6E6E') .set('tin', '#878687') .set('nickel', '#888787') .set('aluminum', '#A09FA0') .set('magnesium', '#B8B8B8') .set('silver', '#D0D0D0') .set('mercury', '#E8E8E8') .set('snow', '#FFFFFF') .set('cayenne', '#891100') .set('mocha', '#894800') .set('asparagus', '#888501') .set('fern', '#458401') .set('clover', '#028401') .set('moss', '#018448') .set('teal', '#008688') .set('ocean', '#004A88') .set('midnight', '#001888') .set('eggplant', '#491A88') .set('plum', '#891E88') .set('maroon', '#891648') .set('maraschino', '#FF2101') .set('tangerine', '#FF8802') .set('lemon', '#FFFA03') .set('lime', '#83F902') .set('spring', '#05F802') .set('sea foam', '#03F987') .set('turquoise', '#00FDFF') .set('aqua', '#008CFF') .set('blueberry', '#002EFF') .set('grape', '#8931FF') .set('magenta', '#FF39FF') .set('strawberry', '#FF2987') .set('salmon', '#FF726E') .set('cantaloupe', '#FFCE6E') .set('banana', '#FFFB6D') .set('honeydew', '#CEFA6E') .set('flora', '#68F96E') .set('spindrift', '#68FBD0') .set('ice', '#68FDFF') .set('sky', '#6ACFFF') .set('orchid', '#6E76FF') .set('lavender', '#D278FF') .set('bubblegum', '#FF7AFF') .set('carnation', '#FF7FD3'); // Predefined color categories const colorCategories = { vibrant: [ 'maraschino', 'tangerine', 'lemon', 'lime', 'spring', 'sea foam', 'turquoise', 'aqua', 'blueberry', 'grape', 'magenta', 'strawberry', 'carnation' ], grays: [ 'licorice', 'lead', 'tungsten', 'iron', 'steel', 'tin', 'nickel', 'aluminum', 'magnesium', 'silver', 'mercury', 'snow' ], pastels: [ 'snow', 'salmon', 'cantaloupe', 'banana', 'honeydew', 'flora', 'spindrift', 'ice', 'sky', 'orchid', 'lavender', 'bubblegum', 'carnation' ], earth: [ 'cayenne', 'mocha', 'asparagus', 'fern', 'clover', 'moss', 'teal', 'ocean', 'midnight', 'eggplant', 'plum', 'maroon' ] }; // Color complements mapping const colorComplements = new Map([ // Vibrant colors ['maraschino', 'turquoise'], ['tangerine', 'blueberry'], ['lemon', 'grape'], ['lime', 'magenta'], ['spring', 'strawberry'], ['sea foam', 'carnation'], ['turquoise', 'maraschino'], ['aqua', 'strawberry'], ['blueberry', 'tangerine'], ['grape', 'lemon'], ['magenta', 'lime'], ['strawberry', 'spring'], ['carnation', 'sea foam'], // Pastels ['salmon', 'sky'], ['cantaloupe', 'orchid'], ['banana', 'lavender'], ['honeydew', 'bubblegum'], ['flora', 'ice'], ['spindrift', 'carnation'], ['ice', 'flora'], ['sky', 'salmon'], ['orchid', 'cantaloupe'], ['lavender', 'banana'], ['bubblegum', 'honeydew'], // Earth tones ['cayenne', 'teal'], ['mocha', 'ocean'], ['asparagus', 'midnight'], ['fern', 'eggplant'], ['clover', 'plum'], ['moss', 'maroon'], ['teal', 'cayenne'], ['ocean', 'mocha'], ['midnight', 'asparagus'], ['eggplant', 'fern'], ['plum', 'clover'], ['maroon', 'moss'], // Grays - complement with vibrant colors ['licorice', 'lemon'], ['lead', 'tangerine'], ['tungsten', 'maraschino'], ['iron', 'spring'], ['steel', 'sea foam'], ['tin', 'turquoise'], ['nickel', 'aqua'], ['aluminum', 'blueberry'], ['magnesium', 'grape'], ['silver', 'magenta'], ['mercury', 'strawberry'], ['snow', 'carnation'] ]); // Note: Functions that returned THREE.Color objects have been removed // The server only needs hex strings via appleCrayonColorsHexStrings export { appleCrayonColorsHexStrings, colorComplements };