---
title: "Edit element background colors"
slug: "/help/demos/edit/content/element-background-color"
last_updated: "2025-09-03T18:03:43Z"
zendesk_id: 41841160059795
zendesk_url: "https://help.walnut.io/hc/en-us/articles/41841160059795-Edit-the-Background-Color-of-Any-Element"
locale: "en-us"
category: "Getting Started"
section: "Editing & Customization Basics"
product: "demos"
topic: "edit/content"
displayed_sidebar: "demosSidebar"
sidebar_position: 9
tags: ["editing","html capture","wcag","accessibility","change color","edit elements"]
---

## **About This Feature**

![Background Color option in the element editor toolbar](pathname:///images/9b6cc7ec549a36d5.png)

The **Background** **Color** option allows you to customize the background of **captured HTML elements** directly within the Walnut Editor. Use the color picker to apply **HEX**, **RGBA**, or **HSLA** values—making it easy to match your brand palette, highlight key areas, or visually distinguish sections in your demo layout.

### **Snapshot**

-   **Feature Status:** Core Feature
-   **Role Access:** Admin, Editor
-   **Location:** Editor (HTML Captures)

## **Quick Start Guide**

1.  Double-click any element or section in the Editor body to activate the **element editor toolbar**.  
    ![Toolbar appearing after double-clicking a captured element](pathname:///images/4ae4a1b4d60cf93e.png)
2.  Click the **Background** **Color** option to open the color picker.  
    ![Color picker panel with background color options](pathname:///images/7e3646c2afc49b6f.png)
3.  Choose a shade from the gradient, or enter a **custom** **color** **code** using the input field at the bottom.
4.  Use the **double** **caret** **icon** next to the input to toggle between supported color formats.  
    ![Double caret toggle button for switching color format types](pathname:///images/939187992dbbccc6.png)

#### **Supported Color Formats**

• **HEX** – Hexadecimal (e.g. #A2E2FE)  
• **RGBA** – Red, Green, Blue, Alpha (e.g. rgba(255, 86, 187, 0.8))  
• **HSLA** – Hue, Saturation, Lightness, Alpha (e.g. hsla(320, 100%, 50%, 0.6))

---

#### **Pro Tip: Keep Accessibility in Mind** **👑**

When customizing background colors for captured HTML elements, be sure to maintain strong contrast between the background and text. This ensures your demos are not just beautiful, but inclusive too!

**For Optimal Accessibility:**

-   Aim for a contrast ratio of 4.5:1 or higher (WCAG AA compliant).
-   Use a contrast checker to test your color combinations.
-   Don’t rely on color alone to convey meaning—use bold text, icons, or clear layout cues.

---