Prismatica Guide: Harmony, Contrast & Export

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