Question 1

What is perceptual color distance (Lab)?

Accepted Answer

CIELAB (L*a*b*) is a color space designed to be perceptually uniform — meaning equal numerical distances correspond to equal perceived color differences. The Delta-E formula measures the distance between two Lab colors, where Delta-E < 2 is barely noticeable to the human eye and Delta-E > 10 is clearly different. This makes Lab-based matching far more accurate than comparing HEX or RGB values directly, where small numerical differences can produce large perceived color changes (especially near white or saturated colors).

Question 2

What are the Tailwind CSS color shades?

Accepted Answer

Tailwind uses a numeric shade scale: 50 (lightest), 100, 200, 300, 400, 500 (mid-range / brand), 600, 700, 800, 900, 950 (darkest). The 500 shade is the primary brand color for each hue. For accessible contrast on white backgrounds: use 600+ for text (≥4.5:1 ratio). For accessible text on dark backgrounds: use 200–400. The 100 and 200 shades work well for backgrounds and tinted panels.

Question 3

Can I use custom colors alongside Tailwind's palette?

Accepted Answer

Yes — extend the Tailwind config: module.exports = { theme: { extend: { colors: { brand: { 500: '#db2777', 600: '#be185d' } } } } }. This adds utility classes like text-brand-500, bg-brand-600 while keeping all default Tailwind colors. You can also replace the default palette entirely using theme.colors instead of theme.extend.colors — but this removes all Tailwind defaults.

Question 4

How do I use Tailwind colors for dark mode?

Accepted Answer

Tailwind supports dark mode with the dark: variant: class='bg-white dark:bg-slate-900 text-slate-900 dark:text-white'. Enable darkMode: 'class' in tailwind.config.js (toggle via JavaScript) or darkMode: 'media' (follows OS preference). Common pattern: use the same hue but swap shades — light mode: bg-slate-50 / text-slate-900, dark mode: bg-slate-900 / text-slate-50. A hue's 500 shade often works for accents in both modes.

Shade	Lightness	Best used for
50	Lightest	Tinted backgrounds, hover states on white
100–200	Very light	Panel backgrounds, badges, subtle fills
300–400	Light	Borders, dividers, placeholder text
500	Mid / brand	Primary brand color — starting point for each hue
600–700	Dark	Button hover states, accessible text on white (≥4.5:1)
800–950	Darkest	Bold headings, high-contrast text, dark mode surfaces

Tailwind Color Finder

Tailwind shade scale at a glance

Frequently asked questions

Related design tools

Match any color to Tailwind instantly