--- title: Set app colours in Purple Manager slug: experience/set-app-colours-in-purple-manager description: In this article, you learn how to set the app colours for your app template in Purple Manager. docTags: createdAt: 2022-10-11T13:27:26.000Z --- Purple Manager *** ## Summary In this article, you learn how to change the native colours for your app template in Purple Manager. :::hint{type="info"} If you want to apply this change for your Purple App, you have to rebuild the app. It demands a new submit in the App Stores, to make the change visible to your users. ::: *** ## Preconditions - Have a team created in Purple Manager - Have yourself invited to the team in Purple Manager - Have an app created in Purple Manager - Have at least 'App Admin' role in Purple Manager - Have the hexadecimal value (e.g. ff0000 for red) for the desired primary colour and the secondary colour of your app defined - Read the explanation of the Purple Manager app colour concept to [learn what is the primary and secondary colour.](https://docs.purplepublish.com/setup/colour-settings-in-purple-manager) *** ## How-to video ::embed[]{url="https://www.youtube.com/watch?v=oY04ZqDT_r0"} *** ## How-to guide 1\. Go to Purple Manager -> 'Apps' -> 'Overview'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/8bdf7963-3e9b-41cc-9ff9-293541ecdfbf/b3251226-d13a-4dfa-98c7-5ca250ffa0da.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A1422) 2\. Click 'App Design'. ::Image[]{src="https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/268e72ee-3fc2-455b-8a79-07116b8a10af/e851c52a-bd94-4576-b4b1-084290f3e7fa.png?crop=focalpoint&fit=crop&fp-x=0.2499&fp-y=0.2323&fp-z=2.0000&w=1200&ar=2880%3A1422" size="96" width="1200" height="593" position="center" showCaption="false"} 3\. Click 'General'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/c46613de-e1e9-470a-8e14-609c4d924ddb/2a278b7e-219e-4940-a68e-236906821aa5.png?crop=focalpoint\&fit=crop\&fp-x=0.4952\&fp-y=0.4921\&fp-z=1.0390\&w=1200\&ar=2880%3A1422) 4\. Click 'Basic Settings'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/f8668b33-ff4a-4a71-acd2-e6b234140727/c86fef8e-1aac-416d-b719-5794f1c18d0d.png?crop=focalpoint\&fit=crop\&fp-x=0.5800\&fp-y=0.4536\&fp-z=1.3032\&w=1200\&ar=2880%3A1422) 5\. Go to 'Color scheme'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/b9310306-396f-4c07-a99b-7d7cdb00381f/020e53fb-1ff8-42c8-bc36-05afcc96aabb.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A1422) 6\. In the '01. Primary Color' text field, insert the hexadecimal value (e.g. #00adef for light blue) for the desired primary colour of your app. ::Image[]{src="https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/0f53ae2c-5b6d-466e-9795-ebbb04024304/512335a0-dcb1-4137-a71b-c10c91f6c350.png?crop=focalpoint&fit=crop&fp-x=0.4251&fp-y=0.5649&fp-z=2.0000&w=1200&ar=2880%3A1422" size="70" width="1200" height="593" position="center" showCaption="false"} 7\. In the '02. Secondary Color' text field, insert the hexadecimal value (e.g. #005b7d for blue) for the desired secondary colour of your app. ::Image[]{src="https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/12ce9360-7e05-488c-8f64-745287dea301/c5b5bf13-dec0-404d-aa51-348c7323f813.png?crop=focalpoint&fit=crop&fp-x=0.4014&fp-y=0.6772&fp-z=2.8126&w=1200&ar=2880%3A1422" size="70" width="1200" height="593" position="center" showCaption="false"} :::hint{type="info"} If you can't edit the fields for changing the hexadecimal value, just click on 'overwrite' on the right-hand side of the colour fields, to unlock them. ::Image[]{src="https://images.tango.us/workflows/6b92f6e9-251f-4bc3-ba95-d88990b9634f/steps/ffe8e8e2-a988-4ae5-a15f-6b981f634a25/a4a34a1f-9640-46e7-b3ff-dd6d52108abd.png?crop=focalpoint&fit=crop&fp-x=0.7250&fp-y=0.3741&fp-z=2.8520&w=1200&ar=2880%3A1422" size="70" width="1200" height="593" position="center" showCaption="false"} *** ::: 8\. Click 'Save'. ::Image[]{src="https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/dd260fd8-0cae-408d-aff1-4d52f1cee46c/340710a3-50e2-425a-9885-2ad8e2b082c1.png?crop=focalpoint&fit=crop&fp-x=0.8507&fp-y=0.8622&fp-z=4.0000&w=1200&ar=2880%3A1422" size="50" width="1200" height="593" position="center" showCaption="false"} 9\. Go back to 'Overview'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/a0dd7f4b-5c5e-4ed9-bbd7-92fed32bc807/40b943b0-3847-4be7-8ddd-c9dea6aea749.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A1422) 10\. Click 'Build App'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/3d026f5f-bd61-4f06-9c0e-f971707aa97e/b98c9505-2d1a-425f-98cf-b7f588c329e2.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A1422) 11\. In the pop-up choose 'Preview App' and Platforms 'iOS' and 'Android'. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/799dd52c-eec4-4803-8ab6-ac80d079eed6/e39233c3-377e-4a7a-98d4-5d220729707b.png?crop=focalpoint\&fit=crop\&fp-x=0.5146\&fp-y=0.6023\&fp-z=2.0000\&w=1200\&ar=2880%3A1422) 12\. Click 'Build'. ::Image[]{src="https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/3fec81bb-4b57-4d1f-a55d-11885609b80d/a0ca7719-4caa-4d62-bc14-4dd7b6b32afc.png?crop=focalpoint&fit=crop&fp-x=0.6306&fp-y=0.8740&fp-z=3.5175&w=1200&ar=2880%3A1422" size="50" width="1200" height="593" position="center" showCaption="false"} 13\. Back on 'Overview', you can scan the QR code to download the Purple preview app to an iOS and Android device and test the colours. ![](https://images.tango.us/workflows/781f191d-1ec2-4ecd-b79d-bf1953c9f2f7/steps/2fd67b14-f284-41d7-a9b7-9322dfa5ab39/106e17ee-23d5-4947-a65e-8e9576da51f3.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2880%3A1422) ***