ColorPickr
Contrast checks with fixes, OKLCH harmonies, palettes, color-blind previews and code export.
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"colorpickr": {
"url": "https://colorpickr.app/mcp"
}
}
}Remote endpoints
https://colorpickr.app/mcpstreamable-httpWhat it can do
Tool inventory
Tools (6)
🟢check_contrast(text, background)
Check text/background contrast with WCAG 2 ratio, APCA Lc and a suggested fix that keeps the hue.
Input Schema
{
"type": "object",
"properties": {
"text": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
"description": "Text color hex."
},
"background": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
"description": "Background color hex."
}
},
"required": [
"text",
"background"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢convert_color(hex)
Convert a hex color to RGB, HSL and OKLCH.
Input Schema
{
"type": "object",
"properties": {
"hex": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
"description": "Color hex."
}
},
"required": [
"hex"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢generate_harmony(base, type)
Build a color harmony from a base color in OKLCH, mapped into the sRGB gamut.
Input Schema
{
"type": "object",
"properties": {
"base": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
"description": "Base color hex."
},
"type": {
"type": "string",
"enum": [
"complementary",
"analogous",
"triadic",
"split",
"tetradic",
"monochromatic"
]
}
},
"required": [
"base",
"type"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢roll_palette(locked, seed)
Generate a 5-color palette that always contains a light/dark pair passing WCAG AA; optionally keep locked colors.
Input Schema
{
"type": "object",
"properties": {
"locked": {
"description": "Colors to keep, in order.",
"maxItems": 5,
"type": "array",
"items": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$"
}
},
"seed": {
"description": "Seed for repeatable results.",
"type": "integer",
"minimum": -9007199254740991,
"maximum": 9007199254740991
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢export_palette(colors, format)
Turn a list of colors into code for CSS, Tailwind, SwiftUI, Android, Flutter and other formats ColorPickr supports.
Input Schema
{
"type": "object",
"properties": {
"colors": {
"minItems": 1,
"maxItems": 32,
"type": "array",
"items": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$"
}
},
"format": {
"type": "string",
"enum": [
"CSS variables",
"Tailwind v4",
"shadcn/ui",
"Figma variables",
"W3C Design Tokens",
"SwiftUI",
"Xcode asset catalog",
"Android",
"SCSS",
"Material UI",
"Flutter",
"Jetpack Compose",
"CSV",
"Adobe .ase",
"Apple .clr",
"Procreate .swatches"
]
}
},
"required": [
"colors",
"format"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}🟢simulate_color_vision(colors, type, severity)
Show how colors look with protanopia, deuteranopia, tritanopia or achromatopsia (Machado 2009).
Input Schema
{
"type": "object",
"properties": {
"colors": {
"minItems": 1,
"maxItems": 32,
"type": "array",
"items": {
"type": "string",
"pattern": "^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$"
}
},
"type": {
"type": "string",
"enum": [
"protanopia",
"deuteranopia",
"tritanopia",
"achromatopsia"
]
},
"severity": {
"default": 1,
"type": "number",
"minimum": 0,
"maximum": 1
}
},
"required": [
"colors",
"type"
],
"$schema": "https://json-schema.org/draft/2020-12/schema",
"additionalProperties": false
}Community
Evidence