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­nious color schemes with just a few clicks. The online tool is based on the science of color and creates a com­ple­men­tary color 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 color com­po­si­tion can look im­pres­sive in pre­sen­ta­tions or in­fo­graph­ics.

Image: Paletton
Screen­shot of the free web app Paletton (source: paletton.com)

How to use Paletton for your color concept

You can create a color concept with five different modes: Mono­chro­mat­ic, Adjacent Colors, Triad, Tetrad, and Free Style. The starting point is always a base color, which you then combine with up to three other colors and the re­spec­tive com­ple­men­tary color. Use the following buttons to do this:

Image: Different Modes
Different Modes to create a color 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 color palettes in which two similar colors are assigned to your base color. Each of these colors will appear in five shades. A com­ple­men­tary color can be added to the base color.
  • Triad: color schemes created in this mode consist of three har­mo­nious­ly matched colors in five shades. In this mode, it’s also possible to add a com­ple­men­tary color to the base color.
  • Tetrad: this mode lets you combine your base color with two secondary colors and a com­ple­men­tary color. Five shades are generated for each color.
  • Free-Style: the free style mode isn’t bound by the rules of the color wheel, so you have the freedom to combine four colors in­di­vid­u­al­ly. This mode offers the maximum leeway, but does not nec­es­sar­i­ly generate har­mo­nious color palettes.

The color wheel

The choice of base tones and secondary colors is based on a color wheel. Depending on where you place the cursor for the basic and com­ple­men­tary colors, Paletton generates a color palette based on your settings. If you use one of the modes: Adjacent Colors, Triad, or Tetrad, the color concept is based on pre-pro­grammed com­bi­na­tion rules, which guarantee a har­mo­nious com­pi­la­tion. You can define the color values using the outer color ring, and then use the interior of the color wheel to adjust the shading of the selected colors.

Image: Paletton Color Wheel
Paletton Color Wheel (source: paletton.com)

Test the color palette on sample graphics

Once you have your color concept, you can see how your chosen com­pi­la­tion looks on sample graphics. Click on the Examples button and choose between Page Layout, Artwork, or Animated.

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

Export colors

In order to obtain the hexa­dec­i­mal code and other in­for­ma­tion about your created color concept, simply click on the color field of your palette to display the Color Info window.

Image: Export Colors
Export colors (source: paletton.com)

Paletton also offers the pos­si­bil­i­ty of exporting in­di­vid­ual color 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 Color Palettes for Photoshop
Export Color 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