# Web app Paletton Not every website has a designer feel to it, but the **color concept of your online presence** doesn’t have to suffer. A popular color scheme designer comes with a new look: the free web app, [Paletton](http://paletton.com "Click here to visit Paletton") helps you to create harmonious colour schemes with just a few clicks. The online tool is based on the science of color and creates **a complementary colour palette for every tone**. This tool enables you to give the design elements of your website a professional touch. A well thought-out colour composition can look impressive in presentations or infographics. [![Image: Paletton](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/3/a/csm_paletton-1_37feb87c12.webp "Paletton")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-1.jpg) Screenshot of the free web app Paletton (source: paletton.com) ## How to use Paletton for your colour concept You can create a colour concept with five different modes: *Monochromatic, Adjacent Colors, Triad, Tetrad,* and *Free Style*. The starting point is always a base colour, which you then combine with up to three other colors and the respective complementary colour. Use the following buttons to do this: [![Image: Different Modes](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/a/csm_paletton-2_649567b3f5.webp "Different Modes")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-2.jpg) Different Modes to create a colour concept (source: paletton.com) #### The various modes at a glance: - **Monochromatic:** if you choose the Monochromatic mode, your colour scheme will be made up of five different shades of the single tone you chose. - **Adjacent Colors:** in this mode, Paletton creates colour palettes in which two similar colours are assigned to your base colour. Each of these colors will appear in five shades. A complementary colour can be added to the base colour. - **Triad:** colour schemes created in this mode consist of three harmoniously matched colours in five shades. In this mode, it’s also possible to add a complementary color to the base colour. - **Tetrad:** this mode lets you combine your base colour with two secondary colours and a complementary colour. Five shades are generated for each colour. - **Free-Style:** the *free style* mode isn’t bound by the rules of the colour wheel, so you have the freedom to combine four colours individually. This mode offers the maximum leeway, but does not necessarily generate harmonious colour palettes. ## The colour wheel The choice of base tones and secondary colours is based on a colour wheel. Depending on where you place the cursor for the basic and complementary colours, Paletton generates a colour palette based on your settings. If you use one of the modes: Adjacent Colours, Triad, or Tetrad, the **colour concept is based on pre-programmed combination rules**, which guarantee a harmonious compilation. You can define the colour values using the outer colour ring, and then use the interior of the colour wheel to adjust the shading of the selected colours. [![Image: Paletton Colour Wheel](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/5/7/csm_paletton-3_e6e13bcf48.webp "Paletton Colour Wheel")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-3.png) Paletton Colour Wheel (source: paletton.com) ## Test the colour palette on sample graphics Once you have your colour concept, you can see **how your chosen compilation looks on sample graphics**. Click on the *Examples* button and choose between *Page Layout*, *Artwork*, or *Animated*. [![Image: Test the colour palette](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/4/5/csm_paletton-4_2b1c54e83b.webp "Test the colour palette")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-4.png) Screenshot of the colour palette (source: paletton.com) ### Export colours In order to obtain the **hexadecimal code** and other information about your created colour concept, simply click on the colour field of your palette to display the *Colour Info* window. [![Image: Export Colours](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/c/b/csm_paletton-5_5cfe984693.webp "Export Colours")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-5.jpg) Export colours (source: paletton.com) Paletton also offers the possibility of exporting individual colour palettes in various formats such as CSS, LESS, [SASS](https://www.ionos.co.uk/digitalguide/websites/web-development/sass/), XML, or Swatch files for Photoshop. Click on the *Tables/Export* button and select the desired format. [![Image: Export Colour Palettes for Photoshop](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/4/0/csm_paletton-6_ee6f551ad2.webp "Export Colour Palettes for Photoshop")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Websites/paletton-6.jpg) Export Colour Palettes for Photoshop (source: paletton.com) **Here is a short introduction to Paletton:** [YouTube video](https://www.youtube.com/watch?v=XFcqTmLhJFA) This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-design/web-app-of-the-week-paletton/](https://www.ionos.co.uk/digitalguide/websites/web-design/web-app-of-the-week-paletton/) for AI/LLM consumption.