A web-based visualizer for the palettes produced by Color.Palette.

This module is a Plug.Router that can be mounted inside a Phoenix or Plug application, or run standalone during development via Color.Palette.Visualizer.Standalone.

Three views

• /tonal — UI Colors style. One seed becomes a row of swatches with hex, OKLCH, and contrast values, plus exportable CSS custom properties and Tailwind config.

• /theme — Material Theme Builder style. Five tonal scales and a grid of Material Design 3 role tokens (primary / on-primary / surface / outline / …) for light and dark schemes.

• /contrast — Adobe Leonardo style. Contrast-targeted swatches against a chosen background and a pass/fail matrix for common text sizes.

All state lives in the URL — copy a URL and you've shared the palette.

Mounting in Phoenix

In your router.ex:

forward "/palette", Color.Palette.Visualizer

Running standalone

Color.Palette.Visualizer.Standalone.start(port: 4001)

Optional dependencies

The visualizer pulls in :plug (required for the router) and :bandit (only used by the standalone helper). Both are declared optional: true in this library's mix.exs, so you must add them to your own project's deps to use the visualizer:

{:plug, "~> 1.15"},
{:bandit, "~> 1.5"}

The core palette algorithms have no such dependency and will compile without either of these in place.