About This Feature
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
- Double-click any element or section in the Editor body to activate the element editor toolbar.
- Click the Background Color option to open the color picker.
- Choose a shade from the gradient, or enter a custom color code using the input field at the bottom.
- Use the double caret icon next to the input to toggle between supported color formats.
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.