컬러 피커로 건너뛰기

PickShade MCP 서버

Claude, Cursor, VS Code 등 AI 어시스턴트에 진짜 컬러 도구를 쥐여 주세요. 정확한 변환, WCAG와 APCA 대비, 팔레트, 50–950 스케일, 색각 이상 검사, 바로 쓰는 디자인 토큰까지 제공합니다. URL 하나면 되고 설치할 것은 없습니다.

서버 URL

https://pickshade.com/api/mcp

어시스턴트 연결하기

터미널에서 실행하세요.

Claude Code

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

설정 → 커넥터 → 사용자 지정 커넥터 추가에서 URL을 붙여 넣으세요.

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은 흰 배경에서 잘 읽히나요? 아니라면 고쳐 주세요.
  • #6d4aff로 shadcn 테마를 만들어 주세요.
  • navy를 중심으로 5색 유사 배색 팔레트를 만들고 Tailwind v4로 내보내 주세요.
  • 녹색맹인 사람도 #e11d48과 #16a34a를 구별할 수 있나요?
  • oklch(62% 0.21 260)에 가장 가까운 Tailwind 클래스는 무엇인가요?

도구

  • 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.

  • find_colors

    Search color names by words, like "sage", "dusty rose", "midnight blue" or "бордовый", and get their HEX values. Searches common names in English and Russian and about 30 000 extended color names. Use it to turn a description into real colors.

  • 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.

  • fix_contrast

    Find the closest color that reaches a contrast target by changing only OKLCH lightness, so the hue and character stay. Targets: aa (4.5:1), aa-large (3:1), aaa (7:1), apca-body (Lc 75), apca-content (Lc 60), apca-large (Lc 45). Adjust the text color or the background.

  • audit_palette

    Check every text and background pair in a palette with WCAG 2 and APCA, list which pairs are safe for body text, large text or only decoration, find colors that people with color blindness cannot tell apart, and flag colors outside sRGB. Use it before shipping a theme or chart palette.

  • 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.

  • tints_shades

    Get tints (mixed with white), shades (mixed with black) and tones (mixed with gray) of a color, evenly spaced, as HEX. Good for hover states, borders and backgrounds.

  • 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.

  • make_gradient

    Build a CSS gradient from 2 or more colors with interpolation in OKLab, OKLCH or sRGB. Returns modern CSS with the color space, a fallback with precomputed stops for older browsers, and the stop colors. OKLab avoids the gray middle that sRGB gradients get.

  • 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)는 AI 어시스턴트가 외부 도구를 호출할 수 있게 해 주는 프로토콜입니다. 이 서버를 연결하면 어시스턴트가 색을 추측하지 않고 정확한 공식으로 계산합니다.

무료인가요? 개인정보는 안전한가요?

네. 무료이고 계정이 필요 없으며, 모든 호출은 그때그때 계산됩니다. 보낸 색은 저장되지 않습니다.

어떤 전송 방식을 쓰나요?

최신 MCP 클라이언트가 지원하는 Streamable HTTP를 무상태(stateless) 모드로 씁니다. 시드 없이 호출한 generate_palette를 제외하면 모든 도구는 읽기 전용이며 결과가 항상 같습니다.