iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Colors & Themes

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind’s color palette is a default scale (50-950) for each hue. Apply via bg-, text-, border-, ring-, fill-, stroke-. Extend in tailwind.config for brand colors.

Default scale, opacity, theming, arbitrary

EXAMPLE
<!-- 1) Default scale — 50 (lightest) → 950 (darkest) -->
<div class="bg-slate-50">…</div>
<div class="bg-slate-100 text-slate-900">…</div>
<div class="bg-sky-500 text-white">…</div>
<div class="bg-emerald-600 text-white">…</div>
<div class="bg-rose-700 text-white">…</div>
<div class="bg-slate-950 text-slate-100">…</div>

<!-- 2) Apply to all utilities -->
<button class="bg-blue-600 text-white border-blue-700 ring-blue-300 hover:bg-blue-700">
    Save
</button>

<!-- 3) Opacity via slash syntax -->
<div class="bg-blue-600/50">50% blue</div>
<div class="bg-blue-600/[0.18]">arbitrary alpha</div>
<div class="text-emerald-700/80">80%</div>

<!-- 4) Hover, focus, dark mode -->
<button class="bg-slate-100 hover:bg-slate-200 focus:ring-2 focus:ring-blue-500 dark:bg-slate-800 dark:hover:bg-slate-700">
    Click me
</button>

<!-- 5) SVG colors -->
<svg class="fill-emerald-500 stroke-emerald-700">…</svg>

<!-- 6) Arbitrary colors when the palette doesn't fit -->
<div class="bg-[#1f6feb]">brand-exact</div>
<div class="bg-[rgb(239,68,68)]">…</div>
<div class="bg-[hsl(190,90%,50%)]">…</div>

<!-- 7) Extend the palette in tailwind.config.js -->
import defaultTheme from 'tailwindcss/defaultTheme';

/** @@type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}'],
    theme: {
        extend: {
            colors: {
                brand: {
                    50:  '#eef9ff',
                    100: '#d9f1ff',
                    500: '#0ea5e9',
                    600: '#0284c7',
                    700: '#0369a1',
                    900: '#0c4a6e',
                },
                ink: defaultTheme.colors.slate,
            },
        },
    },
};

<!-- Use it: -->
<button class="bg-brand-500 hover:bg-brand-600 text-white">Brand button</button>

<!-- 8) CSS variables — runtime theming -->
<style>
:root {
    --color-bg:     theme('colors.white');
    --color-fg:     theme('colors.slate.900');
    --color-accent: theme('colors.brand.500');
}
[data-theme='dark'] {
    --color-bg:     theme('colors.slate.950');
    --color-fg:     theme('colors.slate.100');
}
body { background: var(--color-bg); color: var(--color-fg); }
.accent { color: var(--color-accent); }
</style>

<!-- 9) Color picker for the palette: tailwindcss.com/docs/customizing-colors -->
<!-- WCAG contrast pairs that work well -->
<!--   slate-900 on slate-50    : 16:1  AAA -->
<!--   sky-700   on white       : 5.4:1 AA   -->
<!--   emerald-600 on white     : 4.5:1 AA   -->
<!--   rose-600 on white        : 4.7:1 AA   -->
<!--   slate-100 on slate-900   : 14:1 AAA   -->

<!-- 10) Accessibility checklist -->
<!--   • Test contrast (axe DevTools or Lighthouse) -->
<!--   • Don't use color as the ONLY signal (add icon / text) -->
<!--   • Dark mode: pair every text color with a matching background -->
<!--   • Focus rings — ring-2 + ring-offset-2 + visible contrast -->

Why it matters

Pin brand color hex in tailwind.config with the full 50-950 scale — that one config keeps hover, dark mode, and contrast pairings inside the same coherent palette across the whole app.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!-- Slate, gray, emerald, sky, rose… every shade 50-950 -->
<div class="bg-rose-500 text-white">Hello</div>
Try it Yourself »

Discussion

Loading…