> For the complete documentation index, see [llms.txt](https://docs.rafflex.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rafflex.io/customise-your-site/choose-site-colours.md). # Choose Site Colours Branding matters. Setting up the right colours makes your site look slick and professional. Here's how to choose your background, your main brand colour and your button text. Your site's look is built from three simple choices: a background, one main brand colour, and whether your button text is light or dark. From these, your site works out all the other shades it needs automatically, so you do not have to pick dozens of colours yourself. *** ### 1. Find the Colour Settings 1. Log in to your **admin panel**. 2. In the left-hand menu, click **Settings** (you will find it under the **Content** group). 3. In the settings menu, click **Branding**. The page that opens is called **Branding & Theme**. 4. Scroll down to the **Color Theme** section. {% hint style="info" %} **A note on spelling.** The admin panel uses the American spelling "Color" for some labels (for example **Color Theme**, **Background Color** and **Primary Color**). They mean exactly the same as "colour", so look out for that spelling when you are searching the page. {% endhint %} The **Color Theme** section has three settings: | Setting | Default | What it controls | | ---------------------- | --------------- | --------------------------------------------------------------------- | | **Background Color** | Dark | The overall background of your site, and whether it is light or dark. | | **Primary Color** | A bright indigo | Your main brand colour, used for buttons and highlights. | | **Button Text Colour** | Light | Whether the text on your buttons is light (white) or dark. | When you have made your choices, scroll to the bottom of the page and click **Save Settings**, then refresh your site to see the result. *** ### 2. Choose a Background Color The **Background Color** sets the main background of your whole site, including the header. It also decides whether your site is a **light theme** (dark text on a pale background) or a **dark theme** (light text on a dark background). Text, cards and borders automatically switch to suit. 1. In the **Color Theme** section, click the **Background Color** dropdown. 2. Scroll through the list and pick the option that suits your brand. 3. Click **Save Settings** and check your site. Here is what the options give you: | Option | Result | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | **White** | A clean, bright white light theme. | | **Light** | A soft off white light theme, slightly gentler on the eyes than pure white. | | **Dark** | A deep charcoal dark theme. This is the default. | | **Black** | A true black dark theme for a bold, high contrast look. | | **Purple** (the first one in the list) | A deep plum dark theme. | | **Slate**, **Gray**, **Zinc**, **Neutral**, **Stone** | Dark themes in subtly different near black greys (some slightly cool, some slightly warm). | | **Red**, **Orange**, **Amber**, **Yellow**, **Lime**, **Green**, **Emerald**, **Teal**, **Cyan**, **Sky**, **Blue**, **Indigo**, **Violet**, **Purple**, **Fuchsia**, **Pink**, **Rose**, **Cerise Red**, **Jade**, **Purple Heart**, **Waikawa Gray**, **Blue Chill** | Dark themes with a rich, very deep tint of the named colour. For example, **Blue** gives a deep navy and **Green** gives a deep forest green. | | **Zorba** | A warm, mid grey taupe. This is noticeably lighter than the other dark options. | {% hint style="info" %} **Two options called Purple?** Yes. The first **Purple** (near the top of the list, after Light) is a deep plum. The second **Purple** (further down, among the other colours) is a deep violet purple. Try both and see which suits your brand. {% endhint %} {% hint style="warning" %} **Choosing Zorba?** Because Zorba is lighter than the other dark backgrounds but still uses light coloured text, check carefully that your text is easy to read before you commit to it. {% endhint %} #### Tips for choosing a background * **Most raffle sites use a dark background.** Dark themes make prize photos and bright buttons stand out, which is why **Dark** is the default. * **Pick a light theme (White or Light) for a clean, retail feel.** Make sure your logo works on a pale background. See [Add Your Logo](/customise-your-site/add-your-logo.md) for tips. * **Coloured backgrounds are subtle.** The named colours give a very deep shade, not a bright one, so your site stays readable. If you want your brand colour to really shine, use it as your **Primary Color** instead. *** ### 3. Pick Your Primary Color The **Primary Color** is your main brand colour. It is used for the things you want customers to notice and click, including: * Buttons, such as the Signup button and the buttons customers use to enter your competitions * Progress bars that show how many tickets have sold * Highlights such as your customer's balance in the header, menu links when hovered over, and the background of the top banner * Buttons, links and accent lines in your customer emails * Parts of some instant win games, such as the Spin the Wheel and Slots screens On some phones, the browser bar at the top of the screen also takes on your Primary Color. **How to set it:** 1. In the **Color Theme** section, click the **Primary Color** box. A colour picker opens. 2. Choose your colour using the picker, or type in your brand's colour code if you have one (a code that starts with **#**, for example `#E11D48`). 3. Click **Save Settings** and check your site. The note underneath the setting explains that your site *generates lighter and darker shades automatically* from this one colour. These shades are used for things like hover effects, borders and backgrounds of highlighted areas, so everything matches your brand without any extra work. {% hint style="success" %} **Pick a strong, vivid version of your brand colour.** The colour you enter is used exactly as it is for your buttons and progress bars, and the lighter and darker shades are created from it. A strong, saturated colour (like a bright red, electric blue or vivid green) gives the best range of shades. Very pale or very dark colours give shades that are hard to tell apart. {% endhint %} #### Tips for choosing a Primary Color * **Make it contrast with your background.** Your buttons need to stand out. A bright colour on a dark background works well, and so does a strong colour on a light background. * **Avoid colours that blend in.** For example, a dark navy Primary Color on the **Blue** background will make buttons hard to spot. * **Use your brand colour code.** If you have brand guidelines or a designer, ask for the colour "hex code" (the code starting with #) so your site matches your logo and social media exactly.

This site features a black background with red as the primary colour, which is used for the buttons and other interactive elements.

*** ### 4. Set Your Button Text Colour The text on your buttons needs to be easy to read against your Primary Color. The **Button Text Colour** setting lets you choose between: * **Light** (white text). This is the default. * **Dark** (very dark grey text). **How to set it:** 1. In the **Color Theme** section, click the **Button Text Colour** dropdown. 2. Choose **Light** or **Dark**. 3. Click **Save Settings** and check a button on your site. **Which should I choose?** | Your Primary Color is... | Choose | | ----------------------------------------------------------- | --------- | | Dark or strong (for example red, blue, purple, deep green) | **Light** | | Bright or pale (for example yellow, lime, gold, light cyan) | **Dark** | If you are not sure, look at a button on your site and ask yourself whether you can read the words at a glance. If you have to squint, switch to the other option. {% hint style="info" %} **Your emails use these colours too.** The buttons in your customer emails use your **Primary Color** as the button colour and your **Button Text Colour** for the words on them. After changing your colours, it is worth placing a test order to check your emails still look good. {% endhint %} *** ### Troubleshooting **I saved my colours but my site has not changed.** Your browser may be showing a saved copy of the old page. Try a hard refresh (hold **Shift** and click the refresh button), or open your site in a private or incognito window. **My buttons are hard to read.** Switch the **Button Text Colour** between **Light** and **Dark**. If neither looks right, try a slightly brighter or darker **Primary Color**. **My site looks too dark or too busy.** Try one of the neutral backgrounds, such as **Dark**, **Black** or **Zinc**, and let your **Primary Color** do the work of adding colour. *** ### Next Steps While you are on the Branding & Theme page, it is a good time to upload your logo and choose your fonts too. {% content-ref url="/pages/JFBpVaScx22FJFdyZCQH" %} [Add Your Logo](/customise-your-site/add-your-logo.md) {% endcontent-ref %} {% content-ref url="/pages/jyGeM3LBsrZIcCEyl02G" %} [Choose Site Fonts](/customise-your-site/choose-site-fonts.md) {% endcontent-ref %}