Hueshift

Hueshift

The color palette brain your coding agent plugs into.

A web-based color palette tool paired with a first-class MCP server. Generate accessible, OKLCH-based palettes from a hex color or image and pipe them directly into Claude Code, Cursor, Windsurf, or any MCP-compatible coding agent as ready-to-paste Tailwind v4 tokens, CSS variables, or design-token JSON.

Monorepo Structure

packages/types/          — Shared TypeScript types
packages/color-engine/   — OKLCH color engine (scale generation, harmony, contrast, semantic tokens, export, image extraction)
apps/web/                — Vite + React + Tailwind v4 web app
apps/mcp-server/         — MCP server (stdio transport)

Getting Started

pnpm install
pnpm dev          # starts the web app at http://localhost:5173

Web App Features

• Hex input — enter a brand color, pick harmony type, get a full palette
• Image input — drag-drop an image, extract dominant colors via k-means
• Live preview — realistic UI mockup (dashboard card + buttons + tags) updates in real time
• Light/Dark mode — auto-generated dark mode with contrast-preserving inversion
• 6 export formats — Tailwind v4, CSS vars, SCSS, W3C design tokens, JSON, hex list
• Contrast report — WCAG AA/AAA + APCA indicators on every fg/bg pair
• Palette library — save up to 20 palettes to localStorage
• Shareable URLs — palette data encoded in URL hash for sharing
• Keyboard shortcuts — Space to regenerate, C to copy

MCP Server

Add to Claude Code:

claude mcp add hueshift -- npx tsx $(pwd)/apps/mcp-server/src/index.ts

Palettes are auto-saved to `~/.hueshift/palettes.json` for retrieval across sessions.

Available Tools

Tool	Description
generate_palette_from_hex	Generate a full OKLCH palette from a base hex color
generate_palette_from_image	Extract colors from a local image file
generate_scale	Generate an 11-shade scale (50-950) fro