Essentials color system is based on a set of powerful Dynamic and Static colors which can be used in most elements of your website. This system allows you to easily choose and change the whole colors of you website in a few clicks, below you can learn who this advanced yet simple color system works.
Dynamic Colors
These colors represent the core of your website interface, and designing your pages using these colors will give you the ability to change the whole website colors in a few clicks from the theme options (e.g. all premade demoes colors can be changed in seconds using these dynamic colors).
The Dynamic colors can be found in Theme Options > Layout > Colors
Example: for this demo the Dynamic colors are as following:
Static Colors
Static Colors are a set of basic colors which comes with Essentials theme, so you can easily pick a simple and nice color from a set of premade colors (you can override these colors with your own colors from Theme options > Layout > Colors).
These static colors are as following:
#FF6C5F
#ff9900
#ffc168
#b4a996
#0BD3FE
#1274E7
#4ED199
#4B23F7
#ffffff
#000000
Shades of gray
Essentials comes with a set of useful Shades of Gray, numerated from Gray 1 as the lightest shade to Gray 9 as the darkest shade.
- Tip: these shades of gray can be very useful for Typography and Background colors.
- Example: this website has:
- Gray 7 color for Headings.
- Gray 6 for Body Text.
- Gray 1 for Background color.
These shades of gray color are as following:
#f8f9fa
#e9ecef
#dee2e6
#ced4da
#adb5bd
#6c757d
#495057
#343a40
#212529
Opacity colors
Essentials comes with a set of useful Opacity Colors (Dark and Light), numerated from Dark/Light 1 as the lowest opacity to Dark/Light 9 as the highest opacity.
- Tip: these Opacity Colors can be very useful for Typography and Background colors.
- The notation 1 to 9 represents the opacity from 10% to 90% in steps of 10%.
- Example: Dark opacity 4 represents 40% of Black (+ small percentage of Primary color).
The Opacity Colors are as following (the color of the boxes):
