Why a Tailwind palette browser
If you’ve worked with Tailwind, you know the cycle: open the docs, scroll, click your color, scroll, find the right shade, copy the HEX, close the tab, paste, realize you grabbed the wrong shade, repeat.
This is that browse-and-copy loop without the 14 tabs.
Three formats, one click
- Class:
bg-red-500. Drop into your JSX or HTML directly. - HEX:
#ef4444. For non-Tailwind projects, design tools, or graphics. - OKLCH:
oklch(63.7% 0.237 25.33). The modern preferred format, supported in every current browser, perceptually uniform.
Toggle at the top right; one click on a swatch copies in the chosen format.
Use cases
- Theming: pick a primary scale that contrasts well with your background.
- Tooltips and badges: 100/600 pairs make a clean tinted badge (light bg, dark text).
- Dark mode: 800/200 pairs invert the same idea for dark surfaces.
- Validation: red-600 on red-50 for errors, emerald-700 on emerald-50 for success — both pass WCAG AA out of the box.