Tailwind Color Palette
Turn any single color into a complete 50–950 Tailwind palette. Get 11 harmonious light, medium, and dark shades for your backgrounds, buttons, borders, and text—ready to copy for Tailwind v4, Tailwind v3, or CSS variables.
Customize your colors
Enter any color to automatically generate 11 matching light, medium, and dark shades.
The name used in your code, e.g. bg-brand-500.
Choose whether supporting shades stay natural, punchy, or soft.
Shades of brand
11 matching colors from light backgrounds to dark text. Click any color to copy.
Your palette:
Click any color swatch to copy its HEX code.
Display ready: All shades are balanced to look clean, sharp, and consistent across phones, laptops, and monitors.
Ready-to-use code:
@theme {
--color-brand-50: oklch(98.5% 0.017 262.9);
--color-brand-100: oklch(91% 0.05 262.9);
--color-brand-200: oklch(83.2% 0.085 262.9);
--color-brand-300: oklch(74.9% 0.122 262.9);
--color-brand-400: oklch(66% 0.162 262.9);
--color-brand-500: oklch(54.6% 0.215 262.9);
--color-brand-600: oklch(46% 0.193 262.9);
--color-brand-700: oklch(38.6% 0.169 262.9);
--color-brand-800: oklch(31.5% 0.143 262.9);
--color-brand-900: oklch(24.7% 0.117 262.9);
--color-brand-950: oklch(18% 0.09 262.9);
}Live preview:
How It Looks in an App
Preview how your shades work for buttons, borders, cards, and text in both light and dark backgrounds.
How to Create Your Tailwind Color Palette
Turn a logo color, button accent, or brand tone into a complete design system in three simple steps.
Enter your base color
Pick or type your color code and choose a name for your code (such as brand or sky).
Fine-tune the style
Choose between Natural, Vibrant, and Soft styles, and preview how the shades look on buttons and cards in light and dark mode.
Copy ready-to-use code
Export clean @theme tokens for Tailwind v4, standard configuration for Tailwind v3, CSS variables, or JSON.
Built for Clean, Consistent Interfaces
Building a real UI requires more than just one color. You need subtle tints for card backgrounds, sturdy tones for borders, punchy shades for buttons, and deep contrast for readable text.
Why Simple Color Tinting Fails
Basic tools simply mix white or black into a color. That approach breaks down quickly: dark shades look like muddy gray charcoal, while light shades look washed out. Pinatool balances lightness smoothly so dark tones keep their rich identity and light tints stay clean and readable.
Keep Your Exact Brand Color
A bright sunny yellow or a dark navy blue does not belong in the middle 500 button slot. By letting you place your color where it naturally fits, your original brand shade stays 100% accurate while the surrounding shades scale smoothly around it.
Tailwind v4 @theme Ready
Tailwind CSS v4 replaces JavaScript configuration files with native CSS variables. Our generator produces clean modern variables inside @theme, enabling instant opacity support (e.g. bg-brand-500/20) with zero setup.
Built-in Contrast Checks
Every swatch is tested against white and black backgrounds. Shades that meet the standard readable text threshold are marked clearly, taking the guesswork out of building accessible web pages.
Export Format Comparison
Choose the format that best fits your development stack and workflow.
| Format | Target Stack | Usage Example |
|---|---|---|
| Tailwind v4 (@theme) | Tailwind CSS v4+ (CSS stylesheet) | bg-brand-500, text-brand-900 |
| Tailwind v3 (config) | Tailwind CSS v3 (tailwind.config.js) | theme.extend.colors |
| CSS Variables | Standard CSS, SASS, CSS Modules | var(--color-brand-500) |
| JSON Tokens | Figma Tokens, Design Systems, Mobile Apps | tokens["500"].hex |
Frequently Asked Questions
Answers to common questions about generating Tailwind shades and using them in your web projects.
How do I add these colors to Tailwind CSS v4?
In Tailwind CSS v4, custom colors are placed directly in your stylesheet using the @theme directive. Copy the generated Tailwind v4 code into your CSS entry file (such as globals.css). Each shade immediately becomes available in your markup, like bg-brand-500, text-brand-900, or border-brand-200.
How do I use this palette in Tailwind CSS v3?
For Tailwind CSS v3 projects, switch the export format tab to Tailwind v3 (config) and copy the colors object into your tailwind.config.js file under theme.extend.colors. This makes all 11 shades (50 through 950) available as utility classes across your project.
Why do these shades look more natural than standard color pickers?
Most basic tint generators simply mix white or black into your color, which turns dark shades into dull charcoal and makes light shades look washed out. Pinatool balances color lightness so dark shades keep their rich, colorful identity and light background tints stay fresh and clean.
What does the main color slot setting do?
If your brand color is a bright yellow or a deep navy, forcing it into a one-size-fits-all 500 button slot distorts the rest of the shades. This setting lets you place your exact color wherever it fits best (e.g. 400 for bright accents, 600 for dark tones). Pinatool locks your color and crafts the remaining shades smoothly around it.
Will these colors look consistent across phones and monitors?
Yes. The generated tokens are optimized to look sharp and consistent across modern smartphones, laptops, and desktop screens without unwanted color shifts.
Are my brand colors uploaded or saved on your servers?
No. The entire color generation, preview, contrast calculation, and code export happens directly in your browser. Your color inputs are not uploaded to Pinatool’s servers.
Explore More Color Tools
Discover complementary utilities for image color extraction and website inspection.
Image Color Palette
Extract main, vibrant, and extra color shades directly from photos and screenshots.
Website Color Palette
Extract brand, background, text, and dark mode colors from any public webpage.
YouTube Channel Library
Organize, search, and watch videos from any public YouTube channel in order.