Tailwind Tone Studio
Drop a HEX value or use the picker to spawn a full Tailwind scale with UI previews.
Base color
Type a HEX value or pick visually. Palette updates instantly.
Shades are balanced using HSL deltas that mirror Tailwind steps for quick drop-in themes.
Tailwind scale
Click any swatch to copy its HEX. Fits the 50-950 system Tailwind expects.
UI preview
Component examples using your palette.
Color System
Balanced shades following design system best practices.
Accessibility hints
Pair light/dark swatches to maintain contrast.
Use the full 50-950 shade range to ensure proper contrast across all UI elements.
Statistics Overview
Monitor key metrics with your color palette
Income
$15,989
Expenses
$12,543
Savings
$5,210
Typography Showcase
Explore font sizes and color combinations with your selected palette
Radio Options
Dark Background
Deep background with light text creates strong contrast.
Gradient Overlay
Color overlay blends with image for unique effect.
Vibrant Background
Bold color background with white text for maximum impact.
Ask, Search or Chat...
December 2024
Linear Gradient Text Effect
From 500 to 700
Color Variants
Text Sizes
Extra Small - 12px
Small - 14px
Base - 16px
Large - 18px
Extra Large - 20px
Extra Components
More UI examples with your color palette
Buttons
Badges
Progress
Color Palette Mixes
Explore different tone combinations and gradients
Sunset Vibes
Warm tones inspired by sunsets