The colour palette used on your website is a key component in ensuring your brand is visually consistent and successful online. While your palette is initially set up during the launch process, you can easily adjust it yourself via the CMS.
How to Update Your Website Colours
-
Log into the CMS and navigate to:
Settings > Design & Appearance -
Select the Colours tab. You will see several colour input fields that control different elements of your website. Here's what each field controls:
| Field | What it Controls | Tips / Usage |
|---|---|---|
| Main | Primary brand colour | Used across ‘Main’ articles and sections in Octave. Example: #1A73E8 |
| Accent | Accent brand colour | Applies to ‘Accent’ article styles and highlights. Example: #FF9800 |
| Muted | Subtle/neutral elements | Ideal for form borders, muted text, or secondary UI elements. Example: #D1D1D1 |
| Dark | Dark accents & text | Use your darkest brand shade, or #000 as fallback. |
| Text | Standard body text | For readability, usually a dark shade on a light background. |
| Links | Hyperlink colour | For clickable text; ensure contrast with background. |
-
Add your updated colours:
-
Paste your HEX code directly into the field (common in brand guidelines).
-
Or use the colour picker in the CMS to find a suitable shade.
-
-
Save your changes at the bottom of the page.
Additional Colour Options in Design & Appearance
Beyond the main palette, you can customise other elements:
Elements Tab
-
Back to Top Scroller: Adjust background and arrow icon colours for the scroll-to-top button.
-
Form Field Border: Set the border colour around form fields (recommended: subtle grey).
Sections Tab
-
Header Background: Change the header section colour.
-
Navigation Background: Sets the background colour for the header navigation bar. Example: light green to ensure white menu items remain legible (demo Octave site).
-
Overlays: Darkens hero images to improve text readability. Adjust colour and opacity (0 = none, 1 = full).
-
Footer Background: Change the background colour behind all footer panels.
✅ SEO & UX Guidance for Colour Usage
-
Highlight CTAs: Use your primary or accent colours for buttons to improve click-through rates.
-
Maintain contrast: Ensure text is readable over backgrounds to improve accessibility and reduce bounce rates.
-
Consistent branding: A coherent colour palette reinforces brand identity, which can positively impact user trust and engagement.
-
Panel hierarchy: Use muted and tertiary colours for secondary content to guide the user’s focus toward key areas (like hero sections or CTAs).
Comments
0 comments
Please sign in to leave a comment.