Tailwind CSS Colors
Complete guide to all Tailwind CSS colors. Explore 22 color families with 11 shades each, from slate to rose. Get hex, RGB, and HSL values for every color.
Color Families
The lightest shade of Slate, perfect for backgrounds and subtle UI elements.
The base slate color, balanced for text and UI elements.
The lightest gray, pure and neutral for clean designs.
The base gray, balanced and versatile.
The lightest zinc, perfectly neutral without color cast.
The base zinc, a pure mid-tone neutral.
The lightest neutral, pure white-adjacent for minimal designs.
The base neutral, perfect mid-gray.
The lightest stone with warm undertones.
The base stone, earthy and warm.
The lightest red, a soft blush pink.
The base red, vibrant and attention-grabbing.
The lightest orange, a warm cream color.
The base orange, energetic and warm.
The lightest amber, a soft golden cream.
The base amber, rich and golden.
The lightest yellow, a soft pale cream.
The base yellow, vibrant and attention-grabbing.
The lightest lime, a soft pale green.
The base lime, vibrant and fresh.
The lightest green, a soft mint tone.
The base green, vibrant and successful.
The lightest emerald, a soft mint green.
The base emerald, luxurious and successful.
The lightest teal, a soft aqua tone.
The base teal, modern and fresh.
The lightest cyan, a soft ice blue.
The base cyan, electric and modern.
The lightest sky, a soft pale blue.
The base sky, clean and professional.
The lightest blue, a soft pale sky tone.
The base blue, professional and trustworthy.
The lightest indigo, a soft lavender tone.
The base indigo, creative and modern.
The lightest violet, a soft pale purple.
The base violet, creative and magical.
The lightest purple, a soft pale lavender.
The base purple, luxurious and creative.
The lightest fuchsia, a soft pale pink-purple.
The base fuchsia, bold and attention-grabbing.
The lightest pink, a soft blush tone.
The base pink, vibrant and energetic.
The lightest rose, a soft warm blush.
The base rose, warm and passionate.
A very light slate gray, ideal for secondary backgrounds and borders.
Very light gray for subtle backgrounds and hover states.
Very light zinc for subtle backgrounds.
Very light neutral for subtle backgrounds.
Very light stone for subtle warm backgrounds.
Very light red for subtle error states.
Very light orange for subtle warmth.
Very light amber for subtle golden highlights.
Very light yellow for subtle highlights.
Very light lime for subtle success states.
Very light green for subtle success states.
Very light emerald for subtle premium success.
Very light teal for subtle highlights.
Very light cyan for subtle info states.
Very light sky for subtle backgrounds.
Very light blue for subtle primary states.
Very light indigo for subtle highlights.
Very light violet for subtle highlights.
Very light purple for subtle highlights.
Very light fuchsia for subtle highlights.
Very light pink for subtle highlights.
Very light rose for subtle highlights.
Light slate for borders, dividers, and subtle backgrounds.
Light gray perfect for borders and dividers.
Light zinc for borders and subtle separators.
Light neutral for borders and dividers.
Light stone for warm borders and dividers.
Light red for error borders and highlights.
Light orange for warm borders and highlights.
Light amber for golden borders and highlights.
Light yellow for borders and highlights.
Light lime for borders and highlights.
Light green for borders and highlights.
Light emerald for borders and highlights.
Light teal for borders and highlights.
Light cyan for borders and highlights.
Light sky for borders and highlights.
Light blue for borders and highlights.
Light indigo for borders and highlights.
Light violet for borders and highlights.
Light purple for borders and highlights.
Light fuchsia for borders and highlights.
Light pink for borders and highlights.
Light rose for borders and highlights.
Medium-light slate for borders and placeholder text.
Medium-light gray for borders and inactive elements.
Medium-light zinc for visible borders.
Medium-light neutral for visible borders.
Medium-light stone for visible warm borders.
Medium-light red for visible alerts.
Medium-light orange for visible warnings.
Medium-light amber, bright and sunny.
Medium-light yellow, bright and sunny.
Medium-light lime, bright and energetic.
Medium-light green, fresh and positive.
Medium-light emerald, fresh and premium.
Medium-light teal, fresh and modern.
Medium-light cyan, bright and electric.
Medium-light sky, bright and cheerful.
Medium-light blue, friendly and approachable.
Medium-light indigo, creative and elegant.
Medium-light violet, magical and whimsical.
Medium-light purple, luxurious and royal.
Medium-light fuchsia, bold and vibrant.
Medium-light pink, sweet and charming.
Medium-light rose, warm and inviting.
Medium slate for secondary text and icons.
Medium gray for placeholder text and icons.
Medium zinc for secondary text and icons.
Medium neutral for placeholder text.
Medium stone for warm placeholder text.
Medium red for icons and accents.
Medium orange for icons and CTAs.
Medium amber for icons and accents.
Medium yellow for icons and accents.
Medium lime for icons and accents.
Medium green for icons and accents.
Medium emerald for icons and accents.
Medium teal for icons and accents.
Medium cyan for icons and accents.
Medium sky for icons and accents.
Medium blue for icons and interactive elements.
Medium indigo for icons and accents.
Medium violet for icons and accents.
Medium purple for icons and accents.
Medium fuchsia for icons and accents.
Medium pink for icons and accents.
Medium rose for icons and accents.
Dark slate for headings and important text.
Dark gray for body text and important elements.
Dark zinc for body text and UI elements.
Dark neutral for body text.
Dark stone for warm body text.
Dark red for error text and buttons.
Dark orange for text and buttons.
Dark amber for text and buttons.
Dark yellow for text and buttons.
Dark lime for text and buttons.
Dark green for text and buttons.
Dark emerald for text and buttons.
Dark teal for text and buttons.
Dark cyan for text and buttons.
Dark sky for text and buttons.
Dark blue for text and hover states.
Dark indigo for text and buttons.
Dark violet for text and buttons.
Dark purple for text and buttons.
Dark fuchsia for text and buttons.
Dark pink for text and buttons.
Dark rose for text and buttons.
Very dark slate for high-contrast text and dark UI.
Very dark gray for headings and high-contrast text.
Very dark zinc for headings and emphasis.
Very dark neutral for headings.
Very dark stone for warm headings.
Very dark red for high-contrast errors.
Very dark orange for high-contrast elements.
Very dark amber for high-contrast elements.
Very dark yellow for high-contrast elements.
Very dark lime for high-contrast elements.
Very dark green for high-contrast elements.
Very dark emerald for high-contrast elements.
Very dark teal for high-contrast elements.
Very dark cyan for high-contrast elements.
Very dark sky for high-contrast elements.
Very dark blue for high-contrast elements.
Very dark indigo for high-contrast elements.
Very dark violet for high-contrast elements.
Very dark purple for high-contrast elements.
Very dark fuchsia for high-contrast elements.
Very dark pink for high-contrast elements.
Very dark rose for high-contrast elements.
Near-black slate for dark mode backgrounds and text.
Near-black gray for dark themes and backgrounds.
Near-black zinc for dark mode backgrounds.
Near-black neutral for dark themes.
Near-black stone for warm dark themes.
Near-black red for dark themes.
Near-black orange for dark themes.
Near-black amber for dark themes.
Near-black yellow for dark themes.
Near-black lime for dark themes.
Near-black green for dark themes.
Near-black emerald for dark themes.
Near-black teal for dark themes.
Near-black cyan for dark themes.
Near-black sky for dark themes.
Near-black blue for dark themes.
Near-black indigo for dark themes.
Near-black violet for dark themes.
Near-black purple for dark themes.
Near-black fuchsia for dark themes.
Near-black pink for dark themes.
Near-black rose for dark themes.
The darkest slate, ideal for dark mode and high-contrast elements.
The darkest gray, nearly black for maximum contrast.
The darkest zinc for maximum contrast dark UI.
The darkest neutral for maximum contrast.
The darkest stone for warm maximum contrast.
The darkest red for maximum contrast.
The darkest orange for maximum contrast.
The darkest amber for maximum contrast.
The darkest yellow for maximum contrast.
The darkest lime for maximum contrast.
The darkest green for maximum contrast.
The darkest emerald for maximum contrast.
The darkest teal for maximum contrast.
The darkest cyan for maximum contrast.
The darkest sky for maximum contrast.
The darkest blue for maximum contrast.
The darkest indigo for maximum contrast.
The darkest violet for maximum contrast.
The darkest purple for maximum contrast.
The darkest fuchsia for maximum contrast.
The darkest pink for maximum contrast.
The darkest rose for maximum contrast.
Ultra-dark slate, nearly black with a cool undertone.
Ultra-dark gray, the deepest neutral shade.
Ultra-dark zinc, nearly pure black.
Ultra-dark neutral, nearly pure black.
Ultra-dark stone with warm undertones.
Ultra-dark red, nearly black with red undertones.
Ultra-dark orange, nearly black with warm undertones.
Ultra-dark amber, nearly black with golden undertones.
Ultra-dark yellow, nearly black with warm undertones.
Ultra-dark lime, nearly black with green undertones.
Ultra-dark green, nearly black with forest undertones.
Ultra-dark emerald, nearly black with luxury undertones.
Ultra-dark teal, nearly black with aqua undertones.
Ultra-dark cyan, nearly black with ocean undertones.
Ultra-dark sky, nearly black with blue undertones.
Ultra-dark blue, nearly black with deep undertones.
Ultra-dark indigo, nearly black with purple undertones.
Ultra-dark violet, nearly black with magical undertones.
Ultra-dark purple, nearly black with royal undertones.
Ultra-dark fuchsia, nearly black with magenta undertones.
Ultra-dark pink, nearly black with rose undertones.
Ultra-dark rose, nearly black with burgundy undertones.
Frequently Asked Questions
How many colors are in Tailwind CSS?
Tailwind CSS includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with 11 shades each (50-950), totaling 242 colors.
What's the difference between slate, gray, zinc, neutral, and stone?
These are all gray-scale colors with different undertones: slate has a blue undertone, gray is neutral, zinc has a cool tone, neutral is pure gray, and stone has a warm brown undertone.
How do I add custom colors to Tailwind CSS?
You can extend the color palette in your tailwind.config.js file under theme.extend.colors. You can add new colors or override existing ones with your brand colors.