About standby-design-mcp
standby-design-mcp is an HTML, CSS, and JavaScript design-tool hub for designers and developers. Its OKLCH palette generator creates graded color sets and exports CSS values without dependencies or a build step.
Key features
- 01OKLCH palette generation
- 0218 color steps across surface and contrast zones
- 03Balanced midpoint and exact brand-match modes
- 04Copyable Hex and OKLCH values
- 05CSS custom-property export with Hex fallback
- 06Light, dark, and high-contrast previews
Use cases
- 01Generate a palette from a brand Hex color
- 02Copy color values into a design or code project
- 03Preview palettes on light, dark, and high-contrast surfaces
MCP support
The project identifies itself as an MCP server for AI agents and links to its MCP documentation.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://mcp.standby.design/mcpclaude mcp add --transport http karstenkreh-standby-design https://mcp.standby.design/mcp{"mcpServers":{"karstenkreh-standby-design":{"type":"http","url":"https://mcp.standby.design/mcp"}}}Open in Cursor{"servers":{"karstenkreh-standby-design":{"type":"http","url":"https://mcp.standby.design/mcp"}}}Open in VS Code{"mcpServers":{"karstenkreh-standby-design":{"type":"http","url":"https://mcp.standby.design/mcp"}}}{"mcpServers":{"karstenkreh-standby-design":{"serverUrl":"https://mcp.standby.design/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
10| Parameter | Type | Required | Description |
|---|---|---|---|
| url | string | No | Existing standby.design URL (or raw hash) to modify. Only this tool's section is changed; color/type/shape/icon/spacing/motion settings from other tools are preserved. Omit to start fresh from defaults. |
| mode | enum | No | "balanced": step 500 is always the perceptual midpoint (even light/dark distribution). "exact": step 500 keeps the input color's lightness.balanced | exact |
| accents | array | No | Up to 10 additional named accent colors. Replaces the existing accent list when provided; pass [] to remove all accents. Default: Success/Warning/Info, auto-derived. |
| brandHex | string | No | Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this. |
| brandPin | boolean | No | Pin the primary token to the exact input hex instead of the palette step. |
| errorPin | boolean | No | |
| themeName | string | No | Name of the design system (appears in exports and page title). |
| bgColorHex | string | No | Surface tint color as hex, or "auto" to derive from the brand color (default). |
| brandInvert | boolean | No | For pinned brand: mirror lightness in dark mode (e.g. black buttons in light mode, white in dark). |
| chromaScale | number | No | Surface saturation 0–1 (0 = grey surfaces, 1 = vibrant). Default 0.25. |
| errorInvert | boolean | No | |
| errorColorHex | string | No | Error/destructive color as hex, or "auto" to derive from the brand hue (default). |
| fgContrastMode | enum | No | Text color strategy on colored backgrounds.best | preferLight | preferDark |
Details
From the project READMEstandby.design
Multi-Tool-Hub unter standby.design — kleine Tools für Designer und Entwickler. Kein Framework, kein Build-Step, reines HTML/CSS/JS.
MCP-Server für KI-Agenten: https://standby.design/docs/mcp
Struktur
/
├── index.html # Hub-Seite (standby.design)
├── color/
│ └── index.html # Color Palette Generator (standby.design/color)
├── Dockerfile
├── nginx.conf
├── docker-compose.yml
└── deploy.sh
Deployment (Hetzner + Docker + nginx)
./deploy.sh
Setzt voraus: SSH-Key unter C:/Local Data/Repositories/SSH Keys/hetzner_ed25519.
DNS (Namecheap)
A-Record für standby.design und www.standby.design → 46.225.131.97
Color Palette Generator (/color)
Ein interaktiver, client-seitiger Palette-Generator im OKLCH-Farbraum — keine Dependencies, kein Build-Step.
Features
- Brand + Slated: Generiert automatisch eine volle Palette (Brand) und eine gedämpfte Variante mit 50% Chroma (Slated)
- 18 Abstufungen: Feine Gradierung für Light Surfaces (25–100), Core Palette (200–800), Dark Surfaces (825–875) und High Contrast (925–975)
- Zwei Modi:
- Balanced Midpoint — 500 = perzeptueller Mittelwert (L=0.50), symmetrisch um den hellsten Punkt des Farbtons
- Exact Brand Match — 500 = exakt die Eingabefarbe, Helligkeit + Chroma werden gleichmäßig darum herum skaliert
- Click-to-Copy: Einzelne Hex- und OKLCH-Werte per Klick kopieren
- Code-Export: Fertige CSS Custom Properties (OKLCH + Hex Fallback) zum Kopieren
- Surface-Demo: Live-Vorschau für Light Mode, Dark Mode und High Contrast Surfaces
- Grau-sicher: Neutrale Eingaben (z.B.
#757575) erzeugen saubere Grau-Paletten ohne Farbstich
Verwendung
index.htmlim Browser öffnen- Hex-Farbcode eingeben (mit oder ohne
#) - Modus wählen (Balanced Midpoint / Exact Brand Match)
- Palette generieren — fertig
Zonenstruktur
| Steps | Zone | Verwendung |
|---|---|---|
| 25–100 | Light Surfaces | Hintergründe, Cards, Elevated (Light) |
| 200–800 | Core Palette | Buttons, Links, Akzente, Text |
| 825–875 | Dark Surfaces | Hintergründe, Cards (Dark Mode) |
| 900–975 | High Contrast | Hintergründe (High Contrast Dark) |
Technologie
- Reines HTML + CSS + JavaScript (zero dependencies)
- OKLCH ↔ OKLab ↔ Linear sRGB ↔ sRGB Konvertierung
- Binäre Suche für sRGB-Gamut-Clamping
- Parabolische Chroma-Envelope für natürliche Sättigungsverteilung
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.