Colors

Sneat 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.

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

Name
Primary
HEX
#696cff
Name
Secondary
HEX
#8592a3
Name
Success
HEX
#71dd37
Name
Danger
HEX
#ff3e1d
Name
Warning
HEX
#ffab00
Name
Info
HEX
#03c3ec
Name
Light
HEX
#fcfdfd
Name
Dark
HEX
#233446

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(24,28,33, 0.015)
Gray 50
RGBA rgba(24,28,33, 0.03)
Gray 100
RGBA rgba(24,28,33, 0.06)
Gray 200
RGBA rgba(24,28,33, 0.1)
Gray 300
RGBA rgba(24,28,33, 0.2)
Gray 400
RGBA rgba(24,28,33, 0.3)
Gray 500
RGBA rgba(24,28,33, 0.4)
Gray 600
RGBA rgba(24,28,33, 0.5)
Gray 700
RGBA rgba(24,28,33, 0.6)
Gray 800
RGBA rgba(24,28,33, 0.8)
Gray 900
RGBA rgba(24,28,33, 0.9)

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(255, 255, 255, 0.015)
Gray 50
RGBA rgba(255, 255, 255, 0.03)
Gray 100
RGBA rgba(255, 255, 255, 0.06)
Gray 200
RGBA rgba(255, 255, 255, 0.1)
Gray 300
RGBA rgba(255, 255, 255, 0.2)
Gray 400
RGBA rgba(255, 255, 255, 0.3)
Gray 500
RGBA rgba(255, 255, 255, 0.4)
Gray 600
RGBA rgba(255, 255, 255, 0.5)
Gray 700
RGBA rgba(255, 255, 255, 0.6)
Gray 800
RGBA rgba(255, 255, 255, 0.8)
Gray 900
RGBA rgba(255, 255, 255, 0.9)
© 2017- ThemeSelection, Hand-crafted & Made with ❤️