Prismatica — Color Palette Generator

Prismatica is an interactive color-palette studio. Choose a hue, adjust saturation and lightness, and compare five generated colors in a live interface or a contrast matrix. All palette calculations happen in your browser.

Crystal prisms split white light into spectral rays and floating color swatches — conceptual artwork
AI-generated conceptual artwork; not an application screenshot.

PRISMATICA / COLOR STUDIO

Shape color in three dimensions.

Chromatic field

Harmony model

Generated spectrum

Click a color to copy its hex value.

Live environment

PRISMATICAIllustrative design preview

Design at the speed of imagination.

Your palette changes the decorative accents. Text stays on a readable surface. Use the matrix to evaluate your own color pairings.

#6FF6B9#49E4DA#11A8E8#164BB6#0E078D

How to use the app

  1. Choose a hue with the color wheel or the keyboard-accessible hue slider.
  2. Adjust saturation and lightness, then select Monochrome, Complement, Analogous, Triadic or Tetradic.
  3. Review each color pair in the contrast matrix. Copy a hex value, save the palette on this device, or download CSS and JSON.

How the color engine works

The studio converts hue, saturation and lightness values into hexadecimal RGB colors. Each harmony model applies a fixed set of hue offsets, while variations in saturation and lightness create highlights and deeper shades. Results update immediately, so you can explore a design without sending color choices to an external service. The generated colors are starting points, not a guarantee of accessible combinations.

Use contrast results correctly

The contrast matrix compares each foreground color against each background color using relative luminance. Normal text needs at least 4.5:1 for WCAG AA and 7:1 for AAA. Large text needs 3:1 for AA. Large text means at least 18 points, or 14 points when bold. These thresholds assess color contrast only; they do not certify a whole website. The matrix keeps its numeric labels readable even when the sample color pair fails.

Save, export and reuse

A device save stores the current palette in this browser’s local storage and restores it when you return. It does not create an account or synchronize across devices, and clearing browser data removes it. CSS exports contain custom properties you can use in a stylesheet. JSON exports contain the palette name, harmony and hexadecimal colors. Download a file if you need a portable copy.

Questions and answers

What does Prismatica generate?

Prismatica generates five-color palettes from a selected hue, saturation, lightness and harmony model.

Does a passing contrast pair make my site WCAG compliant?

No. A passing pair satisfies a color-contrast threshold for the indicated text size. Keyboard access, semantics, focus, content and other requirements still need evaluation.

Where is my saved palette stored?

It is stored in this browser on this device. Use CSS or JSON export to keep a portable copy.

FIELD GUIDE · PURPOSE AND BOUNDARIES

Prismatica: practical use and context

Prismatica is a browser color studio for interface designers, developers and people preparing a visual brief. It connects palette exploration with explicit foreground/background contrast checks and portable design values.

↑ Back to the application
Crystal prisms split white light into spectral rays and floating color swatches — conceptual artwork
Application artwork reused from its publication image family. The interactive interface is above.

Build a palette around a real interface role

Begin with a base hue, then adjust saturation and lightness while reviewing the five-color result. Choose a harmony model as a starting relationship, not as an aesthetic verdict. Assign tentative roles to the colors: page background, surface, body text, action and accent. A palette is easier to evaluate when each color has a job rather than being admired as five isolated swatches.

Use the contrast matrix on the actual foreground/background pairs you intend to ship. A vivid accent may work for a large decorative shape while failing as small button text. Adjust the palette and check again. Undo and redo help compare deliberate changes; reset is useful when an experiment has moved too far from its starting point.

An example: a readable information card

Imagine a card with a heading, paragraph and primary button. Select a dark surface and a lighter text candidate, then inspect their ratio. Test the button label against its own fill separately. Do not assume that a good paragraph pair also makes a good action pair. Add a visible focus treatment in the consuming website; exporting colors does not implement that interaction.

Move from exploration to a maintained system

Copy individual hexadecimal values for a small experiment, or export CSS and JSON for a portable palette record. The CSS variables are values, not a complete component library. Give roles meaningful names in your project and test them across hover, focus, disabled and error states. Keep a downloaded copy if the palette matters: a device-local save can disappear when browser data is cleared.

What this studio does not certify

Color ratios are only one part of accessibility. Font size, weight, spacing, focus, non-color cues, semantics and interaction must be checked in context. Transparency and images can change the effective background after export. Evaluate the rendered component rather than relying on a swatch result alone. Prismatica does not provide a whole-site compliance certificate or synchronize saved palettes across accounts.