The Preview section shows the selected color inside realistic interface examples. This helps you judge how the color feels in actual UI, not only as a flat swatch.
Preview blocks
- Typography preview shows the color behind headline and body text.
- UI kit preview shows buttons, secondary actions, and alert-style UI.
- Showcase preview uses a card-style mockup.
- Mobile preview shows the color in a chat-style interface.
- Data preview shows the color in dashboard or chart-like UI.
Chromo adjusts text color in several previews based on luminance so you can see whether the color works as a background.
Best use
Use Preview before choosing a brand or product color. A color can look strong as a swatch but too loud or too weak in a real screen.