Preview app colors.
This page allows you to preview primary and secondary color palettes across a range of interface screens, review how colors are applied to key UI roles, generate tint and shade scales for each color, inspect individual interface elements with the option to download them as SVGs, and compare alternative color directions to evaluate different visual approaches.
Palette summary
Visual swatches, full palette details, copy tools, and export options.
Palette summary
Visual swatches, full palette details, copy tools, and export options.
All palette colors
Every tint and shade currently used by the preview system. Copy all colors and paste it into Contrast Grid for WCAG 2.0 minimum contrast
compliance.
All palette colors
Every tint and shade currently used by the preview system. Copy all colors and paste it into Contrast Grid for WCAG 2.0 minimum contrast compliance.
Primary color
Enter one hex code. The hash symbol is optional.
Secondary colors
Add one or more optional secondary colors. Each one can be picked visually or typed in as hex.
Edits in the controls stay in draft form until you press Apply palette.
App Preview
Use these sample app screens to see how your active palette works across a variety of general interface layouts. You can quickly review readability, hierarchy, buttons, cards, navigation, and emphasis, then click any preview element to view the colors it uses and download that element as an SVG for use in design tools like Figma.
Preview how a color system feels in a high-visibility section.
Use this space to judge hierarchy, emphasis, and contrast across a larger surface.
Recent items
See allSaved draft
This card lets you evaluate titles, body text, supporting labels, and chips in one place.
Collection view
This section gives you another card layout for comparing accent placement and spacing.
Detail page
Main content
EditThe goal here is to show titles, metadata, primary actions, secondary actions, and softer highlight sections in a single flow.
Last edited
Earlier today
Status
Ready to review
Profile
Highlights
View allCard summary
This grouping is useful for checking emphasis placement, quieter surfaces, and compact metadata.
Preferred layout
Large card with supporting details
Accent usage
Primary for actions, secondary for emphasis
Last sync
2 hours ago
Appearance
Active
Accent emphasis
Use stronger colors for special states
Highlights
Surface callouts enabled
Sync state
Background update available
Actions
ResetFeedback area
This section is mainly for testing controls, grouped rows, and button hierarchy.
Start with a clear direction.
This screen is useful for checking a lighter, more spacious layout with a large heading and minimal controls.
Try this type of layout for onboarding, empty states, or promotional moments.
Use stronger color areas to highlight progress and important changes.
This layout helps compare chart colors, stat cards, and supporting navigation patterns.
Trend preview
The bars below help you judge how multiple secondary colors behave next to the primary color.
Use this screen to compare how multiple accent colors feel in a more analytical interface.
This section is useful for comparing small emphasis areas against standard cards.
Activity
Mark allSystem update
Preview how callouts feel in list rows.
Pinned reminder
A supporting state using a softer surface.
General note
A lower-emphasis row for comparison.