Colors.id

    Material UI - Google's Material Design Colors

    Google's Material Design color system with vibrant and accessible color choices. Material UI is a robust React design system rooted in Google’s Material Design, featuring a vibrant palette for dynamic interfaces. Use colors like #1976D2 (primary blue) and #E0E0E0 (neutral) to create polished, user-friendly UIs quickly.

    Visit WebsiteDocumentation

    Google Material Design Color Palette

    Primary 50
    #E3F2FD
    primary-50
    Primary 100
    #BBDEFB
    primary-100
    Primary 200
    #90CAF9
    primary-200
    Primary 300
    #64B5F6
    primary-300
    Primary 400
    #42A5F5
    primary-400
    Primary 500
    #2196F3
    primary-500
    Primary 600
    #1E88E5
    primary-600
    Primary 700
    #1976D2
    primary-700
    Primary 800
    #1565C0
    primary-800
    Primary 900
    #0D47A1
    primary-900
    Secondary 50
    #FCE4EC
    secondary-50
    Secondary 100
    #F8BBD9
    secondary-100
    Secondary 200
    #F48FB1
    secondary-200
    Secondary 300
    #F06292
    secondary-300
    Secondary 400
    #EC407A
    secondary-400
    Secondary 500
    #E91E63
    secondary-500
    Secondary 600
    #D81B60
    secondary-600
    Secondary 700
    #C2185B
    secondary-700
    Secondary 800
    #AD1457
    secondary-800
    Secondary 900
    #880E4F
    secondary-900
    Purple 50
    #F3E5F5
    purple-50
    Purple 100
    #E1BEE7
    purple-100
    Purple 200
    #CE93D8
    purple-200
    Purple 300
    #BA68C8
    purple-300
    Purple 400
    #AB47BC
    purple-400
    Purple 500
    #9C27B0
    purple-500
    Purple 600
    #8E24AA
    purple-600
    Purple 700
    #7B1FA2
    purple-700
    Purple 800
    #6A1B9A
    purple-800
    Purple 900
    #4A148C
    purple-900

    Material UI Color Generator

    Generate and test colors from the Material UI palette

    Color Generator

    Generate color variations and test them in real components

    Real-world UI Examples

    See how Material UI 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 Material UI configuration is complete.

    Traditional Components

    Buttons
    Alerts
    Form Elements
    Badges
    Primary
    Secondary
    Accent
    Outline