ColorPickr
Contrast checks with fixes, OKLCH harmonies, palettes, color-blind previews and code export.
我該用這個嗎
品質與安全性
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"colorpickr": {
"url": "https://colorpickr.app/mcp"
}
}
}遠端端點
https://colorpickr.app/mcpstreamable-http它能做什麼
工具清單
工具（6）
🟢check_contrast(text, background)
Check text/background contrast with WCAG 2 ratio, APCA Lc and a suggested fix that keeps the hue.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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).
輸入結構描述
{
"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
}社群
證據