Palette Generator Engine Connector for AI agents.
4 live capabilities
Generate accessible web color palettes.
Waiting for input…
Why people use Palette Generator Engine
Palette Generator for Accessible Web Design
With the Palette Generator MCP, you just describe the vibe or the specific constraint to your agent. It handles the contrast math instantly, giving you a set of colors that are guaranteed to be accessible right out of the box.
What Vinkius changes
It turns abstract design requests into production-ready color palettes.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 6,100+ Connectors
- Real-world use case 01
High-contrast button for a government site
A designer needs a high-contrast button for a government site.
- Real-world use case 02
Warm triadic palette for a bakery
A brand stylist wants a warm, triadic palette for a bakery.
- Real-world use case 03
Consistent gray sidebar
A developer needs a range of 5 grays for a sidebar.
Complete set · 4capabilities
The complete Palette Generator Engine capability set.
These are the exact actions your AI can choose when you ask it to work with Palette Generator Engine.
01—04
4 capabilities in this set.
Part of 4 available through Palette Generator Engine.
- 01 Capability
Get harmony palette
Creates a palette based on traditional color theory rules like complementary or triadic. It helps you find balanced color relationships quickly.
- 02 Capability
Get monochromatic shades
Produces a range of tints and shades from a single hue. Use this to create depth in your UI without introducing new colors.
- 03 Capability
Get attribute variation
Changes one color attribute like lightness while holding others constant. It lets you tweak a specific color's feel without breaking the palette.
- 04 Capability
Get accessible palette
Generates a palette where every color is guaranteed to pass WCAG AA contrast standards. This makes it easy to build accessible web interfaces.
Set up in minutes
One URL. Then ask Palette Generator Engine to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Palette Generator Engine from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it Palette Generator Engine, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Palette Generator Engine for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Palette Generator Engine URL.
- Step 03
Save and start
Save the connection and enable Palette Generator Engine in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"palette-generator": {
"url": "https://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using Palette Generator Engine
Open Agent mode in chat and ask: "Using Palette Generator Engine, help me...". 4 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"palette-generator": {
"url": "https://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using Palette Generator Engine
Ask Copilot: "Using Palette Generator Engine, help me...". 4 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"palette-generator": {
"url": "https://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using Palette Generator Engine
Open Cascade and ask: "Using Palette Generator Engine, help me...". 4 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"palette-generator": {
"url": "https://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using Palette Generator Engine
Ask Cline: "Using Palette Generator Engine, help me...". 4 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add palette-generator --transport http "https://edge.vinkius.com/vk_preview_VzTSLwHAOqHEe6Kfgd2s4JSQKeyBcUdJyUJYC0eN/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using Palette Generator Engine
Ask Claude: "Using Palette Generator Engine, show me...". 4 tools are ready
Where the request belongs
Work Palette Generator Engine can move forward.
This capability is for designers and developers who need to move past 'guessing' which colors look good. It solves the headache of manual contrast checking and inconsistent color scaling.
UI/UX Designer
Ensures that every button, card, and label in a design system meets accessibility requirements.
Web Developer
Quickly generates compliant hex codes for frontend components to avoid failing accessibility audits.
Brand Stylist
Creates cohesive, mathematically balanced color palettes for brand identities and marketing materials.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse Connectors
Color Space Converter
High-precision mathematical conversion between RGB, HSL, CMYK, LAB, OKLAB, and more.
Design Prover
Every AI frontend looks identical: hero, 3 cards, 3 cards, CTA, rounded-xl, shadow-lg, blue/gray/white. Design Prover forces the agent to prove its design has dramatic hierarchy, unpredictable layout, intentional whitespace, commanding typography, and color with actual personality.
Deterministic Color Engine
Equip your AI with precise UI design capabilities. Deterministically convert HEX/RGB/HSL, manipulate luminance, and generate mathematically perfect palettes.
Color Conversion Engine
Stop LLMs from hallucinating hex codes. Deterministically convert colors between RGB, HEX, CMYK, and HSL using pure mathematics.
Color Converter Engine
Convert any color between HEX, RGB, HSL, and CMYK with mathematical precision. The AI guesses color codes. this engine knows them.
Color Difference Engine
Calculate perceptual color differences using CIE76, CIEDE2000, and OKLAB models.
Bring your own AI
Change the model, client or framework. Keep Palette Generator Engine connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about Palette Generator Engine.
The practical details behind the request, access and result.
Can the Palette Generator MCP help me make my website accessible?
Yes, it's perfect for that. It generates palettes that meet WCAG AA contrast standards, so you can be sure your text and buttons are readable by everyone.
Does it use standard color theory?
It does. It can generate complementary, triadic, and analogous palettes based on established color science rules.
Why is it better than just picking colors manually?
It uses OKLCH math. This ensures that different colors look equally bright to the human eye, which is much harder to do manually or with basic HSL values.
Can I get different shades of the same color?
Yes, it can generate a range of tints and shades from a single hue. This is great for creating consistent UI elements like buttons and backgrounds.
How do I make sure my colors look good together?
The Connector has a specific capability for color harmonies. You can ask your agent to create a triadic or complementary palette to ensure the colors are balanced.
What is WCAG AA compliance?
It's a standard for web accessibility. This Connector ensures the colors it picks for you meet those requirements so your site is usable for people with visual impairments.
What is OKLCH and why does it matter?
OKLCH is a perceptually uniform color space. Unlike RGB, changes in lightness feel consistent to the human eye regardless of the hue.
How can I ensure my palette is accessible?
Use the get_accessible_palette capability. It calculates contrast ratios to ensure all colors meet WCAG AA standards.
Can I use custom color angles?
Yes, by using get_harmony_palette with the 'custom' harmony type and providing specific angles.
One connection away
Give your agent a direct line to Palette Generator Engine.
Connect Palette Generator Engine once. Keep it beside 6,100+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available