Pick five colours and watch a real website come alive.
Most palette tools hand you five swatches and leave you guessing where they go. Webi Colors shows you how to actually use them: where each colour goes, how much to use, and whether it stays readable, live on a real website.
Palettes generated
+18% this quarterWCAG / APCA pass rate
Auto-fixed on the spotColour pairs contrast-checked
+31% year over yearAvg. time to a live preview
-52% vs manual pickingWhere it goes: text, background, buttons and accents, mapped onto a real page.
How much to use: hover a colour in the bar below to see every spot it appears.
Is it readable: every text pair checked on WCAG + APCA, and fixed on the spot.
Used by designers, founders and studios everywhere
- Formwork
- Palette Co
- Quanta Labs
- Meridian Design
- Cobalt Studio
- Verdant & Co
Join more than 2,000 designers and founders already building with it.
Live preview
See your palette on a real website
Webi Colours paints your five colours straight onto a working page: navigation, buttons, cards and body text. You judge them in context, not as a strip of swatches.
- Four real templates: SaaS, agency, store, dashboard
- Light and dark, previewed side by side
Accessibility
Know it's readable before you ship
Every text-and-background pair is scored live against WCAG and the newer APCA standard, then nudged until it passes, so nothing you export ends up unreadable.
- WCAG AA / AAA and APCA on every pair
- Auto-corrected the moment you edit
Export
Take it straight to code
When it looks right, export the palette as CSS custom properties, a Tailwind theme or shadcn tokens, or copy the whole thing as a ready-to-paste prompt for your AI tool.
- CSS · Tailwind · shadcn, one click
- Copy as an AI prompt
From blank canvas to a working palette in four steps
Scroll to walk through the journey. The panel keeps pace with where you are.
01
Assign colours to five semantic roles
Pick Text, Background, Primary, Secondary, and Accent colours using the OKLCH colour picker. Every selection feeds directly into the live preview beneath.
Assign colours to five semantic roles
Pick Text, Background, Primary, Secondary, and Accent colours using the OKLCH colour picker. Every selection feeds directly into the live preview beneath.
Watch a real website re-theme around your palette
A complete template (hero, navigation, cards, buttons and footer) recolours itself live around the roles you defined. No mockups, no guessing how a colour behaves in context.
Score every pairing against WCAG and APCA
Each text-and-background combination is evaluated in real time. Ratios appear live and anything that fails is flagged immediately so you can fix it on the spot.
Copy your palette in any format you need
Download as CSS custom properties, a Tailwind theme config, or shadcn design tokens. Or copy the whole palette as an AI prompt ready for any LLM tool.
Webi Colors, counted up
Every figure below counts up the moment it scrolls into view, then settles into place.
- 0+
- Palettes generated
- 0.00%
- WCAG / APCA pass rate
- 0ms
- Median generation time
- 0.0/5
- Average rating
and counting, free forever
checked on every pairing, automatically
from swatch to live preview
from 6,200 designers and founders
Loved by designers and founders
Don't just take our word for it
Thousands of people pick their palette here every week. Here is what a few of them have to say.
I used to burn a whole afternoon testing colour combinations in Figma. Now I pick five swatches, watch the live template update, and export the CSS before the coffee's gone cold.
Amara OkaforProduct Designer, Formwork StudioWe didn't have budget for a designer when we launched. Webi Colors gave us a proper brand palette in ten minutes, and it's still what our site runs on today.
Daniel ReyesFounder, LoomlyThe contrast checking sold me. Every pairing gets scored against WCAG and APCA as you go, so I stopped shipping colours that fail an accessibility audit six weeks later.
Priya NairFront-end Developer, Verdant StudioGood to know
A quick run through the things people ask most often before they start building a palette.
What is Webi Colors?
A free colour palette generator from Web Innoventix. Pick five roles (text, background, primary, secondary and accent) and watch a full, working website re-theme live as you go.
How do I generate a palette?
Choose a colour for each role, or press space to shuffle all five at once. Keep hitting space until something clicks, then fine-tune from there.
What's the difference between the four templates?
SaaS, agency, store and dashboard are four real page layouts. Switching between them shows how the same palette holds up across very different kinds of site.
Why does it check contrast automatically?
Every text-and-background pairing is scored against WCAG and APCA the moment you pick it. If a pairing fails, it's adjusted automatically so you never ship an unreadable combination.
What is OKLCH and why do you use it?
OKLCH is a colour space built around how humans actually perceive colour. Building the palette on it keeps hues vivid and evenly balanced instead of turning muddy at the edges.
Can I export what I build?
Yes. Export your palette as ready-to-use CSS custom properties, or copy it as a prompt formatted for your favourite AI coding tool. No sign-up needed either way.
Pick your palette. Then let's build the site around it.
Webi Colors is free to use for as long as you like. When you're ready for a full site, Web Innoventix can design and build it around the palette you just created.
No obligation. Most calls take under twenty minutes.