PickShade color tools

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

Should I use this

Description quality

97%

Schema completeness

94%

Naming quality

91%

Poisoning risk

100%

Permission match

100%

Protocol compliance

100%

Based on automated analysis of tool definitions and protocol compliance.

Context Cost

~4,427Tokens (tool definitions)

~1.6 KBTypical response size

Significant attention impact (3.46% of 128k context)

This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.

Install

One-Click Install

Add this to your `claude_desktop_config.json` file:

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

Remote endpoints

https://pickshade.com/api/mcpstreamable-http

What it can do

Tool inventory

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.

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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": {
      "default": "en",
      "description": "Language for color names",
      "type": "string",
      "enum": [
        "en",
        "ru"
      ]
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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": {
      "description": "Formats to return. Defaults to hex, rgb, hsl, oklch, oklab and display-p3",
      "minItems": 1,
      "maxItems": 21,
      "type": "array",
      "items": {
        "type": "string",
        "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"
        ]
      }
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

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

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.

Input Schema

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

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.

Input Schema

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

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.

Input Schema

{
  "type": "object",
  "properties": {
    "colors": {
      "minItems": 1,
      "maxItems": 12,
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1,
        "maxLength": 120,
        "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"
      },
      "description": "Palette colors, 2 to 12"
    }
  },
  "required": [
    "colors"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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": {
      "default": 5,
      "type": "integer",
      "minimum": 1,
      "maximum": 20
    },
    "locale": {
      "default": "en",
      "description": "Language for color names",
      "type": "string",
      "enum": [
        "en",
        "ru"
      ]
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "first": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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",
      "minLength": 1,
      "maxLength": 120,
      "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"
    }
  },
  "required": [
    "first",
    "second"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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": {
      "default": 10,
      "type": "integer",
      "minimum": 2,
      "maximum": 20
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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

Input Schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    },
    "kind": {
      "description": "One harmony. All harmonies when omitted",
      "type": "string",
      "enum": [
        "complementary",
        "split-complementary",
        "analogous",
        "triadic",
        "tetradic",
        "square",
        "monochromatic"
      ]
    }
  },
  "required": [
    "color"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "first": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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",
      "minLength": 1,
      "maxLength": 120,
      "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"
    },
    "amount": {
      "default": 50,
      "description": "Share of the second color in percent",
      "type": "number",
      "minimum": 0,
      "maximum": 100
    },
    "space": {
      "default": "oklab",
      "type": "string",
      "enum": [
        "oklab",
        "oklch",
        "srgb",
        "srgb-linear",
        "lab",
        "lch",
        "hsl",
        "hwb"
      ]
    }
  },
  "required": [
    "first",
    "second"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "colors": {
      "minItems": 1,
      "maxItems": 12,
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1,
        "maxLength": 120,
        "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"
      },
      "description": "Gradient stops in order, 2 to 12"
    },
    "kind": {
      "default": "linear",
      "type": "string",
      "enum": [
        "linear",
        "radial",
        "conic"
      ]
    },
    "angle": {
      "default": 90,
      "description": "Angle in degrees for linear",
      "type": "number",
      "minimum": 0,
      "maximum": 360
    },
    "space": {
      "default": "oklab",
      "type": "string",
      "enum": [
        "oklab",
        "oklch",
        "srgb",
        "srgb-linear",
        "lab",
        "lch"
      ]
    },
    "stops": {
      "default": 7,
      "description": "How many precomputed stops the fallback gets",
      "type": "integer",
      "minimum": 2,
      "maximum": 32
    }
  },
  "required": [
    "colors"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "keep": {
      "description": "Colors that must stay in the palette, in order",
      "maxItems": 12,
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1,
        "maxLength": 120,
        "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"
      }
    },
    "mode": {
      "default": "auto",
      "type": "string",
      "enum": [
        "auto",
        "analogous",
        "complementary",
        "triadic",
        "monochromatic",
        "pastel",
        "vivid",
        "muted",
        "dark"
      ]
    },
    "size": {
      "default": 5,
      "type": "integer",
      "minimum": 2,
      "maximum": 10
    },
    "seed": {
      "description": "Any text. The same seed gives the same palette",
      "type": "string",
      "maxLength": 100
    }
  },
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "colors": {
      "minItems": 1,
      "maxItems": 12,
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1,
        "maxLength": 120,
        "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"
      }
    },
    "kinds": {
      "minItems": 1,
      "type": "array",
      "items": {
        "type": "string",
        "enum": [
          "protanopia",
          "deuteranopia",
          "tritanopia",
          "achromatopsia"
        ]
      }
    }
  },
  "required": [
    "colors"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "colors": {
      "minItems": 1,
      "maxItems": 24,
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "color": {
            "type": "string",
            "minLength": 1,
            "maxLength": 120,
            "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"
          },
          "name": {
            "description": "Token name",
            "type": "string",
            "minLength": 1,
            "maxLength": 60
          }
        },
        "required": [
          "color"
        ]
      }
    },
    "format": {
      "default": "css",
      "type": "string",
      "enum": [
        "css",
        "tailwind",
        "scss",
        "json",
        "dtcg",
        "array",
        "svg"
      ]
    },
    "values": {
      "default": "oklch",
      "description": "How color values are written",
      "type": "string",
      "enum": [
        "oklch",
        "hex",
        "rgb",
        "hsl",
        "display-p3"
      ]
    }
  },
  "required": [
    "colors"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

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.

Input Schema

{
  "type": "object",
  "properties": {
    "primary": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "description": "Brand or primary color"
    },
    "secondary": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    },
    "accent": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    },
    "neutral": {
      "type": "string",
      "minLength": 1,
      "maxLength": 120,
      "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"
    },
    "name": {
      "default": "Brand",
      "type": "string",
      "minLength": 1,
      "maxLength": 60
    },
    "format": {
      "default": "tailwind",
      "type": "string",
      "enum": [
        "tailwind",
        "css",
        "shadcn",
        "dtcg"
      ]
    },
    "values": {
      "default": "oklch",
      "type": "string",
      "enum": [
        "oklch",
        "hex",
        "rgb",
        "hsl",
        "display-p3"
      ]
    }
  },
  "required": [
    "primary"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Community

Rate this Server

Evidence

Recent observations

Oct 7, 2026, 8:03 AM UTCverifiedversion not recorded18 tools

PickShade color tools

Quality & Safety

Context Cost

One-Click Install

Remote endpoints

Tool inventory

Tools (18)

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Input Schema

Rate this Server

Recent observations