Color Difference Engine Connector for AI agents.
4 live capabilities
Measure perceptual color differences for brand identity and UI design.
Waiting for input…
Why people use Color Difference Engine
Color Difference Engine for Precise Brand Identity Consistency
With this Connector, you just give your agent a list of colors and a target. It does the math for you, providing a ranked list of the closest matches or a specific distance score. You get an objective answer in seconds.
What Vinkius changes
You get mathematically accurate human perception data instead of raw hex comparisons.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 6,100+ Connectors
- Real-world use case 01
Brand Palette Audit
A designer wants to see if a new secondary color is too similar to the primary.
- Real-world use case 02
Accessibility Check
A developer wants to know if a gray text on a gray background is close enough to be a failure.
- Real-world use case 03
UI Component Design
A designer needs to find a hover state for a blue button.
Complete set · 4capabilities
The complete Color Difference Engine capability set.
These are the exact actions your AI can choose when you ask it to work with Color Difference Engine.
01—04
4 capabilities in this set.
Part of 4 available through Color Difference Engine.
- 01 Capability
Calculate color difference
Calculates the perceptual distance between two specific colors using a chosen mathematical model. It gives you an objective score for how different colors look.
- 02 Capability
Evaluate proximity
Checks if two colors are close enough based on a user-defined margin of error. Use this to verify if colors are distinct enough for UI elements.
- 03 Capability
Get color components
Deconstructs a single color into its human-perceivable dimensions. This lets you analyze the lightness and chroma of any hex code.
- 04 Capability
Rank colors by similarity
Sorts a list of candidate colors from most similar to least similar to a target color. This helps you find the best matches for a palette.
Set up in minutes
One URL. Then ask Color Difference Engine to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Color Difference 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_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Color Difference Engine for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine URL.
- Step 03
Save and start
Save the connection and enable Color Difference Engine in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"color-difference-engine": {
"url": "https://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine
Open Agent mode in chat and ask: "Using Color Difference Engine, help me...". 4 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"color-difference-engine": {
"url": "https://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine
Ask Copilot: "Using Color Difference Engine, help me...". 4 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"color-difference-engine": {
"url": "https://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine
Open Cascade and ask: "Using Color Difference Engine, help me...". 4 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"color-difference-engine": {
"url": "https://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine
Ask Cline: "Using Color Difference Engine, help me...". 4 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add color-difference-engine --transport http "https://edge.vinkius.com/vk_preview_iCcCtvvsozJGtgL348fYspC5C2PHv619B8aIcg1F/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 Color Difference Engine
Ask Claude: "Using Color Difference Engine, show me...". 4 tools are ready
Where the request belongs
Work Color Difference Engine can move forward.
This is for designers and brand specialists who need to move beyond 'eye-balling' colors. It solves the problem of inconsistent brand colors and inaccessible UI elements.
UI/UX Designer
Checks if hover states and button colors are distinct enough for users to see clearly on different screens.
Brand Identity Specialist
Ensures that new brand colors stay within a specific perceptual distance from the primary logo colors.
Accessibility Auditor
Verifies that text and background colors meet visibility requirements for users with different vision types.
Frontend Developer
Automates the generation of color palettes that maintain consistent visual weight across a web app.
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.
Color Format Converter
Convert between HEX, RGB(A), HSL(A), HSV, and CMYK with precision.
WCAG Contrast Checker
Evaluate color contrast compliance against WCAG 2.1 and WCAG 3.0 (APCA) standards.
Equal Temperament Calculator
Calculate MIDI frequencies, interval deviations, and tuning system comparisons.
Color Converter Engine
Convert any color between HEX, RGB, HSL, and CMYK with mathematical precision. The AI guesses color codes. this engine knows them.
Deterministic Color Engine
Equip your AI with precise UI design capabilities. Deterministically convert HEX/RGB/HSL, manipulate luminance, and generate mathematically perfect palettes.
Bring your own AI
Change the model, client or framework. Keep Color Difference 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 Color Difference Engine.
The practical details behind the request, access and result.
What is the Color Difference Engine MCP for?
It helps you measure how different two colors look to the human eye. It is used for branding, UI design, and accessibility to ensure colors are distinct enough.
How does it help with brand guidelines?
It gives you a way to ensure new colors stay within a specific perceptual distance from your brand colors. This keeps your visual identity consistent across all media.
Can it help with UI accessibility?
Yes, you can use it to check if two colors are different enough for users to see clearly. It removes the guesswork from contrast and proximity for buttons and text.
What models does it use?
It supports CIEDE2000, OKLAB, and CIE76. These are standard ways to calculate how people perceive color rather than just looking at raw numbers.
Can it sort a list of colors for me?
Yes, you can give it a target color and a list of candidates. It will rank them from most similar to least similar so you can find the best matches quickly.
Is this different from a hex converter?
Yes, a converter just changes the format. This capability tells you the perceptual difference, which is how humans actually see the colors, making it much more useful for design.
What color models are supported?
The engine supports CIE76, CIEDE2000, and OKLAB for calculating perceptual distance.
How do I use the ranking capability?
Use rank_colors_by_similarity by providing a target Hex color and an array of candidate Hex strings.
Can I check if two colors are within a specific tolerance?
Yes, the evaluate_proximity capability allows you to define a threshold value to see if the difference is small enough.
One connection away
Give your agent a direct line to Color Difference Engine.
Connect Color Difference 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