Servers Playground How we check Add a server Log in

PickShade color tools

Working · 1.7 s

com.pickshade/pickshadev0.2.0 Domain verified

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

Design & Creative

Source Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://pickshade.com/api/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

audit_palette Read-only

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.

colorsarray, required

Palette colors, 2 to 12

PickShade color tools MCP server | mcptry

Tools (18)

audit_palette

read-only

Argument	Type	Description
colors*	array	Palette colors, 2 to 12

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "colors"
  ],
  "properties": {
    "colors": {
      "type": "array",
      "items": {
        "type": "string",
        "maxLength": 120,
        "minLength": 1,
        "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
      },
      "maxItems": 12,
      "minItems": 1,
      "description": "Palette colors, 2 to 12"
    }
  }
}

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.

read-only

Argument	Type	Description
name	string
accent	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
format	string
values	string
neutral	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
primary*	string	Brand or primary color
secondary	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "primary"
  ],
  "properties": {
    "name": {
      "type": "string",
      "default": "Brand",
      "maxLength": 60,
      "minLength": 1
    },
    "accent": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "format": {
      "enum": [
        "tailwind",
        "css",
        "shadcn",
        "dtcg"
      ],
      "type": "string",
      "default": "tailwind"
    },
    "values": {
      "enum": [
        "oklch",
        "hex",
        "rgb",
        "hsl",
        "display-p3"
      ],
      "type": "string",
      "default": "oklch"
    },
    "neutral": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "primary": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Brand or primary color"
    },
    "secondary": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

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.

read-only

Argument	Type	Description
text*	string	Text or foreground color
background*	string	Background color

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "text",
    "background"
  ],
  "properties": {
    "text": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Text or foreground color"
    },
    "background": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Background color"
    }
  }
}

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

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

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.

read-only

Argument	Type	Description
first*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
second*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "first",
    "second"
  ],
  "properties": {
    "first": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "second": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

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.

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
formats	array	Formats to return. Defaults to hex, rgb, hsl, oklch, oklab and display-p3

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "formats": {
      "type": "array",
      "items": {
        "enum": [
          "hex",
          "rgb",
          "hsl",
          "hsv",
          "hwb",
          "cmyk",
          "lab",
          "lch",
          "oklab",
          "oklch",
          "display-p3",
          "rec2020",
          "a98-rgb",
          "prophoto-rgb",
          "srgb-linear",
          "xyz-d65",
          "xyz-d50",
          "swiftui",
          "uikit",
          "flutter",
          "android"
        ],
        "type": "string"
      },
      "maxItems": 21,
      "minItems": 1,
      "description": "Formats to return. Defaults to hex, rgb, hsl, oklch, oklab and display-p3"
    }
  }
}

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.

read-only

Argument	Type	Description
colors*	array
format	string
values	string	How color values are written

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "colors"
  ],
  "properties": {
    "colors": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "color"
        ],
        "properties": {
          "name": {
            "type": "string",
            "maxLength": 60,
            "minLength": 1,
            "description": "Token name"
          },
          "color": {
            "type": "string",
            "maxLength": 120,
            "minLength": 1,
            "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
          }
        }
      },
      "maxItems": 24,
      "minItems": 1
    },
    "format": {
      "enum": [
        "css",
        "tailwind",
        "scss",
        "json",
        "dtcg",
        "array",
        "svg"
      ],
      "type": "string",
      "default": "css"
    },
    "values": {
      "enum": [
        "oklch",
        "hex",
        "rgb",
        "hsl",
        "display-p3"
      ],
      "type": "string",
      "default": "oklch",
      "description": "How color values are written"
    }
  }
}

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.

read-only

Argument	Type	Description
limit	integer
query*	string	Words to look for in color names
locale	string	Language for color names

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "query"
  ],
  "properties": {
    "limit": {
      "type": "integer",
      "default": 12,
      "maximum": 50,
      "minimum": 1
    },
    "query": {
      "type": "string",
      "maxLength": 60,
      "minLength": 2,
      "description": "Words to look for in color names"
    },
    "locale": {
      "enum": [
        "en",
        "ru"
      ],
      "type": "string",
      "default": "en",
      "description": "Language for color names"
    }
  }
}

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.

read-only

Argument	Type	Description
text*	string	Text or foreground color
adjust	string
target	string
background*	string	Background color

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "text",
    "background"
  ],
  "properties": {
    "text": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Text or foreground color"
    },
    "adjust": {
      "enum": [
        "text",
        "background"
      ],
      "type": "string",
      "default": "text"
    },
    "target": {
      "enum": [
        "aa",
        "aa-large",
        "aaa",
        "apca-body",
        "apca-content",
        "apca-large"
      ],
      "type": "string",
      "default": "aa"
    },
    "background": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Background color"
    }
  }
}

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.

