Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorDesign System Color BrowserView all 9

Design System Color Browser

Browse Tailwind-style color scales with a live preview on real UI elements.

Runs in your browserNo sign-up required
Choose a Color
indigo — 50 to 950
50
100
200
300
400
500
600
700
800
900
950
Live Preview — indigo-500 (#2c2fed)

Click any swatch above to preview it on real UI elements below.

Badge
Card Title

Card content using this color as an accent border.

Preview, Not Just a Grid

A flat grid of swatches only tells you so much — seeing a stop applied to an actual button, badge, and card is what shows whether it'll really work in your interface. This browser covers 19 hues in the familiar Tailwind-style naming convention, each with its own live preview.

How to Use This Tool

  1. 1Pick a hueSlate, red, orange, blue, violet, and 14 more.
  2. 2Browse its full scale11 stops from 50 (lightest) to 950 (darkest).
  3. 3Click a swatchCopies its hex value and updates the live preview below.
  4. 4Check the real-UI previewSee the exact stop applied to a button, badge, and card.

Good to Know

  • This is a Tailwind-STYLE color system generated with our own verified shade algorithm — not a byte-for-byte reproduction of Tailwind's own published hex values, which we didn't want to guess at from memory and present as exact.
  • Seeing a color swatch alone rarely tells you how it'll actually look — the live preview on a real button, badge, and card is what separates a useful color browser from a plain grid.
  • Every hue follows the same 50-950 lightness curve as the Color Shade Generator, so switching between hues keeps a consistent "feel" across the whole system.

Frequently Asked Questions

Are these the exact Tailwind CSS colors?

No — they're a Tailwind-STYLE system (same naming convention and scale shape), generated with our own verified shade algorithm rather than copied from Tailwind's source, since reproducing their exact values from memory risked small inaccuracies.

Why does the live preview matter?

A flat swatch and a color applied to a real button or card can look surprisingly different — the live preview is exactly the "contextual preview" step research on color tools identifies as the real differentiator over a plain color grid.

Can I export this as CSS?

For a copyable, exportable version of any single hue's scale (CSS variables, Tailwind config, or SCSS), use the Color Shade/Tint Generator with that hue's base color.