ColorPickr
Contrast checks with fixes, OKLCH harmonies, palettes, color-blind previews and code export.
使うべきか
品質と安全性
ツール定義とプロトコルへの準拠に関する自動分析に基づいています。
コンテキストコスト
これは、サーバーのツールがモデルのコンテキストに読み込まれるたびに消費されるおおよそのトークン数です。数が多いほど、ほかのタスクに使える注意が減ります。
インストール
ワンクリックインストール
これを `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
}コミュニティ
エビデンス