See your color palette in real UI layouts
Pick a familiar interface archetype - GitHub, Stripe, Airbnb and more - and watch your palette render live inside that real UI, not as a flat swatch.
File sidebar next to a code view, dark top bar.
Learn moreHow colors actually look in a real UI
A flat row of color squares can't show you what a palette actually feels like once it's doing a job - lighting up a button, sitting behind a page of body text, or filling a sidebar next to real content. The same accent color that looks confident as a swatch can read as too loud on a hero, or too quiet on a small badge. Seeing colors on a real UI layout - not an isolated chip - is the only reliable way to judge contrast, hierarchy and mood before you commit to a palette.
Explore applies your palette to nine interface archetypes modeled on familiar products - developer tools, dashboards, chat apps, marketplaces and more - so you can compare the same colors across very different layouts in seconds. Switch any archetype to "Your palette" to preview your own colors inside it, or start from that archetype's own signature palette and use it as a base.
Looking for a design style instead of a product? Browse all design styles Want to read more about a specific product-inspired palette? Browse all productsFrequently asked questions
Are these the official brand colors of products like GitHub, Linear, Stripe, etc.?
No. Each archetype is an original layout inspired by that product's general look and feel, not its official brand palette or trademarked design.
Does switching between archetypes change my actual palette?
No, by default the preview just swaps in that archetype's own reference colors. Your working palette in the Color Control panel stays untouched unless you click "Use the [name] palette".
Can I preview my own palette inside these UI layouts instead?
Yes. Click "Apply current palette to preview" to see your current colors rendered inside the selected archetype's mockup instead of its default colors.
Why compare a palette against real UI layouts instead of a flat swatch?
Colors read very differently as small text, large surfaces, or button fills than they do as a plain square. A mockup preview shows contrast and balance the way visitors will actually experience them.
What does the Elements tab show?
A plain component lab: buttons, inputs, badges, alerts and other real controls rendered in their key states (default, hover, disabled, focus) with no page layout around them, plus a live contrast summary so you can see exactly where a color pairing fails WCAG before it ships.
What can I do in the Type Scale tab?
It builds a type scale from independent heading and body settings - font size, ratio, weight and line height for each - and shows the resulting h1-h6/paragraph/small hierarchy both as a plain size ladder and rendered inside a Blog/Editorial layout, using the same heading and body fonts as the rest of the tool.