Theme Builder for Angular Material Components

Seed Colors

Generated Colors

Heads up!

These are seed colors, based on this Material theme is generated and may not be part of actual colors. To see actual colors, go to "Generated Colors" tab.

Source Image

User-generated color comes from a user's personal wallpaper. The wallpaper is digitally analyzed through a process called quantization, and a single color is selected as the source color.

Seed/Primary Color

HEX Color

Secondary Color

HEX Color

Tertiary Color

HEX Color

Error Color

HEX Color

Neutral Color

HEX Color

Neutral Variant Color

HEX Color

Material 3

Material 2

Autocomplete

Number

Badge

Text with a badge

Text with large badge

Bottom Sheet

Buttons

Button Toggle

Card

Shiba Inu

Dog Breed

The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.

Chips

One fish

Two fish

Three fish

Four fish

Dog one

Dog two

Dog three

Date Picker

Choose a date

MM/DD/YYYY

First campaign

–

MM/DD/YYYY – MM/DD/YYYY

Second campaign

–

MM/DD/YYYY – MM/DD/YYYY

Dialog

What's your name?

Expansion Panel

This is the expansion title

This is a summary of the content

This is the primary content of the panel.

Self aware panel

Currently I am closed

I'm visible because I am open

Form Field

Fill form field

Hint

Outline form field

Hint

Progress Bar

Progress Spinner

Radio Button

Option 1

Option 2

Select

Toppings

Sidenav

Auto-resizing sidenav

Slide Toggle

Slide me!

...and slide me too!

Slider

Snackbar

Message

Action

Stepper

You are now done.

Table

No.	Name	Weight	Symbol
1	Hydrogen	1.0079	H
2	Helium	4.0026	He
3	Lithium	6.941	Li
4	Beryllium	9.0122	Be
5	Boron	10.811	B
6	Carbon	12.0107	C
7	Nitrogen	14.0067	N
8	Oxygen	15.9994	O
9	Fluorine	18.9984	F
10	Neon	20.1797	Ne

Colors

primary

on-primary

primary-container

on-primary-container

inverse-primary

primary-fixed

on-primary-fixed

primary-fixed-dim

secondary

on-secondary

secondary-container

on-secondary-container

secondary-fixed

on-secondary-fixed

secondary-fixed-dim

tertiary

on-tertiary

tertiary-container

on-tertiary-container

tertiary-fixed

on-tertiary-fixed

tertiary-fixed-dim

background

on-background

surface

on-surface

surface-dim

surface-bright

surface-container-lowest

surface-container-low

surface-container

surface-container-high

surface-container-highest

shadow

scrim

surface-tint

inverse-surface

inverse-on-surface

outline

outline-variant

neutral

neutral10

error

on-error

error-container

on-error-container

surface-variant

on-surface-variant

neutral-variant

neutral-variant20

inverse-secondary

inverse-tertiary

Autocomplete

Badge

Bottom Sheet

Buttons

Button Toggle

Card

Checkbox

Chips

Date Picker

Dialog

Expansion Panel

Form Field

Menu

Progress Bar

Progress Spinner

Radio Button

Select

Sidenav

Slide Toggle

Slider

Snackbar

Stepper

Table

Colors