About mobile & desktop colour preview
Seeing colours on a real layout is the quickest way to judge them. This tool applies your primary, secondary, accent and hover colours to a mobile or desktop mock-up.
What to check
- Is text on each coloured background easy to read?
- Does the hover or pressed colour clearly differ from the normal one?
- Do the primary and accent colours compete or support each other?
Export for developers
Export the chosen colours as JSON, CSS variables or a PNG to share with your team, so everyone uses identical values.
How to judge the preview
Look at the mock-up the way a user would, in a few seconds and at arm's length. If the primary action does not stand out immediately, the accent colour needs more contrast or saturation. If everything looks the same, your hover and secondary colours are too close.
Export formats
- JSON for design tokens and handoff.
- CSS custom properties for web projects.
- PNG to share a quick visual with a client or team.
