What color formats does Tailwind support?

Tailwind CSS supports multiple color formats including HEX (#3B82F6), RGB (rgb(59, 130, 246)), HSL (hsl(217, 91%, 60%)), and CSS custom properties (--blue-500). You can use any of these formats in your CSS or configure custom colors in your Tailwind config file using your preferred format.

How to copy Tailwind color values?

Click on any color in our palette to copy its value in different formats. You can copy HEX codes, RGB values, HSL values, CSS variables, or Tailwind class names. Each color shows all available formats, making it easy to use the exact format you need for your project.

Difference between color classes and CSS variables?

Tailwind color classes like "bg-blue-500" apply specific color values directly. CSS variables like "--blue-500" store color values that can be referenced and changed dynamically. CSS variables are better for theming and dynamic color changes, while classes are simpler for static designs.

How to use custom colors in Tailwind?

Add custom colors to your tailwind.config.js file under the "colors" section. You can extend existing colors or completely replace the default palette. Use any color format (HEX, RGB, HSL) and Tailwind will generate all utility classes automatically for your custom colors.

Best Tailwind colors for accessibility?

Use colors with sufficient contrast ratios: slate/gray for text, blue/indigo for primary actions, red for errors, green for success, and yellow/amber for warnings. Tailwind's numbered scale (50-950) helps ensure proper contrast - use lighter shades for backgrounds and darker shades for text.

How to create color schemes with Tailwind?

Choose a primary color (blue, indigo, purple), neutral colors (slate, gray, zinc), and semantic colors (red for errors, green for success). Use the full color scale (50-950) to create variations. Consider both light and dark mode compatibility when selecting your color palette.

Can I modify Tailwind default colors?

Yes, you can extend or completely override Tailwind's default colors in your config file. Use "extend" to add new colors while keeping defaults, or replace the entire "colors" object to use only your custom palette. All utility classes will be generated for your custom colors.

How to implement dark mode colors?

Use Tailwind's dark mode classes like "bg-white dark:bg-gray-900" or CSS variables that change based on the dark class. Define light and dark color values in your CSS variables, and Tailwind will automatically apply the correct colors based on the user's preference or manual toggle.

What color naming convention does Tailwind use?

Tailwind uses descriptive color names (red, blue, green) with numeric scales from 50 (lightest) to 950 (darkest). Each color has 10 shades, with 500 being the base color. This system provides consistent lightness steps across all colors, making it easy to create harmonious designs.

How to export Tailwind colors for design tools?

Copy color values from our reference and import them into Figma, Sketch, or Adobe XD. Many design tools support CSS variable import or color palette plugins. You can also export colors as JSON, CSS, or SCSS files to sync your design system between code and design tools.

Tailwind Colors in Every Format

The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project.

neutral

stone

zinc

slate

gray

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

FAQ

Tailwind Colors FAQ - Common Questions

Find answers to frequently asked questions about Tailwind CSS colors, color formats, implementation, and best practices for web design.