Tailwind CSS Color Generator - UI Examples & WCAG Contrast Ratios

Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.

Save Azure RadiancePrimary 50 edfaff 100 d6f3ff 200 b5ebff 300 83e1ff 400 48ceff 500 1eb3ff 600 069bff 700 0081ec 800 086ac5 900 0d5a9b 950 0e375d Cards Website Branding Dashboard Components Shadcn/ui Apps Charts Gradients Logos Headings Track your expenses Expenses $12,543 Jan Feb Mar Apr May Jun Gain control Expenses $ 14,919 Groceries $ 4,973 Household $ 4,973 Travel $ 4,973 Blog Productivity Hacks for Life on the Road Work The Ultimate Digital Nomad Toolkit Travel Design in Cross-Functional Teams Design Create budgets Income…

saved by

• Anson Yu
• Varun Shenoy
• Linda
• Freeman Jiang
• Aryan Naik
• Jack Li
• Howard Halim

related reading

• Realtime Colorsrealtimecolors.com
• Shadersshaders.com
• Colors - Core conceptstailwindcss.com
• Coolors: The super fast color schemes generator | Product Huntproducthunt.com
• SEESAW ✦ Design Inspirationseesaw.website
• Wonder — What you see is what you shipwonder.design
• RandomA11y - Accessible Color Combinationsrandoma11y.com
• DesEngs: Resources for Design Engineersdesengs.com
• Supa Productssupaproducts.lemonsqueezy.com
• getdesign.md — DESIGN.md collection for AI coding agentsgetdesign.md
• DESIGN.md Generator — Design System for AI Agents | design.devdesign.dev
• How to generate color palettes for design systems || Matt Ström-Awn, designer-leadermatthewstrom.com