5 curated palettes you can browse, click any swatch to copy its hex code, and a live mockup that re-themes with each palette.
A swatch-based palette explorer where each color is clickable to copy. Picking a palette re-themes a small mockup so you can see the colors in actual UI context — text, cards, buttons. The pattern used by Coolors, Huemint, Tailwind's color docs, and most modern brand-system tools. Drop one into your design system page or onboarding so users can pick a starting theme.
Each palette is an array of 5 hex strings + a name. Rendered as a 5-column flex row of swatches that fill their cell. Click any swatch → write the hex to clipboard with navigator.clipboard.writeText, show a brief "copied" tag in the swatch. Selecting a palette tab updates CSS custom properties (--bg, --text, --accent) on the mockup container, which restyles in real time with smooth transitions. Smart text-color logic: each swatch decides text color (light vs dark) based on its luminance.
Pick a palette. Click any swatch to copy its hex. The mockup below re-themes.
Sample copy in the preview — body text uses the muted color, headlines use the dominant text color, accent appears only on the CTA.
Build a color palette explorer for a design system docs page. Define 5 curated palettes (data structure: each has name + array of 5 hex colors representing [bg, surface, muted, text, accent]). Layout: (1) ROW OF TABS — one per palette name, accent-styled when active. (2) Below tabs: palette title (display-serif h4 with italic accent word) + small "5 colors · click to copy hex" caption. (3) MAIN PALETTE — 5-column grid with no gap, border-radius:14px overflow:hidden. Each swatch is aspect-ratio:1 with the color as background, label (uppercase mono) and hex code (smaller mono) revealed in the bottom-left on hover. Auto-pick label color (light or dark) per swatch using a luminance check on the hex value. Click swatch → copy hex via navigator.clipboard.writeText, show "Copied!" momentarily inside the swatch. (4) PREVIEW MOCKUP card below — when palette changes, update its CSS custom properties (--bg, --surface, --muted, --text, --accent) so it re-themes live with a 0.3s background/color transition. Mockup contains: a serif headline using --text, a paragraph using --muted, three small surface cards using --surface backgrounds and --muted captions, and a CTA button using --accent. This way the user sees the palette in actual UI context.