Colors.id

    Tailwind CSS Colors

    A comprehensive color palette with multiple shades for each color, perfect for utility-first CSS. Tailwind CSS is a utility-first framework with a vibrant, customizable color palette designed for rapid UI development. Explore dynamic utilities like bg-blue-500 (#3B82F6) and text-green-600 (#059669), copy classes, and craft modern, visually stunning interfaces effortlessly.

    Visit WebsiteDocumentation

    Color Palette

    Blue 50
    #EFF6FF
    hsl(214, 100%, 97%)
    bg-blue-50
    Blue 100
    #DBEAFE
    hsl(214, 95%, 93%)
    bg-blue-100
    Blue 200
    #BFDBFE
    hsl(213, 97%, 87%)
    bg-blue-200
    Blue 300
    #93C5FD
    hsl(212, 96%, 78%)
    bg-blue-300
    Blue 400
    #60A5FA
    hsl(213, 94%, 68%)
    bg-blue-400
    Blue 500
    #3B82F6
    hsl(217, 91%, 60%)
    bg-blue-500
    Blue 600
    #2563EB
    hsl(221, 83%, 53%)
    bg-blue-600
    Blue 700
    #1D4ED8
    hsl(224, 76%, 48%)
    bg-blue-700
    Blue 800
    #1E40AF
    hsl(226, 71%, 40%)
    bg-blue-800
    Blue 900
    #1E3A8A
    hsl(224, 64%, 33%)
    bg-blue-900
    Gray 50
    #F9FAFB
    hsl(210, 20%, 98%)
    bg-gray-50
    Gray 100
    #F3F4F6
    hsl(220, 14%, 96%)
    bg-gray-100
    Gray 200
    #E5E7EB
    hsl(220, 13%, 91%)
    bg-gray-200
    Gray 300
    #D1D5DB
    hsl(212, 12%, 84%)
    bg-gray-300
    Gray 400
    #9CA3AF
    hsl(218, 11%, 65%)
    bg-gray-400
    Gray 500
    #6B7280
    hsl(220, 9%, 46%)
    bg-gray-500
    Gray 600
    #4B5563
    hsl(215, 14%, 34%)
    bg-gray-600
    Gray 700
    #374151
    hsl(217, 19%, 27%)
    bg-gray-700
    Gray 800
    #1F2937
    hsl(215, 28%, 17%)
    bg-gray-800
    Gray 900
    #111827
    hsl(222, 47%, 11%)
    bg-gray-900
    Emerald 50
    #ECFDF5
    hsl(151, 81%, 96%)
    bg-emerald-50
    Emerald 100
    #D1FAE5
    hsl(149, 80%, 90%)
    bg-emerald-100
    Emerald 200
    #A7F3D0
    hsl(152, 76%, 80%)
    bg-emerald-200
    Emerald 300
    #6EE7B7
    hsl(156, 73%, 67%)
    bg-emerald-300
    Emerald 400
    #34D399
    hsl(158, 64%, 52%)
    bg-emerald-400
    Emerald 500
    #10B981
    hsl(160, 84%, 39%)
    bg-emerald-500
    Emerald 600
    #059669
    hsl(161, 94%, 30%)
    bg-emerald-600
    Emerald 700
    #047857
    hsl(163, 94%, 24%)
    bg-emerald-700
    Emerald 800
    #065F46
    hsl(165, 93%, 19%)
    bg-emerald-800
    Emerald 900
    #064E3B
    hsl(164, 86%, 16%)
    bg-emerald-900
    Red 50
    #FEF2F2
    hsl(0, 86%, 97%)
    bg-red-50
    Red 100
    #FEE2E2
    hsl(0, 93%, 94%)
    bg-red-100
    Red 200
    #FECACA
    hsl(0, 96%, 89%)
    bg-red-200
    Red 300
    #FCA5A5
    hsl(0, 94%, 82%)
    bg-red-300
    Red 400
    #F87171
    hsl(0, 91%, 71%)
    bg-red-400
    Red 500
    #EF4444
    hsl(0, 84%, 60%)
    bg-red-500
    Red 600
    #DC2626
    hsl(0, 73%, 51%)
    bg-red-600
    Red 700
    #B91C1C
    hsl(0, 74%, 42%)
    bg-red-700
    Red 800
    #991B1B
    hsl(0, 70%, 35%)
    bg-red-800
    Red 900
    #7F1D1D
    hsl(0, 63%, 31%)
    bg-red-900

    Tailwind CSS Color Generator

    Generate and test colors from the Tailwind CSS palette

    Color Generator

    Generate color variations and test them in real components

    Real-world UI Examples

    See how Tailwind CSS colors look in practical applications

    Track your expenses

    Total Expenses

    $12,543

    Analytics

    Revenue$15,989
    Expenses$12,543

    Gain control

    Advanced settings

    Categories

    Groceries

    9 transactions

    $2,345

    Household

    12 transactions

    $1,876

    Financial Summary

    Income

    $15,989

    $18,871 last period

    Expenses

    $12,543

    $10,221 last period

    Success

    All Set!

    Your Tailwind CSS configuration is complete.

    Traditional Components

    Buttons
    Alerts
    Form Elements
    Badges
    Primary
    Secondary
    Accent
    Outline