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.

What WCAG contrast ratio should I aim for?

For normal text, aim for at least 4.5:1 contrast ratio (WCAG AA). For large text (18px+ or 14px+ bold), 3:1 is acceptable. For enhanced accessibility (WCAG AAA), use 7:1 for normal text and 4.5:1 for large text. Use online contrast checkers to verify your color combinations.

How to choose colors for light and dark mode?

For light mode, use darker shades (600-900) for text and lighter shades (50-200) for backgrounds. Invert this for dark mode. Keep your primary/accent colors consistent but adjust their shade: use 500-600 in light mode and 400-500 in dark mode for better visibility.

How to use custom colors in Tailwind?

In Tailwind v4, add custom colors in your CSS with an @theme block, like --color-brand-500: oklch(62% 0.2 260). Use any color format (HEX, RGB, HSL, OKLCH) and Tailwind generates all utility classes (bg-brand-500, text-brand-500) automatically. Tailwind v3 used the colors section of tailwind.config.js.

Can I modify Tailwind default colors?

Yes. Redefine a color in @theme (--color-blue-500: ...) to change it, or reset the whole palette with --color-*: initial and define only your own. All utility classes are generated for your custom colors.

How to create a brand color palette in Tailwind?

Start with your brand's primary color and generate a full scale (50-950); in OKLCH, keep the hue and step the lightness. Add it to your @theme block as --color-brand-50 through --color-brand-950. Include complementary colors for secondary actions, success, warning, and error states.

How to use opacity with Tailwind colors?

Use the color opacity modifier syntax like "bg-blue-500/50" for 50% opacity, or "text-gray-900/75" for 75% opacity. This works with any color and any opacity value from 0 to 100. You can also use arbitrary values like "bg-blue-500/[0.35]".

What color formats does Tailwind support?

Tailwind CSS v4 defines its palette in OKLCH (blue-500 is oklch(62.3% 0.214 259.815)), and accepts any CSS color: HEX (#2b7fff), RGB (rgb(43 127 255)), HSL (hsl(216.2 100% 58.4%)), and CSS custom properties (var(--color-blue-500)). Use any of them in your CSS, or define custom colors in your theme in the format you prefer.

How to copy Tailwind color values?

Pick a format above the palette (Class, HEX, RGB, HSL, OKLCH, or Var), then click any shade to copy it in that format. Your choice is remembered. Each family also copies its whole scale as CSS variables, ready for an @theme block.

Difference between color classes and CSS variables?

Tailwind color classes like "bg-blue-500" apply specific color values directly. CSS variables like "--color-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.

What is the difference between HEX, RGB, and HSL?

HEX uses hexadecimal notation (#2b7fff), RGB specifies red, green, blue values (rgb(43 127 255)), and HSL defines hue, saturation, lightness (hsl(216.2 100% 58.4%)). OKLCH, Tailwind's own format, defines lightness, chroma and hue so that equal steps look equal, and it reaches colors more vivid than sRGB: 94 of the 286 shades are, so their HEX, RGB and HSL values here are the nearest sRGB color.

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 11 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 implement dark mode colors?

Use Tailwind's dark mode variant like "bg-white dark:bg-gray-900", or CSS variables that change under a dark class or the user's preference. Define light and dark values for your variables, and every utility that uses them follows.

How to export Tailwind colors for design tools?

Copy color values from this 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.

How do I use Tailwind colors with shadcn/ui?

shadcn/ui uses CSS variables for theming. You can customize colors in your globals.css file by setting variables like --primary, --secondary, --muted, etc. The palette here gives you the Tailwind values to use, for example --primary: var(--color-blue-600).

What are the default Tailwind gray scales?

Tailwind includes multiple gray scales: slate (blue-gray), gray (neutral), zinc (cool gray), neutral (pure gray), and stone (warm gray), and since v4.2 mauve, olive, mist and taupe, each tinted toward its name. Each has shades from 50 to 950. Choose based on your design aesthetic: slate for modern apps, stone for warmer designs.

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.26 families286 shades6 formats

Get Pro Browse colors

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Palette

Every shade, one click

Tailwind CSS v4.3.3, defined in OKLCH. HEX, RGB and HSL are the nearest sRGB color: 94 of the 286 shades are more vivid than sRGB can show.

Format

Click a shade to copy it.

Colors

Seventeen hues, each from 50 (lightest) to 950 (darkest).

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Neutrals

Nine grays, from cool slate to warm taupe, for text, surfaces and borders.

slate
gray
zinc
neutral
stone
mauve
olive
mist
taupe

Picked your colors? With Pro, your AI agent builds blocks and templates in them, from a prompt.

Get Pro

How it works

How to use Tailwind colors

Learn how to copy and implement Tailwind CSS colors in your projects.

Browse the color palette
Explore the complete Tailwind color collection organized by color families.
Choose your color format
Select from HEX, RGB, HSL, CSS variables, or Tailwind utility classes.
Copy the color value
Click on any color to copy its value in your preferred format.
Apply to your project
Paste the color value into your CSS, Tailwind config, or design tool.

Pricing

Build it with Pro

The palette is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your colors for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

FAQ

Frequently asked questions

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

Your colors, built for you

Every block, template and icon, installed by your AI agent in your theme. The palette stays free.

Get Pro

Tailwind Colors in Every Format.

Every shade, one click

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

slate

gray

zinc

neutral

stone

mauve

olive

mist

taupe

How to use Tailwind colors

Browse the color palette

Choose your color format

Copy the color value

Apply to your project

Build it with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

What color formats does Tailwind support?

How to copy Tailwind color values?

Difference between color classes and CSS variables?

What is the difference between HEX, RGB, and HSL?

What color naming convention does Tailwind use?

How to implement dark mode colors?

How to export Tailwind colors for design tools?

How do I use Tailwind colors with shadcn/ui?

What are the default Tailwind gray scales?

How to use custom colors in Tailwind?

Can I modify Tailwind default colors?

How to create a brand color palette in Tailwind?

How to use opacity with Tailwind colors?

Best Tailwind colors for accessibility?

How to create color schemes with Tailwind?

What WCAG contrast ratio should I aim for?

How to choose colors for light and dark mode?

Your colors, built for you