Live Palette Preview
Four colours, applied to real components — a nav bar, a hero, a pricing table, a dashboard — repainted as you drag, in both schemes, with the contrast of every pair that carries text checked while you work
Body text on the page background. Secondary text, which is where a palette usually fails. A link in the brand colour.
Responsive Navbar — borders and muted text, at the top of every page
Split Hero with Product Panel — the brand at full size, next to body copy
Ship your next idea before the weekend.
Everything you need to launch — auth, billing, analytics and a dashboard your customers will actually understand.
- No credit card required
- Free for 14 days
- Cancel anytime
Three-Plan Pricing Toggle — two levels of emphasis in one row
Simple, honest pricing
Start free. Upgrade when it starts paying for itself.
Free
Everything you need to try it properly.
- Up to 3 projects
- Community support
- Core component library
Pro
For working developers shipping real products.
- Unlimited projects
- Commercial license
- The full library
- Priority email support
- Figma source files
Team
Shared access and billing for a whole team.
- Everything in Pro
- Up to 10 seats
- Shared component presets
- SSO and audit log
- Invoice billing
KPI Cards With Deltas — small text, three surfaces deep
Minimal Footer Bar — the muted-on-muted case
Contrast in the light scheme
Every pair clears its level.
- Body text on the page17.85:1pass
- Body text on a card17.85:1pass
- Secondary text5.81:1pass
- Primary button label6.29:1pass
- Text on a hovered row16.67:1pass
- Link and focus colour on the page6.29:1pass
- Destructive button label4.77:1pass
- Borders against the page1.36:1under 3:1
/* Generated by Hoverlab — hoverlab.dev/tools/palette-preview
Every effect, block and page in the catalog is styled against these
names, so pasting this over your existing token block repaints all of
them at once. */
:root {
--radius: 0.625rem;
--background: oklch(1.000 0.000 0.0);
--foreground: oklch(0.208 0.040 265.8);
--card: oklch(1.000 0.000 0.0);
--card-foreground: oklch(0.208 0.040 265.8);
--popover: oklch(1.000 0.000 0.0);
--popover-foreground: oklch(0.208 0.040 265.8);
--primary: oklch(0.511 0.230 277.0);
--primary-foreground: oklch(1.000 0.000 0.0);
--secondary: oklch(0.960 0.002 355.3);
--secondary-foreground: oklch(0.208 0.040 265.8);
--muted: oklch(0.960 0.002 355.3);
--muted-foreground: oklch(0.509 0.025 301.6);
--accent: oklch(0.940 0.040 237.3);
--accent-foreground: oklch(0.145 0.000 0.0);
--destructive: oklch(0.577 0.245 27.3);
--destructive-foreground: oklch(1.000 0.000 0.0);
--border: oklch(0.897 0.005 347.7);
--input: oklch(0.897 0.005 347.7);
--ring: oklch(0.511 0.230 277.0);
}
.dark {
--background: oklch(0.145 0.006 265.8);
--foreground: oklch(0.985 0.006 265.8);
--card: oklch(0.205 0.006 265.8);
--card-foreground: oklch(0.985 0.006 265.8);
--popover: oklch(0.205 0.006 265.8);
--popover-foreground: oklch(0.985 0.006 265.8);
--primary: oklch(0.720 0.230 277.0);
--primary-foreground: oklch(0.145 0.000 0.0);
--secondary: oklch(0.269 0.006 265.8);
--secondary-foreground: oklch(0.985 0.006 265.8);
--muted: oklch(0.269 0.006 265.8);
--muted-foreground: oklch(0.708 0.006 265.8);
--accent: oklch(0.260 0.050 237.3);
--accent-foreground: oklch(1.000 0.000 0.0);
--destructive: oklch(0.704 0.191 22.2);
--destructive-foreground: oklch(0.145 0.000 0.0);
--border: oklch(0.309 0.006 265.8);
--input: oklch(0.309 0.006 265.8);
--ring: oklch(0.720 0.230 277.0);
}Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Blocks read --radius for every corner they draw, so this is a theme decision rather than a per-component one. Zero is a terminal; one is a consumer app.
What is being repainted
These are the catalog's own blocks, not a mock-up drawn for this page — the same files npx shadcn add installs. They read the semantic tokens above, which is why four colours can repaint all of them and why the answer you get here is the answer you get in your own project.
Keep this palette. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Token GeneratorBuild the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.
- Colour Blindness SimulatorWhich pairs in your palette become the same colour under each type of colour blindness — the failure a contrast checker cannot see. Reports collisions, not just recoloured swatches.
- shadcn Theme EditorTune a shadcn/ui theme against real components in light and dark at once, then install it with one command — the export is a registry item the CLI reads, not a block of CSS to paste and hope.