The pixfort color system is built on a set of flexible, powerful color types that can be applied across your entire website. It allows you to easily control and update your site’s design with just a few clicks — making it both advanced and beginner-friendly.
You can access the Color System from: Theme Options > Design System > Colors
Theme Options > Design System > Colors
Main Colors
Main colors are the foundation of your website’s color scheme. Designing your pages using these variable colors gives you the flexibility to completely change your site’s color palette in seconds from the theme options.
Example of Main Colors Used in This Site:
Primary Color
(Variable color)
Secondary Color
(Variable color)
Primary Gradient Color
(Variable color)
Link Color
(Variable + Dynamic color for Dark mode)
Basic Colors
A predefined set of useful colors available in the theme. These are especially helpful for quickly applying commonly used colors to elements throughout your site.
Available Basic Colors:
Red Color
#FF6C5F
Orange Color
#FF9900
Yellow Color
#FFC220
Green Color
#4ADE80
Cyan Color
#0DD3FF
Blue Color
#0389FF
Purple Color
#873EFF
Brown Color
#806D5E
White Color
#FFFFFF
Black Color
#000000
Static Shades of Gray
The pixfort theme includes 9 shades of gray, ranging from very light (Gray 1) to very dark (Gray 9). These are perfect for subtle text colors, section backgrounds, borders, and more.
These shades are especially useful for typography and backgrounds. For example
- Gray 9 – Headings
- Gray 6 – Body text
- Gray 1 – Backgrounds
Gray Colors List:
Gray 1 Color
#F4F4F5
Gray 2 Color
#E4E4E7
Gray 3 Color
#D4D4D8
Gray 4 Color
#A1A1AA
Gray 5 Color
#71717A
Gray 6 Color
#52525B
Gray 7 Color
#3F3F46
Gray 8 Color
#27272A
Gray 9 Color
#18181B
Dynamic Colors
Dynamic Colors are designed to be used when Dark Mode is enabled on your website. Each Dynamic Color includes two values: one for Light Mode and one for Dark Mode.
These dynamic colors can be customized from Theme Options > Design System > Colors.
Default Dynamic Colors Values:
Name
Dynamic Heading
#000000
#FFFFFF
Dynamic Background
#FFFFFF
#000000
Dynamic Gray 50
#FAFAFA
#09090B
Dynamic Gray 100
#F4F4F5
#18181B
Dynamic Gray 200
#E4E4E7
#27272A
Dynamic Gray 300
#D4D4D8
#3F3F46
Dynamic Gray 400
#A1A1AA
#52525B
Dynamic Gray 500
#71717A
#71717A
Dynamic Gray 600
#52525B
#A1A1AA
Dynamic Gray 700
#3F3F46
#D4D4D8
Dynamic Gray 800
#27272A
#E4E4E7
Dynamic Gray 900
#18181B
#F4F4F5
Dynamic Gray 950
#09090B
#FAFAFA
Dynamic Blur
For detailed information about the dark mode:
Check the Dark Mode Guider Article
Opacity Colors
The theme also includes a special set of Dark and Light Opacity Colors, ranging from 10% to 90% opacity. These are helpful for layered effects, overlays, and subtle design accents.
These shades are especially useful for typography and backgrounds.
Opacity Levels:
- Dark Opacity 1–9 – Ranges from 10% to 90% black with a touch of the Primary color
- Light Opacity 1–9 – Ranges from 10% to 90% white
Opacity Colors List:
Dark Opacity 1
Dark Opacity 2
Dark Opacity 3
Dark Opacity 4
Dark Opacity 5
Dark Opacity 6
Dark Opacity 7
Dark Opacity 8
Dark Opacity 9
Light Opacity 1
Light Opacity 2
Light Opacity 3
Light Opacity 4
Light Opacity 5
Light Opacity 6
Light Opacity 7
Light Opacity 8
Light Opacity 9
Custom Colors
To add a new color (static or dynamic), go to Design System > Colors > Custom Colors and create a color variable with your preferred name. For example:
Theme Options > Design System > Colors > Custom Colors
