Help Center
New to VisionScaper?
Start here
Help Center › Admin screens, field by field › Settings → Appearance & layout: Colors tab (all 33 colors)
Settings → Appearance & layout: Colors tab (all 33 colors)
Every color swatch on the Colors tab with what it colors, plus the area color-coding switch.
On this page
Open Settings → Business → Appearance & layout and tap the Colors tab. It lists every individual color VisionScaper uses. Each one can be left on Auto or set by you. The three brand colors (Brand / primary, Secondary, Main call to action) are on the Look tab, not here.
Before you start
- Choose your scope first (Change the look for). See the Look tab article.
- If the site owner locked Colors and branding, the swatches are switched off and a note says “The site owner has locked these settings.”
How colors work
Colors set to Auto are worked out from your brand colors and the light/dark mode. Anything you set yourself is checked. If it would be hard to read, VisionScaper nudges it just enough and shows “Adjusted to … so … stay readable” under the color.
Fields
| Color (exact label and key) | What it colors | What to enter | Default / notes |
|---|---|---|---|
Page background colors.bg |
Used for: Behind everything. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Sunken background colors.bg2 |
Used for: List rows, fields, chips. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Card background colors.panel |
Used for: Cards, squares, Hub menu. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Raised card colors.panel2 |
Used for: Numbers (KPIs), highlighted cards. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Header background colors.headerBg |
Used for: Top bar. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Navigation background colors.navBg |
Used for: Hub menu buttons. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Window background colors.modalBg |
Used for: Pop-up windows and sheets. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Field background colors.inputBg |
Used for: Text boxes and drop-downs. Shown in the “Surfaces” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Divider colors.line |
Used for: Thin dividers and field borders. Shown in the “Lines” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Border colors.line2 |
Used for: Card and button outlines. Shown in the “Lines” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Text colors.text |
Used for: All body text. Shown in the “Text” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Headings colors.heading |
Used for: Page and card titles. Shown in the “Text” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Secondary text colors.muted |
Used for: Hints, captions, labels. Shown in the “Text” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Links colors.link |
Used for: Text links. Shown in the “Text” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Focus ring colors.focus |
Used for: Keyboard focus outline. Shown in the “States” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Success colors.success |
Used for: Paid, done, sent. Shown in the “Status” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Error / danger colors.danger |
Used for: Errors, late invoices, delete. Shown in the “Status” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Info colors.info |
Used for: Viewed, informational chips. Shown in the “Status” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Overview colors.cDash |
Used for: Overview square and menu button. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Inbox / messages colors.cInbox |
Used for: Inbox. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Customers colors.cCustomers |
Used for: Customers. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Marketing colors.cMarketing |
Used for: Marketing. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Quotes, estimates & proposals colors.cQuotes |
Used for: Quotes. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Jobs colors.cJobs |
Used for: Jobs. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Calendar colors.cCalendar |
Used for: Calendar. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Landscape design & plans colors.cDesign |
Used for: Landscape plans, Measure. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Invoices & payments colors.cInvoices |
Used for: Invoices. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Equipment colors.cEquipment |
Used for: Equipment. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Crew & field work colors.cCrew |
Used for: Door-to-door, Route planner. Shown in the “Area colors” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Chart color 1 colors.chart1 |
Used for: Bars and first series. Shown in the “Charts” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Chart color 2 colors.chart2 |
Used for: Second series. Shown in the “Charts” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Chart color 3 colors.chart3 |
Used for: Third series. Shown in the “Charts” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Chart color 4 colors.chart4 |
Used for: Fourth series. Shown in the “Charts” card. | Tap the swatch and pick a color. Press Auto (appears once you set it) to go back to the automatic color. | Default Auto: worked out from your brand colors and the light/dark mode. |
Each of these 33 colors is shown in a group card. The groups are Surfaces (8 colors), Lines (2), Text (4), States (1), Status (3), Area colors (11) and Charts (4).
Extra control
| Field (exact label) | What it does for VisionScaper | What to enter and example | Default / notes |
|---|---|---|---|
Color-code the squares and Hub menu by area areas |
In the Area colors card. When ticked, each Hub area square and menu button uses its own color (Overview, Inbox, Customers and so on) so areas are easy to tell apart. | Tick to turn on. | Default off. |
Steps
- Open the Colors tab.
- Find the card that matches what you want to change, for example Surfaces for backgrounds.
- Tap the swatch next to the color name and pick a new color.
- Look at the live preview. If you see “Adjusted to …”, VisionScaper changed it to keep text readable.
- To undo a single color, press Auto next to it. To undo several, press Undo at the top.
- In Area colors, tick Color-code the squares and Hub menu by area if you want a different color for each area.
- Save or publish (see the history and publishing article).
Tips
- Change the brand colors first. Most colors follow them automatically and need no touch.
- Set the Text and Page background together so they have strong contrast.
- The four chart colors set the first four series in graphs and reports.
If something goes wrong
- Swatches are greyed out. Colors are locked by the site owner, or the site owner turned off personal colors (then only light/dark, text size, spacing and motion can be changed).
- A color keeps changing after I pick it. It failed the readability check and was adjusted. Choose a stronger contrast.
- Red “readability problem” count. Open Details, then reset the color listed.