MCP Color Server

ColorMcp
docs
api-generated

index.html•68.1 kB

<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MCP Color Server API Documentation - v0.1.0</title><meta name="description" content="Documentation for MCP Color Server API Documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">MCP Color Server API Documentation - v0.1.0</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>MCP Color Server API Documentation - v0.1.0</h1></div><div class="tsd-panel tsd-typography"><h1 id="mcp-color-server" class="tsd-anchor-link">MCP Color Server<a href="#mcp-color-server" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1>A comprehensive DeveloperTools Server and MCP that provides advanced color manipulation, palette generation, gradient creation, and visualization capabilities to AI applications. <h2 id="features" class="tsd-anchor-link">Features<a href="#features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> <li>Comprehensive Color Format Support: Convert between 22+ formats including HEX, RGB, HSL, HSV, HWB, CMYK, LAB, XYZ, LCH, OKLAB, OKLCH, and named colors</li> <li>Framework Integration: Native support for CSS variables, SCSS, Tailwind classes, Swift UIColor, Android Color, and Flutter Color formats</li> <li>High-Precision Conversion: Configurable precision up to 10 decimal places for scientific and professional applications</li> <li>Palette Generation: Create harmonious color palettes based on color theory principles</li> <li>Gradient Creation: Generate linear, radial, and conic gradients with advanced interpolation</li> <li>Accessibility Compliance: WCAG 2.1 AA/AAA contrast checking and colorblind simulation</li> <li>Dual Background Visualization: Create interactive HTML and high-quality PNG visualizations with both light and dark background variants</li> <li>Export Formats: Generate CSS, SCSS, Tailwind CSS, and JSON exports for seamless integration</li> <li>Theme Generation: Generate complete design system themes with semantic color mapping</li> <li>Performance Optimized: Sub-100ms response times for all color operations with intelligent caching</li> </ul> <h2 id="installation" class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="prerequisites" class="tsd-anchor-link">Prerequisites<a href="#prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Node.js 18.0.0 or higher</li> <li>npm or yarn package manager</li> </ul> <h3 id="install-dependencies" class="tsd-anchor-link">Install Dependencies<a href="#install-dependencies" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash">npm install </code><button type="button">Copy</button></pre> <h3 id="development-setup" class="tsd-anchor-link">Development Setup<a href="#development-setup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"># Install dependencies npm install # Build the project npm run build # Run in development mode npm run dev # Run tests npm test # Run tests with coverage npm run test:coverage # Lint code npm run lint # Format code npm run format </code><button type="button">Copy</button></pre> <h2 id="usage" class="tsd-anchor-link">Usage<a href="#usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="as-an-mcp-server" class="tsd-anchor-link">As an MCP Server<a href="#as-an-mcp-server" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>The color server implements the Model Context Protocol and can be used with any MCP-compatible client. <h4 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4>Add to your MCP client configuration: <pre><code class="json">{ "mcpServers": { "color": { "command": "node", "args": ["path/to/mcp-color-server/dist/index.js"] } } } </code><button type="button">Copy</button></pre> <h4 id="available-tools" class="tsd-anchor-link">Available Tools<a href="#available-tools" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><ul> <li><code>convert_color</code>: Convert colors between different formats</li> <li><code>analyze_color</code>: Analyze color properties (brightness, contrast, temperature)</li> <li><code>generate_harmony_palette</code>: Create color palettes based on harmony principles</li> <li><code>generate_gradient</code>: Create CSS gradients with advanced options</li> <li><code>check_contrast</code>: Verify WCAG accessibility compliance</li> <li><code>create_palette_html</code>: Generate interactive HTML visualizations</li> <li><code>create_palette_png</code>: Generate high-quality PNG images</li> <li><code>export_css</code>: Generate modern CSS with custom properties and utility classes</li> <li><code>export_scss</code>: Generate SCSS variables, maps, and mixins</li> <li><code>export_tailwind</code>: Generate Tailwind CSS configuration and utility classes</li> <li><code>export_json</code>: Generate JSON format for programmatic use and API integration</li> </ul> <h2 id="api" class="tsd-anchor-link">API<a href="#api" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="mcp-protocol" class="tsd-anchor-link">MCP Protocol<a href="#mcp-protocol" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>The server implements the Model Context Protocol (MCP) specification and provides the following endpoints: <h4 id="tool-discovery" class="tsd-anchor-link">Tool Discovery<a href="#tool-discovery" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {} } </code><button type="button">Copy</button></pre> <h4 id="tool-execution" class="tsd-anchor-link">Tool Execution<a href="#tool-execution" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "convert_color", "arguments": { "color": "#FF0000", "output_format": "hsl" } } } </code><button type="button">Copy</button></pre> <h3 id="response-format" class="tsd-anchor-link">Response Format<a href="#response-format" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>All tools return responses in this standardized format: <pre><code class="json">{ "success": true, "data": { "converted": "hsl(0, 100%, 50%)", "original": "#FF0000" }, "metadata": { "execution_time": 15, "color_space_used": "sRGB", "accessibility_notes": [], "recommendations": [] }, "visualizations": { "html": "<!DOCTYPE html>...", "png_base64": "iVBORw0KGgoAAAANSUhEUgAA..." }, "export_formats": { "css": ":root { --color: #FF0000; }", "scss": "$color: #FF0000;", "tailwind": "{ colors: { custom: '#FF0000' } }", "json": { "hex": "#FF0000", "rgb": "rgb(255, 0, 0)" } } } </code><button type="button">Copy</button></pre> <h2 id="supported-color-formats" class="tsd-anchor-link">Supported Color Formats<a href="#supported-color-formats" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="input-formats" class="tsd-anchor-link">Input Formats<a href="#input-formats" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>The MCP Color Server accepts colors in any of these formats: <h4 id="standard-web-formats" class="tsd-anchor-link">Standard Web Formats<a href="#standard-web-formats" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><ul> <li>HEX: <code>#FF0000</code>, <code>#F00</code>, <code>FF0000</code>, <code>F00</code></li> <li>RGB: <code>rgb(255, 0, 0)</code>, <code>255, 0, 0</code>, <code>255 0 0</code>, <code>[255, 0, 0]</code></li> <li>RGBA: <code>rgba(255, 0, 0, 0.5)</code></li> <li>HSL: <code>hsl(0, 100%, 50%)</code>, <code>0, 100%, 50%</code></li> <li>HSLA: <code>hsla(0, 100%, 50%, 0.8)</code></li> <li>HSV/HSB: <code>hsv(0, 100%, 100%)</code>, <code>hsb(0, 100%, 100%)</code></li> <li>HSVA: <code>hsva(0, 100%, 100%, 0.7)</code></li> </ul> <h4 id="advanced-color-spaces" class="tsd-anchor-link">Advanced Color Spaces<a href="#advanced-color-spaces" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><ul> <li>HWB: <code>hwb(0, 0%, 0%)</code></li> <li>CMYK: <code>cmyk(0%, 100%, 100%, 0%)</code></li> <li>LAB: <code>lab(53.23, 80.11, 67.22)</code></li> <li>XYZ: <code>xyz(41.24, 21.26, 1.93)</code></li> <li>LCH: <code>lch(53.23, 104.55, 40.85)</code></li> <li>OKLAB: <code>oklab(0.628, 0.225, 0.126)</code></li> <li>OKLCH: <code>oklch(0.628, 0.258, 29.23)</code></li> </ul> <h4 id="named-colors" class="tsd-anchor-link">Named Colors<a href="#named-colors" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><ul> <li>CSS Named Colors: <code>red</code>, <code>blue</code>, <code>forestgreen</code>, <code>lightsteelblue</code>, etc.</li> </ul> <h3 id="output-formats" class="tsd-anchor-link">Output Formats<a href="#output-formats" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>Convert to any of these formats with configurable precision: <h4 id="web-development" class="tsd-anchor-link">Web Development<a href="#web-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "color": "#FF0000", "output_format": "hex" } // Result: "#ff0000" { "color": "#FF0000", "output_format": "rgb" } // Result: "rgb(255, 0, 0)" { "color": "#FF0000", "output_format": "hsl", "precision": 1 } // Result: "hsl(0.0, 100.0%, 50.0%)" </code><button type="button">Copy</button></pre> <h4 id="css-variables" class="tsd-anchor-link">CSS Variables<a href="#css-variables" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "color": "#FF0000", "output_format": "css-var", "variable_name": "primary-color" } // Result: "--primary-color: #ff0000;" { "color": "#FF0000", "output_format": "scss-var", "variable_name": "accent_color" } // Result: "$accent_color: #ff0000;" </code><button type="button">Copy</button></pre> <h4 id="mobile-development" class="tsd-anchor-link">Mobile Development<a href="#mobile-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "color": "#FF0000", "output_format": "swift", "precision": 3 } // Result: "UIColor(red: 1.000, green: 0.000, blue: 0.000, alpha: 1.000)" { "color": "#FF0000", "output_format": "android" } // Result: "Color.parseColor(\"#FFFF0000\")" { "color": "#FF0000", "output_format": "flutter" } // Result: "Color(0xFFFF0000)" </code><button type="button">Copy</button></pre> <h4 id="framework-integration" class="tsd-anchor-link">Framework Integration<a href="#framework-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "color": "#FF0000", "output_format": "tailwind" } // Result: "red-500" </code><button type="button">Copy</button></pre> <h4 id="scientificprofessional" class="tsd-anchor-link">Scientific/Professional<a href="#scientificprofessional" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="json">{ "color": "#FF0000", "output_format": "lab", "precision": 6 } // Result: "lab(53.230000, 80.110000, 67.220000)" { "color": "#FF0000", "output_format": "oklab", "precision": 8 } // Result: "oklab(0.62800000, 0.22500000, 0.12600000)" </code><button type="button">Copy</button></pre> <h3 id="usage-examples" class="tsd-anchor-link">Usage Examples<a href="#usage-examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><h4 id="basic-color-conversion" class="tsd-anchor-link">Basic Color Conversion<a href="#basic-color-conversion" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript">// Convert HEX to RGB { "tool": "convert_color", "parameters": { "color": "#FF0000", "output_format": "rgb" } } // Convert RGB to HSL with high precision { "tool": "convert_color", "parameters": { "color": "rgb(255, 128, 64)", "output_format": "hsl", "precision": 4 } } </code><button type="button">Copy</button></pre> <h4 id="advanced-color-space-conversions" class="tsd-anchor-link">Advanced Color Space Conversions<a href="#advanced-color-space-conversions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript">// Convert to LAB color space for perceptual uniformity { "tool": "convert_color", "parameters": { "color": "#FF8040", "output_format": "lab", "precision": 3 } } // Convert to OKLCH for modern color workflows { "tool": "convert_color", "parameters": { "color": "hsl(25, 100%, 69%)", "output_format": "oklch", "precision": 5 } } </code><button type="button">Copy</button></pre> <h4 id="framework-specific-outputs" class="tsd-anchor-link">Framework-Specific Outputs<a href="#framework-specific-outputs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript">// Generate Swift UIColor { "tool": "convert_color", "parameters": { "color": "#2563eb", "output_format": "swift", "precision": 3 } } // Generate Tailwind CSS class { "tool": "convert_color", "parameters": { "color": "#ef4444", "output_format": "tailwind" } } // Generate CSS custom property { "tool": "convert_color", "parameters": { "color": "#10b981", "output_format": "css-var", "variable_name": "success-color" } } </code><button type="button">Copy</button></pre> <h4 id="export-format-generation" class="tsd-anchor-link">Export Format Generation<a href="#export-format-generation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4>Generate complete stylesheets and configuration files: <pre><code class="javascript">// Generate CSS with custom properties { "tool": "export_css", "parameters": { "colors": ["#2563eb", "#ef4444", "#10b981"], "format": "both", "semantic_names": ["primary", "error", "success"], "include_rgb_hsl": true } } // Generate SCSS with mixins { "tool": "export_scss", "parameters": { "colors": ["#2563eb", "#ef4444"], "format": "all", "include_functions": true, "namespace": "theme" } } // Generate Tailwind config { "tool": "export_tailwind", "parameters": { "colors": ["#2563eb"], "include_shades": true, "semantic_names": ["primary"] } } // Generate JSON with metadata { "tool": "export_json", "parameters": { "colors": ["#2563eb", "#ef4444"], "format": "detailed", "include_accessibility": true, "group_name": "Brand Colors" } } </code><button type="button">Copy</button></pre> <h3 id="performance-characteristics" class="tsd-anchor-link">Performance Characteristics<a href="#performance-characteristics" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Single Conversions: < 100ms response time</li> <li>Batch Operations: < 20ms average per conversion</li> <li>High Precision: Up to 10 decimal places without performance impact</li> <li>Memory Efficient: Optimized for concurrent operations</li> <li>Caching: Intelligent caching for frequently converted colors</li> </ul> <h3 id="direct-usage" class="tsd-anchor-link">Direct Usage<a href="#direct-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="typescript">import { ColorServer } from './src/server.js'; const server = new ColorServer(); // Server usage examples will be added as implementation progresses </code><button type="button">Copy</button></pre> <h2 id="development" class="tsd-anchor-link">Development<a href="#development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="project-structure" class="tsd-anchor-link">Project Structure<a href="#project-structure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code>mcp-color-server/ ├── src/ # Source code │ ├── server.ts # Main MCP server implementation │ ├── tools/ # Tool implementations │ ├── validation/ # Input validation schemas │ ├── types/ # TypeScript type definitions │ └── utils/ # Utility functions ├── tests/ # Test files ├── docs/ # Documentation ├── examples/ # Usage examples └── dist/ # Compiled output </code><button>Copy</button></pre> <h3 id="code-quality" class="tsd-anchor-link">Code Quality<a href="#code-quality" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>This project maintains high code quality standards with automated Git hooks: <ul> <li>Pre-commit Hooks: Automatic linting, formatting, and type checking on staged files</li> <li>Pre-push Hooks: Full test suite with 90%+ coverage requirements and build verification</li> <li>Commit Message Validation: Enforces conventional commit format</li> <li>Zero-Defect Policy: No TypeScript errors, ESLint warnings, or failing tests allowed</li> </ul> See <a href="media/husky-setup.md">Husky Setup Documentation</a> for detailed information about our Git hooks. <ul> <li>TypeScript: Strict mode enabled with comprehensive type checking</li> <li>ESLint: Enforces code style and catches potential issues</li> <li>Prettier: Automatic code formatting</li> <li>Jest: Comprehensive test suite with 90%+ coverage requirement</li> <li>Continuous Integration: Automated testing and quality checks</li> </ul> <h3 id="contributing" class="tsd-anchor-link">Contributing<a href="#contributing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>Please read <a href="media/contributing.md">docs/contributing.md</a> for details on our code of conduct and the process for submitting pull requests. <h3 id="testing" class="tsd-anchor-link">Testing<a href="#testing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"># Run all tests npm test # Run tests in watch mode npm run test:watch # Run tests with coverage report npm run test:coverage # Run specific test file npm test -- server.test.ts </code><button type="button">Copy</button></pre> <h3 id="building" class="tsd-anchor-link">Building<a href="#building" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="bash"># Clean previous build npm run clean # Build for production npm run build # Type check without building npm run type-check </code><button type="button">Copy</button></pre> <h2 id="license" class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>This project is licensed under the MIT License - see the <a href="media/LICENSE">LICENSE</a> file for details. <h2 id="contributing-1" class="tsd-anchor-link">Contributing<a href="#contributing-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>We welcome contributions! Please see <a href="media/contributing.md">docs/contributing.md</a> for guidelines. <h2 id="code-of-conduct" class="tsd-anchor-link">Code of Conduct<a href="#code-of-conduct" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>This project adheres to a <a href="media/code-of-conduct.md">Code of Conduct</a>. By participating, you are expected to uphold this code. <h2 id="support" class="tsd-anchor-link">Support<a href="#support" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> <li>Issues: <a href="https://github.com/keyurgolani/ColorMcp/issues">GitHub Issues</a></li> <li>Discussions: <a href="https://github.com/keyurgolani/ColorMcp/discussions">GitHub Discussions</a></li> <li>Documentation: <a href="media/docs">docs/</a> <ul> <li><a href="media/export-formats-guide.md">Export Formats Guide</a></li> <li><a href="media/color-theory-guide.md">Color Theory Guide</a></li> <li><a href="media/accessibility-guide.md">Accessibility Guide</a></li> </ul> </li> </ul> <h2 id="production-deployment" class="tsd-anchor-link">Production Deployment<a href="#production-deployment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="system-requirements" class="tsd-anchor-link">System Requirements<a href="#system-requirements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Node.js: 18.0.0 or higher</li> <li>Memory: 512MB minimum, 2GB recommended</li> <li>CPU: 1 core minimum, 2+ cores recommended for high load</li> <li>Storage: 100MB for application, additional space for logs and cache</li> </ul> <h3 id="performance-characteristics-1" class="tsd-anchor-link">Performance Characteristics<a href="#performance-characteristics-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Response Times: < 100ms for color conversions, < 2s for complex visualizations</li> <li>Throughput: 50+ concurrent requests supported</li> <li>Memory Usage: < 100MB per request, intelligent caching and cleanup</li> <li>Reliability: 99.9% uptime with proper deployment and monitoring</li> </ul> <h3 id="deployment-options" class="tsd-anchor-link">Deployment Options<a href="#deployment-options" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><h4 id="docker-deployment" class="tsd-anchor-link">Docker Deployment<a href="#docker-deployment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="bash"># Build Docker image docker build -t mcp-color-server . # Run container docker run -d \ --name mcp-color-server \ -e NODE_ENV=production \ -e LOG_LEVEL=info \ -p 3000:3000 \ mcp-color-server </code><button type="button">Copy</button></pre> <h4 id="pm2-deployment" class="tsd-anchor-link">PM2 Deployment<a href="#pm2-deployment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="bash"># Install PM2 globally npm install -g pm2 # Start with PM2 pm2 start ecosystem.config.js # Save PM2 configuration pm2 save pm2 startup </code><button type="button">Copy</button></pre> <h4 id="systemd-service" class="tsd-anchor-link">Systemd Service<a href="#systemd-service" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="bash"># Copy service file sudo cp mcp-color-server.service /etc/systemd/system/ # Enable and start service sudo systemctl enable mcp-color-server sudo systemctl start mcp-color-server </code><button type="button">Copy</button></pre> <h3 id="monitoring-and-maintenance" class="tsd-anchor-link">Monitoring and Maintenance<a href="#monitoring-and-maintenance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Health Checks: Built-in health endpoint at <code>/health</code></li> <li>Metrics: Performance metrics and resource usage tracking</li> <li>Logging: Structured JSON logging with configurable levels</li> <li>Alerts: Memory usage, response time, and error rate monitoring</li> </ul> <h2 id="security" class="tsd-anchor-link">Security<a href="#security" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="security-features" class="tsd-anchor-link">Security Features<a href="#security-features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Input Validation: Comprehensive validation for all color formats and parameters</li> <li>XSS Prevention: Sanitization of generated HTML, CSS, and SVG content</li> <li>Rate Limiting: Built-in rate limiting for expensive operations</li> <li>Resource Protection: Memory limits, processing timeouts, and cleanup</li> <li>Audit Logging: Security-relevant events logged without exposing sensitive data</li> </ul> <h3 id="security-best-practices" class="tsd-anchor-link">Security Best Practices<a href="#security-best-practices" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ol> <li>Run with minimal privileges: Use dedicated user account</li> <li>Network security: Run behind reverse proxy with HTTPS</li> <li>Resource limits: Configure appropriate memory and CPU limits</li> <li>Regular updates: Keep dependencies updated for security patches</li> <li>Monitoring: Monitor for suspicious activity and resource usage</li> </ol> <h3 id="vulnerability-reporting" class="tsd-anchor-link">Vulnerability Reporting<a href="#vulnerability-reporting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>Report security vulnerabilities privately to: <a href="mailto:security@mcp-color-server.org">security@mcp-color-server.org</a> See <a href="media/security.md">docs/security.md</a> for detailed security policy and reporting procedures. <h2 id="roadmap" class="tsd-anchor-link">Roadmap<a href="#roadmap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="current-version-010" class="tsd-anchor-link">Current Version (0.1.0)<a href="#current-version-010" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>✅ Complete color format conversion system</li> <li>✅ Palette generation with color theory algorithms</li> <li>✅ Gradient creation and visualization</li> <li>✅ Theme generation and semantic color mapping</li> <li>✅ Accessibility compliance tools</li> <li>✅ HTML and PNG visualization generation</li> <li>✅ Export formats (CSS, SCSS, Tailwind, JSON)</li> <li>✅ Performance optimization and caching</li> <li>✅ Security hardening and input validation</li> </ul> <h3 id="planned-features-future-releases" class="tsd-anchor-link">Planned Features (Future Releases)<a href="#planned-features-future-releases" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>🔄 3D color space visualizations</li> <li>🔄 Color animation and transitions</li> <li>🔄 Advanced image color extraction</li> <li>🔄 Educational content and tutorials</li> <li>🔄 Plugin architecture for custom algorithms</li> <li>🔄 RESTful API endpoints</li> <li>🔄 Advanced gradient types (mesh, conic)</li> <li>🔄 Mobile framework integrations</li> </ul> <h3 id="community-contributions-welcome" class="tsd-anchor-link">Community Contributions Welcome<a href="#community-contributions-welcome" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> <li>Color theory algorithm improvements</li> <li>New export format support</li> <li>Performance optimizations</li> <li>Documentation enhancements</li> <li>Test coverage improvements</li> <li>Accessibility features</li> </ul> </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility">Member Visibility<ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Inherited</label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#mcp-color-server">MCP Color Server</a><ul><li><a href="#features">Features</a></li><li><a href="#installation">Installation</a></li><li><ul><li><a href="#prerequisites">Prerequisites</a></li><li><a href="#install-dependencies">Install Dependencies</a></li><li><a href="#development-setup">Development Setup</a></li></ul></li><li><a href="#usage">Usage</a></li><li><ul><li><a href="#as-an-mcp-server">As an MCP Server</a></li><li><ul><li><a href="#configuration">Configuration</a></li><li><a href="#available-tools">Available Tools</a></li></ul></li></ul></li><li><a href="#api">API</a></li><li><ul><li><a href="#mcp-protocol">MCP Protocol</a></li><li><ul><li><a href="#tool-discovery">Tool Discovery</a></li><li><a href="#tool-execution">Tool Execution</a></li></ul></li><li><a href="#response-format">Response Format</a></li></ul></li><li><a href="#supported-color-formats">Supported Color Formats</a></li><li><ul><li><a href="#input-formats">Input Formats</a></li><li><ul><li><a href="#standard-web-formats">Standard Web Formats</a></li><li><a href="#advanced-color-spaces">Advanced Color Spaces</a></li><li><a href="#named-colors">Named Colors</a></li></ul></li><li><a href="#output-formats">Output Formats</a></li><li><ul><li><a href="#web-development">Web Development</a></li><li><a href="#css-variables">CSS Variables</a></li><li><a href="#mobile-development">Mobile Development</a></li><li><a href="#framework-integration">Framework Integration</a></li><li><a href="#scientificprofessional">Scientific/Professional</a></li></ul></li><li><a href="#usage-examples">Usage Examples</a></li><li><ul><li><a href="#basic-color-conversion">Basic Color Conversion</a></li><li><a href="#advanced-color-space-conversions">Advanced Color Space Conversions</a></li><li><a href="#framework-specific-outputs">Framework-Specific Outputs</a></li><li><a href="#export-format-generation">Export Format Generation</a></li></ul></li><li><a href="#performance-characteristics">Performance Characteristics</a></li><li><a href="#direct-usage">Direct Usage</a></li></ul></li><li><a href="#development">Development</a></li><li><ul><li><a href="#project-structure">Project Structure</a></li><li><a href="#code-quality">Code Quality</a></li><li><a href="#contributing">Contributing</a></li><li><a href="#testing">Testing</a></li><li><a href="#building">Building</a></li></ul></li><li><a href="#license">License</a></li><li><a href="#contributing-1">Contributing</a></li><li><a href="#code-of-conduct">Code of Conduct</a></li><li><a href="#support">Support</a></li><li><a href="#production-deployment">Production Deployment</a></li><li><ul><li><a href="#system-requirements">System Requirements</a></li><li><a href="#performance-characteristics-1">Performance Characteristics</a></li><li><a href="#deployment-options">Deployment Options</a></li><li><ul><li><a href="#docker-deployment">Docker Deployment</a></li><li><a href="#pm2-deployment">PM2 Deployment</a></li><li><a href="#systemd-service">Systemd Service</a></li></ul></li><li><a href="#monitoring-and-maintenance">Monitoring and Maintenance</a></li></ul></li><li><a href="#security">Security</a></li><li><ul><li><a href="#security-features">Security Features</a></li><li><a href="#security-best-practices">Security Best Practices</a></li><li><a href="#vulnerability-reporting">Vulnerability Reporting</a></li></ul></li><li><a href="#roadmap">Roadmap</a></li><li><ul><li><a href="#current-version-010">Current Version (0.1.0)</a></li><li><a href="#planned-features-future-releases">Planned Features (Future Releases)</a></li><li><a href="#community-contributions-welcome">Community Contributions Welcome</a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">MCP Color Server API Documentation - v0.1.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

Latest Blog Posts

What Is Context Bloat in MCP?
By Om-Shree-0709 on December 16, 2025.
mcp
Context Bloat
MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic Infrastructure
By Om-Shree-0709 on December 15, 2025.
mcp
anthropic
Linux Foundation
Code Execution with MCP: Architecting Agentic Efficiency
By Om-Shree-0709 on December 14, 2025.
mcp
Token bloat

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/keyurgolani/ColorMcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server