Getting started

Remember those color websites that always give you 5 magic colors for your design? In reality, you need way more than that. Let's go through the different types of colors you probably need.

What you definitely need

Multiple shades of gray

The most important takeaway is that you don't need a collection of individual colors. You need a collection of multiple color palettes.

Take for example the "color" gray, which makes up the majority of an interface. According to the 60-30-10 Rule it should occupy about 60% of your design. When designing a website, you will realize that a single shade of gray is not enough. You need multiple shades of gray to create a visually appealing design.

Take the gray color palette for this website as an example:

As you can see, I like my palettes with 11 colors. That way you have a good amount of choice. If I didn't mess it up, you should see these colors on most of the elements on this website like text and background.

Primary color

This is the branding color for your design. It should be used sparingly to highlight important parts of a website. This is the 30 from the 60-30-10 Rule.

This is the primary color palette for Paletti:

This palette is mostly used for highlighting interactive elements like buttons. It can also be used as a background color, as you can see here.

What you might need as well

Secondary color

If you're wondering what the 10 from the 60-30-10 Rule is, you've come to the right place. Depending on the complexity of your design, you might want to introduce a secondary color. This color can be used to highlight new features or other important parts of your website.

This website currently doesn't have a secondary color, so there is nothing to show here.

Further palettes

You might also need further color palettes for highlighting success, warnings, and errors. The limit is your imagination.

How to use Paletti

Now you've heard what palettes you (might) need. Let's take a look at how to actually create them.

Creating a color palette

Paletti creates your color palettes based on a base color. All the other colors will be calculated based on it.

So just pick a color you like and use it as a base color. It's that simple.

If you want a little finer control you can use the HSL settings to adjust the hue, saturation and lightness of your base color.

Individualizing

If you want to give your palettes a personal touch, you can adjust the Hue Rotation. This will change the hue of all colors in your palette by a certain amount. The further away from the color in the middle of your palette, the more the colors will change. This can be useful if you want to give your palettes a different tint.

In addition to that, you can give your palettes a name to make it easier to distinguish them. This name is also used in some of the export options.

Exporting

Once you're happy with your color palettes, you have multiple export options:

• CSS Variables

  Use this export option if you want to use your color palettes as CSS variables inside your CSS file.

• Tailwind CSS

  Use this export option if you use Tailwind CSS and want to add your palettes to your tailwind.config.js.

• Link

  Use this export option if you simply want to share your palettes with a friend. This way they can open it in their browser.

• Array

  Use this export option if you want to use your palettes in your code. The code in this export is written in Typescript .

By the way: Your palette names are automatically adopted in most export options.