×

CSS Color palette generator Manual

1 Generator

There are 6 generator buttons available. Monochrome, complementary, triangle, square diagonal and random. The differences of these buttons only apply to the 'hue' part of the hsl colours. Saturation and luminosity are always random.

color scheme generator buttons
  1. Monochrome always has a result of 5 equal hue values.
  2. Complementary will always get a result with 2 different hue values with a difference of 180.
  3. Triangle will always offer a solution with 3 different hue values with a difference of 120.
  4. Square will always give a result with 4 different hue values with a difference of 90.
  5. Diagonal will always have a result with 5 equal different hue values.
  6. The random button will offer an outcome of one of the 5 results mentioned above.
color scheme hsl lock buttons

With the lock buttons you can switch off the hue, saturation or luminosity part for the generator buttons. If one of these buttons is selected, the generator buttons will not affect it.

2 Organize

With the organize buttons you can determine the order of the colors.

color scheme organize buttons

The reverse button is used to reverse the order of the colors.

sort hue align button

If you click on the hue button, the colors will be sorted from low to high based on the hue values.

sort saturation align button

If you click on the saturation button, the colors will be sorted from low to high based on the saturation values.

sort luminosity align button

If you click on the luminosity button, the colors will be sorted from low to high based on the luminosity values.

sort individual button

The colors can also be reordered individually by using the buttons at the bottom of the colors. Move the color by clicking left or right or center the color by clicking the center button.

3 Custom

There are 4 ways to edit hue, saturation and brightness.
As an example we use the hue part.

color scheme align slider

With the slider at the top of the hue section you can align the 5 shades with the same values.

color scheme custom tools hue parallel slider

The parallel slider is intended to move all hue shades evenly.

hue diagonaal align slider hue diagonaal align slider

With the diagonal slider it is possible to draw a diagonal when the shades all have an equal value.

custom pattern slider

With the pattern slider you can create your own pattern. On the left side of the hue area you can adjust the pattern to your own preference. Once you have done this you can set the hue part with the pattern slider.

4 Save

If you are a member and you are logged in, you can save up to 50 color schemes.

temperary storage

If you are not logged in, you can temporarily save color schemes in the temporary storage space. This can be useful if you want to generate and edit multiple color schemes. Please note that as soon as you leave the page, the saved schedules will be lost.

5 Import

color scheme generator buttons color scheme generator buttons

If you are logged in you can find all your saved and favorite color schemes here. Click on one of the color schemes to edit it in the editor.

6 Export

color scheme generator buttons

Under export you can copy the hsl, rgb or hex color codes to the clipboard.

color scheme generator buttons

You can also copy the color codes individually by clicking on one of the color codes at the bottom of the page.

CSS Color palette generator

Active color scheme

color scheme

Generate color schemes

Organize

Import

No temporary color schemes saved!

Export

Save options

You are not loggedin!

hue

Ph
V
1
40
1
63
1
86
1
109
1
132

saturation

Ps
V
1
40
1
45
1
50
1
55
1
60

luminosity

Pl
V
1
40
1
45
1
50
1
55
1
60
5