Skip to content

Browser tool

Color Chart

Fullscreen palette workbench with pan/zoom, contrast matrix, token export, WebMCP tools, semantic roles, audits, previews, and source image extraction.

Active

What it does

Color Chart is a fullscreen palette workbench: it turns one or more base colors into a grid of related shades, then lets you move around the chart (pan and zoom) to evaluate the palette as a system. It can also extract a starting palette from browser-readable URLs, uploaded images, or pasted screenshots, then audit, compare, export, and preview the palette in common UI contexts. When a browser or browser agent exposes the draft WebMCP document.modelContext API, the page also registers read-only and state-changing palette tools for agent workflows.

How to use it

  • Open the tool: /tools/color-chart.html
  • Pan: drag the background (or use arrow keys / on-screen arrows)
  • Zoom: mouse wheel / trackpad scroll, or + / - (or the on-screen + / − buttons)
  • Reset: 0 (or the reset button)
  • Extract from source: enter a readable URL, upload an image, or paste a screenshot into the tool.
  • Use the workbench: check shade-pair contrast, export tokens, map semantic roles, audit the palette, build themes, compare palettes, preview color-vision simulations, test light/dark UI components, or sample image regions.
  • Use WebMCP: in supporting browser agents, call registered Color Chart tools for palette metadata, contrast, shade generation, token export, comparison, auditing, share URL creation, palette updates, and role assignment.

URL palettes (?c=)

You can generate a chart from a specific palette without editing the tool:

  • Built-in palette: https://preview.tedt.org/tools/color-chart.html?c=teds
  • Comma-separated hex: https://preview.tedt.org/tools/color-chart.html?c=%2300a9e0,%23101820,%23fed141

Notes

  • Full usage docs live here: A Color Chart You Can Move Around
  • Arbitrary websites may block direct browser analysis. In that case, paste or upload a screenshot; no backend proxy is used.
  • The tool is intentionally self-contained (single HTML file) so it can be copied/modified easily.

Screenshots

Color Chart