Step 1 · Open the color styles tool

Navigate to the Styles tab, then click on Color Styles at the top.

Step 2 · Choose a color category

Decide which color groups to add to your project. You can choose from:

• Neutral

• Primary

• Success

• Danger

• Warning

🧠 Tip: Most websites only need Neutral and Primary to start with.

Click Add Styles beside the group you'd like to customize.

Step 3 · Adjust your color scale

Once inside the customization screen, you’ll have three ways to build your palette:

• 🎚 HSL Sliders: Adjust Hue, Saturation, and Lightness to tune your color range manually

• 🎯 HEX Field: Paste in a hex color to generate a palette based on that tone

• 🎨 Presets: Choose from a wide range of pre-made color presets

Every change dynamically updates the shades in your scale above.

Step 4 · Save your styles

Once you’re happy with your scale, hit Save. Your color styles are now ready to use in your project.

Bonus tip

If you spot a specific shade in the scale you love and want to make it your base color:

1. Hover over the color swatch

2. A number will appear (e.g. 300, 500)

3. Click the number — a popup will ask for permission to copy to your clipboard

4. Accept, and the HEX code will be copied

5. Paste it into the HEX field to regenerate your scale around that shade

This is perfect for when you want to shift the entire palette around a single tone.