Sneat is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
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 file.
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 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)
|