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.

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.

• /scale — Matt Ström-Awn's contrast-constrained tonal scale.

• /gamut — CIE chromaticity diagram with overlayable RGB working spaces and the optional planckian locus.

• /sort — perceptually-ordered swatch strip from a free-form list of colours (rainbow, stepped-hue grid, lightness ramp, or material-aware PBR order).

• /spectrum — diagnostic view: a hue-frequency strip of the input colour list, with achromatic entries shown separately by lightness. Useful for spotting hue gaps and achromatic/chromatic balance in any palette.

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. This module itself is only compiled when :plug is present — without it, Color.Palette.Visualizer doesn't exist as a module.