> For the complete documentation index, see [llms.txt](https://docs.powerfulform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.powerfulform.com/design-your-form/colours.md).

# Colors and color schemes

Apply a ready-made color scheme to your form, then fine-tune each color by hand.

Colors are set in two steps: pick a color scheme to get a matching palette in one click, then adjust any of the five individual colors under **Customize colors**. Both controls are on the **Appearance** panel of the form editor.

## 📝 Apply a color scheme

{% stepper %}
{% step %}
Go to **Forms**, click your form, then click **Appearance** in the left sidebar.
{% endstep %}

{% step %}
Scroll to **Select your form's color scheme**
{% endstep %}

{% step %}
Click a scheme

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-a54bf955250920b8cadf0708ffffcc0a69733cf7%2Fscreenshot-form-design-color-scheme-grid.png?alt=media" alt="The color scheme grid highlighted, showing twelve presets from Default and Forest Light through to Cosmic Purple and Deep Sea"><figcaption><p>Twelve ready-made colour schemes, from light to dark.</p></figcaption></figure>

12 presets available: Default, Forest Light, Cool Ocean, Matcha Calm, Arctic Light, Golden Dusk, Coral Bloom, Forest Dark, Sunset Dark, Midnight Blue, Cosmic Purple, Deep Sea.
{% endstep %}

{% step %}
Save the form and check the result on the form preview.
{% endstep %}
{% endstepper %}

## 🖌️ Customize Individual Colors

Click any swatch under **Customize colors** to pick a shade, or type a hex value.

<table><thead><tr><th width="178.2332763671875">Color</th><th>Controls</th></tr></thead><tbody><tr><td><strong>Background</strong></td><td>The form's background</td></tr><tr><td><strong>Text</strong></td><td>Headings, labels, descriptions, paragraphs</td></tr><tr><td><strong>Button label</strong></td><td>Text on the main (submit) button</td></tr><tr><td><strong>Button</strong></td><td>Fill of the main button — also the form's accent color: checkboxes, radio ticks, star ratings, date picker selection, progress bar, floating launcher</td></tr><tr><td><strong>Outline button</strong></td><td>Secondary buttons, like Reset</td></tr></tbody></table>

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-9a4f2364d3035d7dc9f4e9fe604ce6475feaf675%2Fscreenshot-form-design-customize-colors.png?alt=media" alt="The Customize colors section highlighted with swatches for Background, Text, Button label, Button and Outline button"><figcaption><p>Pick a scheme first, then override individual colours here.</p></figcaption></figure>

> **💡 Tip:** Check contrast in the live preview before saving — pale text on a pale background is hard to read, and a button label matching the button color can make it look empty.

## Next steps

* [Fonts, size and spacing](/design-your-form/fonts-and-sizing.md) — set the font, text size and field style to go with your palette.
* [Form background](/design-your-form/background.md) — put the form on a background image instead of a flat color.
* [Custom CSS](/settings/custom-css.md) — for color changes the five pickers do not cover.