Use Tinta inside Claude

Connect it

https://tinta.haikalakif.com/mcp

claude mcp add --transport http tinta https://tinta.haikalakif.com/mcp

{
  "mcpServers": {
    "tinta": {
      "url": "https://tinta.haikalakif.com/mcp"
    }
  }
}

{
  "servers": {
    "tinta": {
      "type": "http",
      "url": "https://tinta.haikalakif.com/mcp"
    }
  }
}

https://tinta.haikalakif.com/mcp

What you can ask

You don't need to name the tools — ask in your own words, and Claude picks the right one. If it answers from memory instead, add "use Tinta".

• Color insight

  Name, family, HEX/RGB/HSL/OKLCH/CMYK, the readable text color with its contrast, a 50–950 scale, colors that go with it, the nearest Tailwind and Material shades, and Tinta palettes that use it.

  “What color goes well with #002323?”

• Suggest a palette

  Palettes built around a color for six harmony rules, chosen in OKLCH so accents read on it.

  “Make me a palette from my brand color #0F766E.”

• Palette from an image

  The main colors of an image at a public link, clustered perceptually, small vivid accents kept. The image is sampled once and not stored.

  “Make a palette from https://example.com/photo.jpg”

• Mix colors

  Blend two colors like CSS color-mix(), or get evenly spaced steps between them.

  “5 steps from navy to cream.”

• Search the library

  Search Tinta's human-reviewed palettes, gradients and mesh gradients by word, mood or hex.

  “Show me calm ocean palettes.”

• Get a palette

  Everything about one Tinta palette, gradient or mesh from its link, with code.

  “Tell me about tinta.haikalakif.com/palette/jade-pavilion.”

• Check contrast and color blindness

  WCAG 2.2 contrast for every pair, and which colors collapse under four kinds of color blindness.

  “Is white text readable on #7C3AED?”

• Build a UI theme

  Light and dark theme tokens with every text pair at WCAG AA, as CSS variables and Tailwind v4.

  “Make a dark mode theme from #2563EB.”

• Make a CSS gradient

  Linear, radial or conic gradient CSS in sRGB or OKLCH, or a mesh gradient.

  “A CSS gradient from #FF7A59 to #7C3AED.”

• Export a palette

  Colors as CSS variables named after each color, SCSS, Tailwind v4 or v3, JSON, HEX or an SVG swatch sheet.

  “Export #264653 #2A9D8F #E9C46A as Tailwind v4.”

• Audit CSS colors

  Paste CSS, SCSS or a Tailwind config: its contrast failures, with the nearest passing color where one exists.

  “Is my CSS accessible? (then paste it)”

Ready-made prompts

Starting points that walk Claude through the right tools in order. In Claude, find them under + → Tinta; other clients list them as prompts or slash commands.

• Palette for a brand

  A palette for a brand or project: Tinta’s library first, else one built around a colour, checked for contrast and exported as code.

  You give: brand, color (optional)

• Make my colours accessible

  Checks colours (or pasted CSS) for WCAG contrast and colour blindness, and gives the nearest passing fixes.

  You give: colors

• UI theme from a brand colour

  Light and dark UI theme tokens at WCAG AA from a brand colour, as CSS variables or Tailwind v4.

  You give: color, framework (optional)

• Palette from a photo

  The main colours of an image at a link, then a contrast check of the result.

  You give: url