LP-SETTINGS-colors

Add These Colors To Elementor's
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)

#1a2035

Dark background color (right side)

#233756

Light background color

#f4f5f7

Background overlay color

#243048

Button color on dark background

#59a1ea

Button color on white background

#59a1ea

Icon color on dark background

#59a1ea

Icon color on white background

#59a1ea

Font Colors (Optional)

I would wait before adding these to your color picker, since they may just end up confusing you. If you need these colors sometime in the future you can always come back here and add them to the color picker.

Heading font color on dark background

#ffffff

Paragraph font color on dark background

rgba(255,255,255,0.8)

Heading font color on white background

#1a2035

Paragraph font color on white background

#686e7c

Add These 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

Theme Color

#59a1ea

Link Color

#59a1ea

Text Color

#686e7c

Link Hover Color

#1a2035

Astra Button Colors

Button Text

#ffffff

Button Text Hover

#ffffff

Button Background

#59a1ea

Button Background Hover

#1a2035

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