Loading
Browse the full Tailwind color palette and click any swatch to copy.
DesignClick any swatch to copy
Browse the color families listed on the page (red, blue, emerald, etc.).
Click any color swatch to copy its value.
Toggle the copy format between HEX, RGB, and Tailwind class name.
Use the search box to find a specific color family quickly.
Quickly reference any Tailwind color token and class name without switching to documentation mid-development.
Share the exact Tailwind class name with developers when handing off a Figma design so colors are implemented consistently.
Compare all shades in a family side by side to choose the right shade for backgrounds, text, borders, and hover states.
Copy HEX or RGB values to use in design token files, Styled Components, or any CSS-in-JS solution outside Tailwind.
Tailwind Colors lets you browse the full Tailwind CSS color palette — all shades from 50 to 950 — and copy any color as a HEX, RGB, or Tailwind class name in one click.
Find and convert HEX, RGB, HSL color codes for your designs.
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Design CSS box shadows with live preview, multi-layer support, and copy.
Visually craft any rounded-corner shape with per-corner control.
Generate harmonious color palettes from a single base color.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.