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 helps you to create har­mo­ni­ous colour schemes with just a few clicks. The online tool is based on the science of color and creates a com­ple­ment­ary colour palette for every tone. This tool enables you to give the design elements of your website a pro­fes­sion­al touch. A well thought-out colour com­pos­i­tion can look im­press­ive in present­a­tions or in­fograph­ics.

Image: Paletton
Screen­shot 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: Mono­chro­mat­ic, 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 re­spect­ive com­ple­ment­ary colour. Use the following buttons to do this:

Image: Different Modes
Different Modes to create a colour concept (source: paletton.com)

The various modes at a glance:

  • Mono­chro­mat­ic: if you choose the Mono­chro­mat­ic 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 com­ple­ment­ary colour can be added to the base colour.
  • Triad: colour schemes created in this mode consist of three har­mo­ni­ously matched colours in five shades. In this mode, it’s also possible to add a com­ple­ment­ary color to the base colour.
  • Tetrad: this mode lets you combine your base colour with two secondary colours and a com­ple­ment­ary 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 in­di­vidu­ally. This mode offers the maximum leeway, but does not ne­ces­sar­ily generate har­mo­ni­ous 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 com­ple­ment­ary 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-pro­grammed com­bin­a­tion rules, which guarantee a har­mo­ni­ous com­pil­a­tion. 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
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 com­pil­a­tion looks on sample graphics. Click on the Examples button and choose between Page Layout, Artwork, or Animated.

Image: Test the colour palette
Screen­shot of the colour palette (source: paletton.com)

Export colours

In order to obtain the hexa­decim­al code and other in­form­a­tion about your created colour concept, simply click on the colour field of your palette to display the Colour Info window.

Image: Export Colours
Export colours (source: paletton.com)

Paletton also offers the pos­sib­il­ity of exporting in­di­vidu­al colour palettes in various formats such as CSS, LESS, SASS, XML, or Swatch files for Photoshop. Click on the Tables/Export button and select the desired format.

Image: Export Colour Palettes for Photoshop
Export Colour Palettes for Photoshop (source: paletton.com)

Here is a short in­tro­duc­tion to Paletton:

XFcqTmLhJFA.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.
Go to Main Menu