EN
Searching...

Website Colors – Using Color Palettes

Choosing the right website colors is crucial for creating a visually appealing and cohesive design that effectively conveys the brand’s message and enhances user experience.

 

In this article:

  1. Current Color Palette
  2. Color Palette Presets
  3. Advanced Edit
  4. Reset Custom Settings

You can manage your website’s colors from the Design (1) section.

Once you are inside the Design section, click on Colors (2) tab.

Current Color Palette

  • The selected Color Palette (1) will be displayed here.
  • You can customize (2) each of the options within a palette and choose the colors according to your preferences.
  • You will see five color options – Background (3), Neutral (4), Accent (5), Dark Accent (6), and Text (7). These options define an overall palette.

Note: Upon making custom adjustments to the Color Palette Options or Advanced Edit, you will see a ‘Modified’ (8) button.

Following is the list of items that affect while making changes to the individual palette options:

Color Palette Presets

Color palette presets (1) are predefined combinations of colors that are carefully selected to provide you with a quick and convenient way to give your website a specific look.

You can easily make changes to the colors of your website by changing the presets. It will be applied globally on your overall website.

You can Filter (2) the list by selecting All, Light, Dark or Bold presets. Once you select a filter, you will see related palettes only.

To choose a Color Palette (3), you simply have to click on it and Publish (4) the changes.

Tip

You can override the default palette settings by customizing the Color Palette Options or from Advanced Edit

Advanced Edit

From Advanced Edit, you have the power to customize color of every single element of your website, granting you full manual control over its aesthetics. Under the ?Advanced Edit, you will find the following options:

Site Color options

  1. Site Title: Choose the text color for your site title.
  2. Site Background: Set the Base color for your website.
  3. Header Background: Set the base color for your website’s header.
  4. Header Border: Set the color of Border for your website’s header.
  5. Footer Background: Set the base color for your website’s footer.
  6. Footer Border: Set the color of Border for your website’s footer.
  7. Footer Text: Set the text color of your website’s footer.
  8. Footer Menu Hover: Set the color of footer menu items when cursor is hovered.

Lightbox Color Options

  1. Background: Set the background color (overlay) that appears when images are viewed in lightbox mode.
  2. Text/Elements: Set the color of navigation arrows, icons, and other elements in the full image view.

Cards Color Option

  1. Background: Set the card color for the dynamic list items (like the text/image lists) present on your website. The card color is applied as the outline and background for the list items.
  2. Border: Set the color for card border. You can choose Default or Custom color for individual sections.

  1. Menu Text: Set the text color for navigation menu items.
  2. Menu Text Hover: Select the text color for menu items while hovering cursor over them.
  3. Menu Text Active: Select the active menu text color.
  4. Dropdown Menu Text: Specify the text color of your dropdown menu items.
  5. Dropdown Menu Text Hover: Select the hover color for the dropdown menu items.
  6. Dropdown Menu Text Base: Select the base color for the dropdown menu items.

Text Color options

  1. Heading (H1): Select the font color for the heading (H1).
  2. Heading (H2): Select the font color for the heading (H2).
  3. Heading (H3): Select the font color for the heading (H3).
  4. Heading (H4): Select the font color for the heading (H4).
  5. Paragraph Text: Select the font color for all paragraph text (P Normal, P Small and P Large).

  1. Buttons: Choose the background color of the buttons from here.
  2. Buttons Text: Select the color of the button’s text.
  3. Link Text: Set the link text color for all the links on website.
  4. Link Text Hover: Set the link text hover color for the links on the website.

Reset Custom Settings

You can easily reset to default palette settings if you have made changes to accent colors by editing a palette or customizing the color settings from Advanced Edit.

You’ll see a Modified button. Hover the cursor over the button, it will change to Reset. You can reset the changes to original from here.

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us