Tailwind Colour Palette Examples
These Tailwind colour palette examples are built around the jobs colours perform in a real interface: a dependable blue for navigation and primary actions, a warm orange for emphasis, quiet neutrals for layout, and a dark foundation for focused screens. The selected palettes use familiar Tailwind-style steps, so their hex values are easy to turn into theme tokens without copying a brand identity. Compare each set as a small system rather than a row of swatches: identify the canvas, readable text pair, action colour and status or supporting accent. Use the examples to make an intentional starting point, then test components in their actual states.
Start with a blue product system
Midnight SaaS, Launchpad, Cloud Console and Tidal UI show four routes into a blue-led interface. For a dark dashboard, make #0F172A the app canvas, #1E293B the card surface and #3B82F6 the active control, as in Midnight SaaS. In Tailwind, that becomes bg-slate-900, bg-slate-800 and bg-blue-500. For a lighter landing page, Launchpad pairs #2563EB with #E0F2FE and #F8FAFC: use blue-600 for a primary button, sky-100 for a callout and slate-50 for the page. Keep blue for navigation, links and one primary action rather than colouring every panel.
Use orange and neutrals to create hierarchy
Focus Flow and Sunset Boulevard provide warm accents without making the layout feel noisy. A restrained pattern is #1E293B for navigation, #FFFBEB for a warm content area and #F59E0B only for a time-sensitive action or selected filter. In Tailwind terms: bg-slate-800, bg-amber-50 and bg-amber-500. Nordic Frost offers the opposite approach for documentation or a calm settings screen: #FAFBFC background, #E5E7EB dividers, #374151 body text and #6366F1 for focus and action states. Treat the indigo as a signal, not a substitute for every neutral. This keeps labels, borders and disabled controls legible without competing with the task.
Build dark mode with tested text pairs
Night Mode Studio and Midnight SaaS are useful dark-mode references because their light text is clearly separated from the base. White #FFFFFF on #111827 measures 17.74:1, while #F8FAFC on #0F172A measures 17.06:1; both exceed the WCAG AA 4.5:1 normal-text threshold described at https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html. Use text-white on bg-gray-900 for a heading or text-slate-50 on bg-slate-900 for interface copy, then reserve #818CF8 or #3B82F6 for links and selected tabs. Check every final foreground/background pairing separately, especially orange button labels and muted text: a palette is not a blanket accessibility guarantee.
Palettes to explore
- Midnight SaaS: #0F172A, #1E293B, #3B82F6, #10B981, #F8FAFC
- Launchpad: #2563EB, #0F172A, #14B8A6, #E0F2FE, #F8FAFC
- Cloud Console: #334155, #6366F1, #22C55E, #E2E8F0, #F8FAFC
- Focus Flow: #1E293B, #7C3AED, #F59E0B, #EDE9FE, #FFFBEB
- Tidal UI: #0369A1, #38BDF8, #0F172A, #E0F2FE, #F0F9FF
- Night Mode Studio: #111827, #E5E7EB, #818CF8, #F472B6, #374151
- Nordic Frost: #FAFBFC, #E5E7EB, #374151, #6366F1, #9CA3AF
- Sunset Boulevard: #1C1917, #F59E0B, #EF4444, #FDE68A, #FFFBEB