Tailwind Colors

How to use Tailwind Colors?

There are two ways to use Tailwind colors in your project:

1. Using Tailwind CSS Classes

If you're using Tailwind CSS, you can use the color utility classes directly:

          <div class="bg-blue-500 text-white">
            <p>This uses Tailwind's blue-500 color for background</p>
          </div>
        

2. Using Custom CSS

If you're using regular CSS, you can copy the hex color values:

          .custom-element {
            /* You can copy any color value from above */
            background-color: #3b82f6; /* blue-500 */
            color: #ffffff; /* white */
          }
        

Color Format Conversion Guide

Converting Between Color Formats

You can click any color above and choose your preferred format (HEX, RGB, RGBA or HSL) from the dropdown menu. The color will be automatically copied in your chosen format.

Example Color Values

          /* Same color in different formats */
          HEX:  #3b82f6
          RGB:  rgb(59, 130, 246)
          RGBA: rgba(59, 130, 246, 1)
          HSL:  hsl(217, 91%, 60%)
        

Tips for choosing formats:

• Use HEX (#3b82f6) for broad browser support
• Use RGB/RGBA when you need transparency (the 'A' in RGBA)
• Use HSL when you need to manipulate hue, saturation, or lightness

Using Colors in Different Frameworks

These colors work in any web project. Here are some common use cases:

CSS/SCSS

          .element {
            background-color: #3b82f6; /* Solid color */
            border-color: rgba(59, 130, 246, 0.5); /* Semi-transparent */
          }
        

JavaScript (CSS-in-JS)

          const styles = {
            background: '#3b82f6',
            color: 'rgb(59, 130, 246)',
            border: '2px solid hsla(217, 91%, 60%, 0.5)'
          };