read-only

Argument	Type	Description
keep	array	Colors that must stay in the palette, in order
mode	string
seed	string	Any text. The same seed gives the same palette
size	integer

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "keep": {
      "type": "array",
      "items": {
        "type": "string",
        "maxLength": 120,
        "minLength": 1,
        "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
      },
      "maxItems": 12,
      "description": "Colors that must stay in the palette, in order"
    },
    "mode": {
      "enum": [
        "auto",
        "analogous",
        "complementary",
        "triadic",
        "monochromatic",
        "pastel",
        "vivid",
        "muted",
        "dark"
      ],
      "type": "string",
      "default": "auto"
    },
    "seed": {
      "type": "string",
      "maxLength": 100,
      "description": "Any text. The same seed gives the same palette"
    },
    "size": {
      "type": "integer",
      "default": 5,
      "maximum": 10,
      "minimum": 2
    }
  }
}

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.

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

harmonies

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

read-only

Argument	Type	Description
kind	string	One harmony. All harmonies when omitted
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "kind": {
      "enum": [
        "complementary",
        "split-complementary",
        "analogous",
        "triadic",
        "tetradic",
        "square",
        "monochromatic"
      ],
      "type": "string",
      "description": "One harmony. All harmonies when omitted"
    },
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

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.

read-only

Argument	Type	Description
kind	string
angle	number	Angle in degrees for linear
space	string
stops	integer	How many precomputed stops the fallback gets
colors*	array	Gradient stops in order, 2 to 12

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "colors"
  ],
  "properties": {
    "kind": {
      "enum": [
        "linear",
        "radial",
        "conic"
      ],
      "type": "string",
      "default": "linear"
    },
    "angle": {
      "type": "number",
      "default": 90,
      "maximum": 360,
      "minimum": 0,
      "description": "Angle in degrees for linear"
    },
    "space": {
      "enum": [
        "oklab",
        "oklch",
        "srgb",
        "srgb-linear",
        "lab",
        "lch"
      ],
      "type": "string",
      "default": "oklab"
    },
    "stops": {
      "type": "integer",
      "default": 7,
      "maximum": 32,
      "minimum": 2,
      "description": "How many precomputed stops the fallback gets"
    },
    "colors": {
      "type": "array",
      "items": {
        "type": "string",
        "maxLength": 120,
        "minLength": 1,
        "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
      },
      "maxItems": 12,
      "minItems": 1,
      "description": "Gradient stops in order, 2 to 12"
    }
  }
}

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.

read-only

Argument	Type	Description
first*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
space	string
amount	number	Share of the second color in percent
second*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "first",
    "second"
  ],
  "properties": {
    "first": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "space": {
      "enum": [
        "oklab",
        "oklch",
        "srgb",
        "srgb-linear",
        "lab",
        "lch",
        "hsl",
        "hwb"
      ],
      "type": "string",
      "default": "oklab"
    },
    "amount": {
      "type": "number",
      "default": 50,
      "maximum": 100,
      "minimum": 0,
      "description": "Share of the second color in percent"
    },
    "second": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    }
  }
}

nearest_names

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

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
limit	integer
locale	string	Language for color names

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "limit": {
      "type": "integer",
      "default": 5,
      "maximum": 20,
      "minimum": 1
    },
    "locale": {
      "enum": [
        "en",
        "ru"
      ],
      "type": "string",
      "default": "en",
      "description": "Language for color names"
    }
  }
}

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.

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
locale	string	Language for color names

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "locale": {
      "enum": [
        "en",
        "ru"
      ],
      "type": "string",
      "default": "en",
      "description": "Language for color names"
    }
  }
}

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.

read-only

Argument	Type	Description
kinds	array
colors*	array

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "colors"
  ],
  "properties": {
    "kinds": {
      "type": "array",
      "items": {
        "enum": [
          "protanopia",
          "deuteranopia",
          "tritanopia",
          "achromatopsia"
        ],
        "type": "string"
      },
      "minItems": 1
    },
    "colors": {
      "type": "array",
      "items": {
        "type": "string",
        "maxLength": 120,
        "minLength": 1,
        "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
      },
      "maxItems": 12,
      "minItems": 1
    }
  }
}

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.

read-only

Argument	Type	Description
color*	string	Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500
steps	integer

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500"
    },
    "steps": {
      "type": "integer",
      "default": 10,
      "maximum": 20,
      "minimum": 2
    }
  }
}