Material Design Colors

Bootstrap Material Theme Colors

danger-color

#ff4444

danger-color-dark

#cc0000

warning-color

#ffbb33

warning-color-dark

#ff8800

success-color

#00c851

success-color-dark

#007e33

info-color

#33b5e5

info-color-dark

#0099cc

MDB Colors

default-color

#2bbbad

default-color-dark

#00695c

primary-color

#4285f4

primary-color-dark

#0d47a1

secondary-color

#aa66cc

secondary-color-dark

#9933cc

Material Dark Theme Colors

elegant-color

#2e2e2e

elegant-color-dark

#212121

stylish-color

#4b515d

stylish-color-dark

#3e4551

unique-color

#3f729b

unique-color-dark

#1c2331

special-color

#37474f

special-color-dark

#263238

Full Palette Material Colors

RGBA Colors

rgba(3, 169, 244, 0.3) rgba-blue-light

rgba(244, 67, 54, 0.3) rgba-red-light

rgba(233, 30, 99, 0.3) rgba-pink-light

rgba(156, 39, 176, 0.3) rgba-purple-light

rgba(63, 81, 181, 0.3 rgba-indigo-light

rgba(0, 188, 212, 0.3) rgba-cyan-light

rgba(0, 150, 136, 0.3) rgba-teal-light

#rgba(76, 175, 80, 0.3) rgba-green-light

rgba(205, 220, 57, 0.3) rgba-lime-light

rgba(255, 235, 59, 0.3) rgba-yellow-light

rgba(255, 152, 0, 0.3) rgba-orange-light

rgba(121, 85, 72, 0.3) rgba-brown-light

rgba(158, 158, 158, 0.3) rgba-grey-light

rgba(96, 125, 139, 0.3) rgba-bluegrey-light

rgba(0, 0, 0, 0.3) rgba-black-light

rgba(62, 69, 81, 0.3) rgba-stylish-light

rgba(255, 255, 255, 0.3) rgba-white-light

rgba(3, 169, 244, 0.7) rgba-blue-strong

rgba(244, 67, 54, 0.7) rgba-red-strong

rgba(233, 30, 99, 0.7) rgba-pink-strong

rgba(156, 39, 176, 0.7) rgba-purple-strong

rgba(63, 81, 181, 0.7 rgba-indigo-strong

rgba(0, 188, 212, 0.7) rgba-cyan-strong

rgba(0, 150, 136, 0.7) rgba-teal-strong

#rgba(76, 175, 80, 0.7) rgba-green-strong

rgba(205, 220, 57, 0.7) rgba-lime-strong

rgba(255, 235, 59, 0.7) rgba-yellow-strong

rgba(255, 152, 0, 0.7) rgba-orange-strong

rgba(121, 85, 72, 0.7) rgba-brown-strong

rgba(158, 158, 158, 0.7) rgba-grey-strong

rgba(96, 125, 139, 0.7) rgba-bluegrey-strong

rgba(0, 0, 0, 0.7) rgba-black-strong

rgba(62, 69, 81, 0.7) rgba-stylish-strong

rgba(255, 255, 255, 0.7) rgba-white-strong

rgba(3, 169, 244, 0.3) rgba-blue-slight

rgba(244, 67, 54, 0.3) rgba-red-slight

rgba(233, 30, 99, 0.3) rgba-pink-slight

rgba(156, 39, 176, 0.3) rgba-purple-slight

rgba(63, 81, 181, 0.3 rgba-indigo-slight

rgba(0, 188, 212, 0.3) rgba-cyan-slight

rgba(0, 150, 136, 0.3) rgba-teal-slight

#rgba(76, 175, 80, 0.3) rgba-green-slight

rgba(205, 220, 57, 0.3) rgba-lime-slight

rgba(255, 235, 59, 0.3) rgba-yellow-slight

rgba(255, 152, 0, 0.3) rgba-orange-slight

rgba(121, 85, 72, 0.3) rgba-brown-slight

rgba(158, 158, 158, 0.3) rgba-grey-slight

rgba(96, 125, 139, 0.3) rgba-bluegrey-slight

rgba(0, 0, 0, 0.3) rgba-black-slight

rgba(62, 69, 81, 0.3) rgba-stylish-slight

rgba(255, 255, 255, 0.3) rgba-white-slight

Google Material Colors

Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material Design Guidelines. This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. Choose your favorite colors and get your Material Design palette generated and downloadable. Material design is a visual language and design system developed by Google with an almost flat style and vibrant color schemes. Materialize is a modern responsive CSS framework based on Material Design by Google. Get perfect Material Design color palettes from any hex color. A great collection of material design color palettes generators and tools. These tools will help you derive the perfect colors for your design.

Did you check our free color tools?
A collection of free color tools that will help you choose the right color for your next project! Meet a few tools that will make working with color faster and more fun.