Add The Following Colors To The Elementor Color Picker
In the Elementor sidebar, click the menu button (top left-hand and side) and choose “Color Picker”. You can ignore any duplicates, each color only needs to be added once.
Dark background color (left side)
Dark background color (right side)
Light background color
Background overlay color
Button color on dark background
Button color on white background
Icon color on dark background
Icon color on white background
Add The Following Colors To The WordPress Customizer
In the WordPress admin, click on “Appearance > Customize”. Then click on “Colors & Background > Base Colors”. If you’re not using Astra, your theme’s customizer might be organized differently.
Astra Base Colors
Text Color
Theme Color
Link Color
Link Hover Color
Astra Button Colors
Button Text
Button Background
Button Text Hover
Button Background Hover
Your Font Colors
There’s no need to add these to the Elementor color picker, but if you ever need to know these font colors you can come back here at any time.
Heading font color on dark background
Paragraph font color on dark background
Heading font color on white background
Paragraph font color on white background
Color Ideas For Background Overlays
When using background images, we recommend adding a background overlay. This will make it easier for users to read any text that appears on top of your background image. Depending on your color scheme, some colors may look better than others. For best results, we recommend using an opacity somewhere between 0.7 and 0.9.
Gradient Overlay #1
#1a2035 – #233756
Gradient Overlay #1
#243048 – #1a2035
Gradient Overlay #2
#243048 – #233756
Gradient Overlay #3
#243048 – #59a1ea
Gradient Overlay #4
#243048 – #59a1ea
Gradient Overlay #5
#1a2035 – #59a1ea
Gradient Overlay #6
#1a2035 – #59a1ea
Gradient Overlay #7
#233756 – #59a1ea
Gradient Overlay #8
#233756 – #59a1ea