PickShade color tools

com.pickshadev0.2.0Updated Oct 5, 2026

18 color tools: OKLCH, WCAG and APCA contrast fixes, palettes, gradients, color blindness, tokens.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

Gives an assistant 18 color tools: conversion, naming, WCAG and APCA contrast checks and fixes, palette audits, gradients, scales and design tokens.

What it does
PickShade exposes color utilities such as parse_color, convert_color, find_colors, check_contrast, fix_contrast, audit_palette, generate_scale, harmonies, mix_colors, make_gradient, simulate_cvd, export_tokens and build_system. It accepts colors as HEX, rgb(), hsl(), oklch(), CSS names, common names and Tailwind classes, and returns values across HEX, RGB, HSL, Lab, OKLCH, Display P3 and Rec. 2020. It also offers prompts for accessible themes, color audits and plain-language color descriptions.
When to use it
Useful when building or reviewing a design system, checking whether text and background pairs meet WCAG 2 or APCA targets, generating palettes, scales and gradients, or exporting tokens for CSS, Tailwind v4, SCSS or DTCG. It suits design and front-end work where color decisions need to be consistent and accessible.
Requirements
Runs as a hosted remote endpoint over streamable HTTP, so no install is needed; a local stdio option is available through an npm package and requires Node.js 20 or newer. No API key, account, environment variable or header is declared.
Before you install
The README states there is no API key, account or telemetry, and the color math is described as running locally and deterministically. No write, send or delete actions, payments, or credentials are shown in the input.

Installation

In SourceWeft

  1. Open PickShade color tools in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Other MCP clients

Add this to your client's mcpServers config.

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

README

PickShade MCP server

Color tools for AI assistants: convert any color, find colors by name, check and fix WCAG 2 and APCA contrast, audit palettes for accessibility and color blindness, build gradients, scales and full design systems, export tokens for CSS, Tailwind v4, SCSS and DTCG.

All math follows CSS Color 4 (OKLCH, OKLab, Display P3, Rec. 2020) and runs locally and deterministically. No API key, no account, no telemetry.

Website and docs: pickshade.com/mcp

Use the hosted server

No install. Streamable HTTP endpoint:

https://pickshade.com/api/mcp

Claude Code:

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

Cursor, VS Code and other clients that read mcpServers:

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

Run locally over stdio

json
{    "mcpServers": {        "pickshade": { "command": "npx", "args": ["-y", "@pickshade/mcp"] }    }}

Requires Node.js 20 or newer.

Tools

Every tool accepts colors as HEX, rgb(), hsl(), oklch(), CSS names like navy, common names like royal blue or бордовый, and Tailwind classes like sky-500.

ToolWhat it does
parse_colorEvery format, the closest name and Tailwind class, gamut and the better text color for any color
convert_colorHEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, Display P3, Rec. 2020, XYZ, SwiftUI, Flutter
find_colorsTurns words like "sage" or "dusty rose" into real HEX values
check_contrastWCAG 2 ratio with AA and AAA levels, and APCA Lc with the usage it allows
fix_contrastThe closest color that reaches a contrast target, changing only OKLCH lightness so the hue stays
audit_paletteChecks every text and background pair, color blindness conflicts and out-of-gamut colors in a palette
check_gamutWhether a color fits sRGB, Display P3 and Rec. 2020
nearest_namesClosest named colors, CSS keywords and Tailwind classes by perceptual distance
compare_colorsCIEDE2000 and deltaE OK difference with a plain verdict, lightness, chroma and hue shift
generate_scaleAn 11-step 50–950 scale in OKLCH with even perceived lightness, the shape of Tailwind palettes
tints_shadesTints, shades and tones of a color
harmoniesComplementary, split-complementary, analogous, triadic, tetradic, square and monochromatic in OKLCH
mix_colorsMixes two colors in a chosen space, like CSS color-mix()
make_gradientCSS gradients interpolated in OKLab or OKLCH, without the gray middle
generate_paletteHarmonious palettes in OKLCH, repeatable with a seed
simulate_cvdProtanopia, deuteranopia, tritanopia and achromatopsia, with pairs that become hard to tell apart
export_tokensCSS variables, Tailwind v4 @theme, SCSS, JSON, DTCG tokens, JS arrays or an SVG swatch strip
build_systemA full color system from one brand color: scales, light and dark roles, shadcn/ui and Tailwind export

Prompts

  • accessible_theme: light and dark themes from a brand color with every text pair checked
  • audit_colors: readable pairs, color blindness conflicts and gamut for a list of colors
  • describe_color: a color explained in plain words with its values, name, contrast and matches

REST API

The same tools over HTTP, JSON in and out: pickshade.com/api, OpenAPI 3.1 at https://pickshade.com/api/v1/openapi.json.

License

MIT. Color names include data from meodai/color-names (MIT); Tailwind palette values are from Tailwind CSS (MIT).

Source: packages/mcp/README.md at commit 34ad055

Tools

0
Tool metadata has not been indexed yet.

Version history

1
  1. v0.2.0LatestOct 5, 2026