Picking your website colour scheme


When creating a website it can often be the small details that stop you in your tracks – picking an eye catching colour scheme can be a one of those sticking points. Whilst choosing the right colours will prepare you for creating a fantastic website, picking the wrong ones could make your site stand out for all the wrong reasons. Read on to see how a clever application from Adobe can help.

Get started

Do you have a current site, a logo, or some business stationary that you already use? How about a picture of something that has sparked your creative side? Using this handy online software you can find the colours you already use, or the ones that have inspired you, to help set the colour scheme for your new site design. The software will identify the colours used in an image and allow you to select complimentary colours to match.


Adobe Color

Adobe Color


Navigate to Adobe Color to make a start.


Image Upload

Upload image







Click on the camera icon to upload your business logo or image, the technology baked in to this clever website will then highlight the main colours it finds. You can even select the ‘mood’ of the colours you want the site to find from the options on the left.


Moonfruit colours

Using your logo

Once the site has displayed the colours from your logo you will need to click on the colour wheel icon in the top right. This will give you the technical information for each of the colours the site identifies (Notice the code next to ‘Hex’ – that’s the one you need!).


base colour

Hex code

From these colours you can pick the one you like the best by marking it as the ‘Base colour’ with a click of the left mouse button on the triangle icon (the icon displays when you hover your mouse over it).


colour schemes

Colour themes

After picking the base colour you can select the colour range that you would like (shown in the image above). This will display 4 colours that compliment the selected base colour.


Colour picker

Moonfruit colour picker

Now you’ve chosen the colours, how do you use them on your Moonfruit site? Its easy! Inside the colour picker (available on the ‘Font’ and ‘Style’ tabs of the editor, depending on what you are editing) you have multiple options to select a colour. Because you already know the ‘Hex’ value of the colour (from ‘Adobe Color’) you just need to type it in to the field highlighted above, then hit ‘enter’ on your keyboard. That’s it, the selected text / object will change to your chosen colour.

Do you have any useful tips that you think might be helpful for other Moonfruiters? Let us know in the comments below.



Community Manager

More posts by this author

One Response to “Picking your website colour scheme”

Add a comment

  • (will not be published)

More posts by this author