Mockups
See your palette applied to UI layouts and illustrations. UI cards report how the heading text reads against its background; illustrations report the 3:1 non-text contrast between their two key shapes. Hover a shape for its exact hex, click a card to expand it.
Roles — which palette color plays which part
By default roles are assigned by lightness: the darkest color becomes heading text, the lightest becomes the surface, and so on. Override any of them here.
Your own SVG — add a drawing of yours to the grid
Drop an SVG and tell ContrastKit which of its colors play which role; the rest stay untouched. Scripts, links and external references are stripped before anything is shown. Nothing is uploaded, and imported mockups live only in this browser tab.