Step by step

1. Open the office and select your organisation

   Find the organisation picker in the left-hand navigation. Select your organisation to make it the active one. If your account belongs to only one organisation, you are placed inside it automatically.

2. Open your organisation's record

   Go to the onboarding checklist and choose the step labelled Badge and colors — its link takes you straight to your organisation's edit form. You can also reach the same form by opening the tenants collection and selecting your organisation's record directly.

3. Click the Website tab

   The organisation record is arranged in tabs. Select the tab labelled Website. This tab holds your domain, template, logo, social links, and your colour fields.

4. Enter the three hex colour values

   The Website tab contains a row of three text fields: primaryColor (default #0b2a4a), secondaryColor (default #b3922f), and tertiaryColor (default #dcd8cf). Each field accepts a 3-digit or 6-digit hex code starting with #, or you can leave it empty. The tertiaryColor field is described as the third colour — its rules, its edges and its tinted bands, and a neutral tone works well there. If a value is not a valid hex code, the field will tell you to enter a hex color, e.g. #0b2a4a.

5. Save the record

   Saving triggers Payload's standard collection update path. The beforeChange hooks enforce that media relations belong to this tenant and run the publishing guards. The hexColor validator then runs for each colour field. On success, the new values are written to the tenants record. No further action is needed — your colour choices are now stored and ready to use.

What happens next

Once saved, the three hex values sit on your organisation's record. Every page of your public website draws its colours from these fields whenever a page is rendered.

Good to know

Each colour field accepts a 3-digit or 6-digit hex code beginning with #, or you can leave a field empty. Any other format is rejected with a prompt to correct it before the record will save.

The default colours are #0b2a4a for primaryColor, #b3922f for secondaryColor, and #dcd8cf for tertiaryColor. If you have not set your own values yet, those defaults are what your website is currently using.