Colors

Materio is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.


Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes as per bootstrap colors.

Materio also provide custom color (brand colors i.e facebook, twitter etc..) support by using _colors.scss and _colors-dark.scss file.

Name
Primary
HEX
#666cff
Name
Secondary
HEX
#6d788d
Name
Success
HEX
#72e128
Name
Danger
HEX
#ff4d49
Name
Warning
HEX
#fdb528
Name
Info
HEX
#26c6f9
Name
Light
HEX
#dfdfe3
Name
Dark
HEX
#4b4b4b

Light Neutrals

Light neutrals are helpful for offsetting content in light layout for clear and efficient look and are therefore often used as a background/text color for web components.

Gray 25
RGBA rgba(76, 78, 100, 0.015)
Gray 50
RGBA rgba(76, 78, 100, 0.03)
Gray 100
RGBA rgba(76, 78, 100, 0.06)
Gray 200
RGBA rgba(76, 78, 100, 0.12)
Gray 300
RGBA rgba(76, 78, 100, 0.22)
Gray 400
RGBA rgba(76, 78, 100, 0.38)
Gray 500
RGBA rgba(76, 78, 100, 0.5)
Gray 600
RGBA rgba(76, 78, 100, 0.6)
Gray 700
RGBA rgba(76, 78, 100, 0.7)
Gray 800
RGBA rgba(76, 78, 100, 0.8)
Gray 900
RGBA rgba(76, 78, 100, 0.87)

Dark Neutrals

Dark neutrals are helpful for offsetting content in dark layout for clear and efficient look and are therefore often used as a background/text color for web components.
Use *-dark.scss file to Manage dark variables & styles.

Gray 25
RGBA rgba(234, 234, 255, 0.015)
Gray 50
RGBA rgba(234, 234, 255, 0.03)
Gray 100
RGBA rgba(234, 234, 255, 0.06)
Gray 200
RGBA rgba(234, 234, 255, 0.12)
Gray 300
RGBA rgba(234, 234, 255, 0.22)
Gray 400
RGBA rgba(234, 234, 255, 0.38)
Gray 500
RGBA rgba(234, 234, 255, 0.5)
Gray 600
RGBA rgba(234, 234, 255, 0.6)
Gray 700
RGBA rgba(234, 234, 255, 0.7)
Gray 800
RGBA rgba(234, 234, 255, 0.8)
Gray 900
RGBA rgba(234, 234, 255, 0.87)
© 2017- ThemeSelection, Hand-crafted & Made with ❤️