Can I copy the Tailwind class name or hex value?

Yes. Use the toggle at the top to switch between "Copy Hex" and "Copy Class" modes. In hex mode, clicking a swatch copies the hex code (e.g., #3b82f6). In class mode, it copies the Tailwind class name (e.g., blue-500).

How does the search work?

You can search by color family name (e.g., "blue" or "emerald") or by hex code (e.g., "#3b82f6"). The search filters color families in real-time to show matching results.

Are these the exact Tailwind CSS hex values?

Yes. All hex values match the official Tailwind CSS v3.x default color palette exactly. They can be used directly in your CSS or design tools.

Tailwind CSS Color Picker

Browse all Tailwind CSS colors. Click any swatch to copy the class name or hex value.

Share:𝕏 f in ↗

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

22 color families / 242 total swatches

Frequently Asked Questions

Related Tools

🏷️

Color Name Finder

Enter a hex code or pick a color to find its closest CSS named color. Browse and search all 148 CSS named colors with copy support.

🎨

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats instantly.

🎨

Image Color Picker

Upload any image and pick colors from it. Get HEX, RGB, and HSL values instantly. Build color palettes from your photos.

🎡

Interactive Color Wheel

Explore colors with an interactive HSL color wheel. Pick any hue, adjust saturation and lightness, and get HEX, RGB, and HSL values with automatic harmony generation.

🎨

Color Shade Generator

Generate tints, shades, and tones of any color. Create complete Tailwind CSS color scales. Copy individual values or full palette.

🎨

Color Palette Extractor

Extract dominant colors from any image using median-cut quantization. Get a beautiful palette with hex codes for your designs.