Django Material implements Material Design 3 color system with a dynamic and accessible color palette.
The colors are organized by their role in the user interface and their relationship to each other.
The specific color values shown below represent the current theme, but can be fully customized.
Primary Colors
Primary colors are the most prominent colors in your UI, used for key components like buttons,
active states, and primary text. Our primary palette is based on Light Blue 700.
Primary
#0277bd
Used for:
Filled buttons
Active states
Active navigation items
Primary actions
Tailwind class: bg-primary or text-primary
Primary Container
#E1F5FE
Used for:
Selected states
Buttons with primary emphasis
Backgrounds for primary-related content
Tailwind class: bg-primary-container or text-primary-container
check
On Primary
#FFFFFF
Content that appears on primary-colored backgrounds, like text and icons in a primary button.
Tailwind class: text-on-primary
check
On Primary Container
#01579b
Content that appears on primary container backgrounds.
Tailwind class: text-on-primary-container
Secondary Colors
Secondary colors are less emphasized than primary colors, used for less prominent components
and to create visual distinction. Our secondary palette is based on Teal 400.
Secondary
#26a69a
Used for:
Secondary buttons
Less prominent actions
Progress indicators
Tailwind class: bg-secondary or text-secondary
Secondary Container
#B2DFDB
Used for:
Secondary component containers
Backgrounds for secondary content
Tag or chip backgrounds
Tailwind class: bg-secondary-container or text-secondary-container
check
On Secondary
#FFFFFF
Content that appears on secondary-colored backgrounds.
Tailwind class: text-on-secondary
check
On Secondary Container
#00695C
Content that appears on secondary container backgrounds.
Tailwind class: text-on-secondary-container
Tertiary Colors
Tertiary colors are used for accents, to draw attention to specific elements,
and for decorative purposes. Our tertiary palette is based on Pink 500.
Tertiary
#e91e63
Used for:
Accent elements
Highlights
Attention-grabbing elements
Tailwind class: bg-tertiary or text-tertiary
Tertiary Container
#FCE4EC
Used for:
Tertiary component containers
Accent backgrounds
Visual distinctions
Tailwind class: bg-tertiary-container or text-tertiary-container
check
On Tertiary
#FFFFFF
Content that appears on tertiary-colored backgrounds.
Tailwind class: text-on-tertiary
check
On Tertiary Container
#AD1457
Content that appears on tertiary container backgrounds.
Tailwind class: text-on-tertiary-container
Error Colors
Error colors communicate error states, warnings, and critical information that requires attention.
Error
#B3261E
Used for:
Error messages
Error states
Critical warnings
Tailwind class: bg-error or text-error
Error Container
#F9DEDC
Used for:
Error container backgrounds
Error message backgrounds
Alert backgrounds
Tailwind class: bg-error-container or text-error-container
check
On Error
#FFFFFF
Content that appears on error-colored backgrounds.
Tailwind class: text-on-error
check
On Error Container
#410E0B
Content that appears on error container backgrounds.
Tailwind class: text-on-error-container
Surface & Background Colors
Surface colors are used for backgrounds of components and containers.
These neutral colors provide the canvas for your UI elements.
Background
#F5F7FA
The main background color of the app or page.
Tailwind class: bg-background
Surface
#FFFFFF
The surface of components like cards, sheets, and dialogs.
Tailwind class: bg-surface
Surface Variant
#E8F5E9
Alternative surface color for distinctive areas.
Tailwind class: bg-surface-variant
Surface Container Low
#E1F5FE
Low-emphasis container background.
Tailwind class: bg-surface-container-low
Surface Container High
#F1F8E9
High-emphasis container background.
Tailwind class: bg-surface-container-high
Surface Bright
#F8FAFF
Bright surface color for areas that need to stand out.
Tailwind class: bg-surface-bright
text_format
On Background
#263238
Text and icons on the background.
Tailwind class: text-on-background
text_format
On Surface
#263238
Text and icons on surfaces.
Tailwind class: text-on-surface
text_format
On Surface Variant
#546E7A
Text and icons on surface variants.
Tailwind class: text-on-surface-variant
Outline Colors
Outline colors are used for boundaries, dividers, and decorative elements.
<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-tertiary">Tertiary text color</p>
<p class="text-error">Error text color</p>
<p class="text-on-surface-variant">On surface variant text color (subtle text)</p>
Django Material uses CSS custom properties (variables) to define all color values, making it easy to customize the theme.
These variables are defined in material/assets/colors.css.
CSS Variables
@theme static {
/* Primary colors */
--color-primary: #0277bd;
--color-on-primary: #FFFFFF;
--color-primary-container: #E1F5FE;
--color-on-primary-container: #01579b;
/* Secondary colors */
--color-secondary: #26a69a;
--color-on-secondary: #FFFFFF;
--color-secondary-container: #B2DFDB;
--color-on-secondary-container: #00695C;
/* Tertiary colors */
--color-tertiary: #e91e63;
--color-on-tertiary: #FFFFFF;
--color-tertiary-container: #FCE4EC;
--color-on-tertiary-container: #AD1457;
/* And so on for other color roles... */
}
How to Customize
To customize the color theme:
Create a new CSS file in your project, e.g., myapp/static/css/theme.css
Override the CSS variables with your custom color values:
:root {
--color-primary: #1976d2;
--color-on-primary: #FFFFFF;
--color-primary-container: #BBDEFB;
/* Override other colors as needed */
}
Include your CSS file after the Material CSS in your base template: