Перейти к подбору цвета

MCP-сервер PickShade

Дайте Claude, Cursor, VS Code и другим ИИ-ассистентам настоящие инструменты для цвета: точную конвертацию, контраст WCAG и APCA, палитры, шкалы 50–950, проверку цветовой слепоты и готовые дизайн-токены. Одна ссылка, ничего устанавливать не нужно.

Адрес сервера

https://pickshade.com/api/mcp

Подключите ассистента

Выполните в терминале.

Claude Code

claude mcp add --transport http pickshade https://pickshade.com/api/mcp

Настройки → Коннекторы → Добавить свой коннектор, вставьте адрес.

Claude и Claude Desktop

https://pickshade.com/api/mcp

Добавьте в .cursor/mcp.json.

Cursor

{
  "mcpServers": {
    "pickshade": {
      "url": "https://pickshade.com/api/mcp"
    }
  }
}

Добавьте в .vscode/mcp.json.

VS Code

{
  "servers": {
    "pickshade": {
      "type": "http",
      "url": "https://pickshade.com/api/mcp"
    }
  }
}

О чём спросить

  • Читается ли #6b7280 на белом? Если нет, исправь.
  • Собери тему shadcn из #6d4aff.
  • Сделай аналоговую палитру из пяти цветов вокруг navy и выгрузи в Tailwind v4.
  • Различат ли люди с дейтеранопией #e11d48 и #16a34a?
  • Какой класс Tailwind ближе всего к oklch(62% 0.21 260)?

Инструменты

  • parse_color

    Read any color and describe it: HEX, RGB, HSL and OKLCH values, the closest human name, the closest Tailwind class, its hue family, whether it fits sRGB and Display P3, and which text color, white or black, reads better on it.

  • convert_color

    Convert a color between formats: hex, rgb, hsl, hsv, hwb, cmyk, lab, lch, oklab, oklch, display-p3, rec2020, xyz and platform code (swiftui, uikit, flutter, android). Values follow CSS Color 4.

  • check_contrast

    Check text contrast against a background with both WCAG 2 (ratio, AA and AAA for normal and large text) and APCA (Lc value and the usage level it allows). Also suggests the nearest text color that passes AA and AAA while keeping its hue.

  • check_gamut

    Check whether a color fits the sRGB, Display P3 and Rec. 2020 gamuts, and get the closest sRGB fallback that keeps lightness and hue (CSS Color 4 gamut mapping in OKLCH).

  • nearest_names

    Find the closest named colors, CSS color keywords and Tailwind CSS classes for a color, ranked by perceptual distance (deltaE OK).

  • compare_colors

    Compare two colors: CIEDE2000 and deltaE OK difference with a plain verdict (identical, nearly, similar, different, opposite), lightness shift in percent, chroma and hue shift, and the contrast between them.

  • generate_scale

    Build an 11-step tint and shade scale (50, 100 … 900, 950) from one color in OKLCH, the same shape as Tailwind palettes, with even perceived lightness steps.

  • harmonies

    Get color harmonies for a base color, computed in OKLCH so lightness stays even: complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic.

  • mix_colors

    Mix two colors at a ratio in a chosen color space, like CSS color-mix(). OKLab keeps the middle bright, sRGB tends to turn gray. Returns the result and a ready color-mix() expression.

  • generate_palette

    Generate a harmonious palette in OKLCH. Keep colors you already have, pick a style (auto, analogous, complementary, triadic, monochromatic, pastel, vivid, muted, dark) and pass a seed to get the same palette every time.

  • simulate_cvd

    Show how colors look with protanopia, deuteranopia, tritanopia and achromatopsia (Machado 2009 at full severity), and list the pairs that become hard to tell apart.

  • export_tokens

    Turn a list of colors into ready code: CSS custom properties, a Tailwind v4 @theme block, SCSS variables, JSON, W3C design tokens (DTCG), a JavaScript array or an SVG swatch strip. Unnamed colors get their closest color name.

  • build_system

    Build a full color system from a brand color: 50–950 scales for primary, secondary, accent, neutral and status colors, light and dark theme roles, exported as a Tailwind v4 theme, CSS variables, shadcn/ui globals.css or DTCG tokens, with a contrast audit of text and surface pairs.

Нужен обычный HTTP? Используйте REST API

Вопросы и ответы

Что такое MCP-сервер?

MCP, Model Context Protocol, позволяет ИИ-ассистентам вызывать внешние инструменты. С этим сервером ассистент считает цвета по точным формулам, а не угадывает.

Это бесплатно и приватно?

Да. Сервер бесплатный, аккаунт не нужен, каждый вызов считается на лету. Присланные цвета не сохраняются.

Какой транспорт он использует?

Streamable HTTP без сессий, его поддерживают актуальные MCP-клиенты. Все инструменты только читают и детерминированы, кроме generate_palette без seed.