Tailwind CSS color shades, pairings, and accessible usage notes
Use this library to compare Tailwind-style shade scales, choose accessible foreground colors, and understand where each color family fits in real product interfaces.
Slate
Neutral interfaces, documentation, dashboards, borders, and dark-mode surfaces.
Red
Errors, destructive actions, urgent alerts, and validation messages.
Orange
Warm calls to action, onboarding highlights, and friendly warning states.
Amber
Status warnings, attention badges, warm accents, and optimistic empty states.
Yellow
Highlights, educational notes, tags, and light-mode emphasis.
Lime
Fresh accents, positive progress, environmental themes, and energetic UI moments.
Green
Success states, confirmations, healthy metrics, and completion markers.
Emerald
Product success states, high-trust CTAs, dashboards, and finance-adjacent UI.
Teal
Calm product accents, healthcare interfaces, filters, and balanced data states.
Cyan
Developer tools, technical products, focus rings, and crisp dark-mode accents.
Sky
Links, informational states, SaaS highlights, and friendly blue interfaces.
Blue
Primary actions, links, navigation, selected states, and conventional SaaS UI.
Indigo
Enterprise products, editor interfaces, premium states, and calm technical branding.
Violet
Creative tools, AI products, premium details, and expressive gradients.
Purple
Brand moments, creative components, feature highlights, and rich UI accents.
Fuchsia
Expressive accents, visual editors, energetic campaigns, and standout badges.
Pink
Creative brands, user delight, product accents, and secondary CTA treatments.
Rose
Warm danger states, editorial highlights, emotional brands, and polished accents.