Tailwind CSS developers regularly face two color-picking scenarios: finding which Tailwind class matches a color in a design mockup, and adding exact brand colors to the Tailwind config. A browser color picker is the fastest tool for both — sample the HEX from any source, then find or configure the right Tailwind value.
Finding the Closest Tailwind Color to a Sampled HEX
Method 1: Tailwind's color reference page
Tailwind's documentation at tailwindcss.com/docs/customizing-colors shows the full color palette with hex values. After sampling a color with ColorPickPro, scan the palette visually to find the closest match. For blues, the choice is usually between blue-500 (#3b82f6) and blue-600 (#2563eb). For red, typically red-600 (#dc2626).
Method 2: uicolors.app
Enter your sampled HEX at uicolors.app and it generates the complete Tailwind-compatible scale closest to your color, showing which standard Tailwind shade is nearest. This is faster than visual comparison for unusual colors.
Method 3: HSL matching
ColorPickPro shows the HSL value alongside HEX. Use the H (hue) value to identify the color family (H around 220 = blue, H around 140 = green, H around 0 = red), then use the L (lightness) value to find the shade:
| Tailwind Shade | Approximate Lightness (L) |
|---|---|
| -50 | L = 95-97% |
| -100 | L = 90-93% |
| -200 | L = 83-87% |
| -300 | L = 74-78% |
| -400 | L = 62-68% |
| -500 | L = 53-57% |
| -600 | L = 44-50% |
| -700 | L = 35-40% |
| -800 | L = 26-32% |
| -900 | L = 17-22% |
Sample Any Design Color for Your Tailwind Project
ColorPickPro gives you HEX, RGB, and HSL instantly from any website or mockup.
Add ColorPickPro FreeAdding Custom Brand Colors to Tailwind Config
Basic custom color extension
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
DEFAULT: '#2563eb', // brand (no shade) = brand-600 equivalent
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
}
}
}
}
}
This generates all the standard Tailwind utilities: bg-brand, bg-brand-100, text-brand-700, border-brand-200, hover:bg-brand-700, etc.
Minimal custom color (just what you need)
If you only need primary, a dark variant, and a light variant:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#2563eb',
'primary-dark': '#1d4ed8',
'primary-light': '#60a5fa',
'primary-bg': '#eff6ff', // Light background for chips/badges
}
}
}
}
Usage: bg-primary, hover:bg-primary-dark, text-primary-light, bg-primary-bg
Semantic color aliasing
Instead of hardcoding color names, use semantic aliases:
// tailwind.config.js
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
extend: {
colors: {
// Brand color (sampled from client site)
brand: {
DEFAULT: '#2563eb',
hover: '#1d4ed8',
light: '#eff6ff',
text: '#1e3a8a',
},
// Semantic aliases pointing to Tailwind defaults
success: colors.green,
danger: colors.red,
warning: colors.amber,
}
}
}
}
@theme { --color-brand: #2563eb; }. This automatically generates bg-brand, text-brand, and other utilities without a config file.
Common Tailwind Color Reference
| Tailwind Class | HEX Value | Common Use |
|---|---|---|
| blue-600 | #2563eb | Primary buttons, links |
| blue-500 | #3b82f6 | Lighter buttons, active states |
| gray-900 | #111827 | Dark headings, dark mode bg |
| gray-700 | #374151 | Body text, secondary text |
| gray-500 | #6b7280 | Muted text, placeholders |
| gray-200 | #e5e7eb | Borders, dividers, light bg |
| red-600 | #dc2626 | Error states, danger buttons |
| green-600 | #16a34a | Success states |
| amber-500 | #f59e0b | Warning states |
| slate-800 | #1e293b | Dark backgrounds, nav bars |
Extract Exact Colors for Your Tailwind Config
ColorPickPro samples any rendered color — from designs, live sites, or mockup images.
Try ColorPickPro FreeFrequently Asked Questions
How do I find the closest Tailwind color to a sampled HEX?
Compare visually at tailwindcss.com/docs/customizing-colors, use uicolors.app to generate the closest Tailwind scale from any HEX, or match by HSL lightness using the shade reference table. Most brand blues map to blue-600; brand reds to red-600; brand greens to green-600 or emerald-600.
How do I add a custom brand color to Tailwind CSS?
Extend theme.colors in tailwind.config.js with your brand color values. Use a 50-900 scale to generate the full range of utilities. Set a DEFAULT value for the most-used shade so bg-brand works without a shade number. For Tailwind v4, define in CSS using @theme { --color-brand: #value; }.
What Tailwind color class matches a specific HEX value?
Common exact matches: blue-600 = #2563eb, blue-500 = #3b82f6, red-600 = #dc2626, green-600 = #16a34a, amber-500 = #f59e0b, gray-500 = #6b7280, gray-200 = #e5e7eb. If your sampled HEX doesn't exactly match, use the closest standard color or extend the config with your exact value.
Should I use Tailwind colors or custom HEX values in my project?
Tailwind colors for neutrals, semantic states, and prototypes. Custom HEX for exact brand colors that don't match Tailwind defaults. In practice, most projects use both — Tailwind defaults for utility colors, custom brand extensions for primary/accent colors. Avoid hardcoding raw HEX in templates; always extend the config with named semantics.
How do I check if a Tailwind color combination passes WCAG contrast?
Sample both text and background with ColorPickPro (even from your rendered Tailwind page), then check both HEX values at webaim.org/resources/contrastchecker. Common failures: gray-400 text on white (#e5e5e5 or white background), blue-300 or lighter on white, and any light-shade color on light-shade background.
More Free Chrome Tools by Peak Productivity
