Colour Picker
From Rocketspark Support
Contents |
Introduction
The colour scheme of your website is crucial for presenting a professional image and Rocketspark makes it easy to set up your own colour scheme in a simple step by step process.
Once you have selected your colour scheme Rocketspark will automatically apply your colour scheme to your entire site to ensure your colours are used consistently and your site looks great.
When using our colour picker you can pick just your main colour and let our colour picker do the rest or pick 3 colours yourself.
If you have your own logo you can upload a copy of your logo or any other file that has your colour scheme on it and then pick the colours directly off your logo. A logo is symbol that represents your business, for example, a big yellow M is the logo of McDonalds fast-food restaurants.
Notes
- At any time while creating your own colour scheme for your website you can click
the < button to go back to a previous step in the colour picker. - If you want to exit the colour picker click the X button.
- Check how your selections look at any time by clicking the PREVIEW button.
Do you have a logo?
YES? Click YES in the Rocketspark colour picker so that you can upload a copy of your logo. If your logo doesn’t have all the colours you wish to use on your website still click YES as you will have the option to select your own colours if you want to.
NO? Click NO in the Rocketspark colour picker so you can pick your own colours. Click this link for more instructions: NO, I don't have a logo.
If you clicked YES continue to reading below for more instructions.
Upload your logo
Click CHOOSE FILE and locate a copy of your logo on your computer. The logo file format must be jpg, gif or png.
Notes
- An image size of 360pixels wide by 230pixels high will make it little easier for you to pick your colour scheme off the logo but its not essential to have an image of these dimensions.
- The uploaded logo may appear a little pixelated but don’t worry as this copy of your logo will only be used to pick your colours and won’t be used elsewhere on your site.
Pick 3 colours or pick 1 colour?
You need to decide if you want to pick 3 colours for your website or just pick 1 main colour. If you select the 1 colour option you will also be able to select a neutral colour scheme that we have prepared for you that complements your main colour.
Select your preferred option with a click of your mouse inside the red square. Want to Pick 3 colours? Continue reading at Option 1 below. Want to pick 1 colour? Continue reading below at Option 2.
Notes
- Select the Pick 3 colours option if your business colour scheme uses more than 1 colour and you want to include these colours on your website.
- For each of your 3 colours you will be able to choose a colour off your logo or choose a colour off a separate colour chart.
- With the 1 colour option we will also provide some neutral colour palettes for you to select from. The neutral colour palettes have been designed to work well with the widest range of colours.
Option 1: Pick 3 colours
Choose your 1st colour
Choose your page background colour. Your page background is the colour that appears at the left side, right side and below the content area of your webside.
Pick a colour off your logo by moving your mouse pointer over a colour on your logo and click your mouse to select the colour. If you want to use an alternative colour not on your logo select the option to ‘Select a colour off a swatch’ and select your colour in the same manner. Once your colour is selected click NEXT.
Notes
- If you want to change the colour you selected just click your mouse on a new colour.
- If you want to see how your colour selection looks click preview. Remember that you still have 2 more colours to pick.
- If you are picking your colour off the swatch you have a wide range of colours to choose from. Black, white and shades of grey can be selected from the left hand side of the colour swatch.
Choose your 2nd colour
Choose your website’s menu colour. The menu colour is the colour behind the buttons of your website’s menu.
Pick a colour off your logo by moving your mouse pointer over a colour on your logo and click your mouse to select the colour. If you want to use an alternative colour not on your logo select the option to ‘Select a colour off a swatch’ and select your colour in the same manner. Click NEXT.
Choose your 3rd colour
Choose your website’s text heading colour. The text heading colour is used for all paragraph headings on your website.
Pick a colour off your logo by moving your mouse pointer over a colour on your logo and click your mouse to select the colour. If you want to use an alternative colour not on your logo select the option to ‘Select a colour off a swatch’ and select your colour in the same manner.
Once you’ve picked your text heading colour click FINISH and your colour selection process is complete and you don’t need to read any more of this colour picker user guide.
Option 2: Pick 1 colour
Previously you chose the option to pick 1 colour plus a neutral colour palette. You can now choose if you want your main colour to appear as the colour of your website’s menu or as the paragraph heading colour used for all paragraph headings on your website.
Select the option to set your main colour as your ‘Menu background colour’ or as your ‘paragraph heading font colour’. Now pick a colour off your logo by moving your mouse pointer over a colour on your logo and click your mouse to select the colour. Once your colour is selected click NEXT.
Notes
- If you want to change the colour you selected just click your mouse on a new colour.
- If you want to see how your colour selection looks click preview.
Choose a neutral colour palette
To ensure your new website looks great our neutral colour palettes have been specially designed using neutral colours to complement your main colour. Although the colour palettes appear similar each palette produces a different look for your website.
Click on one the four neutral colour palettes to make your selection and then click FINISH.
Notes
- Click PREVIEW to see what your selection looks like.
- Click on a different neutral palette to try an alternative.