Creating a color palette

Head over to Figma and create a new project.

I've created a starter file for you to use, and you can get that here

Copy and paste over the existing artboards from the starter file into the respective tabs on your new project.

Now head over to Coolors and select a monochromatic color palette to use.

I chose the palette:

#A679DC
#8D53D2
#742DC8
#5F25A4
#050449

In your art board, create five 200 x 200 squares. You can create one and command + v to copy and paste, or press and hold option while dragging the shape to make a copy.

These five squares should have the fill of the five hex codes you've chosen.

Re-name each square to be primary-100 through primary-500. Then select one of the squares, click the color style and click the plus button on the right side to add a new color.

You can then add labels to each of the squares so it's clear which color it is. I added both the hex and variable name.

We're also going to need a neutral palette.

I chose the neutral palette below:

neutral-600: #000000
neutral-500: #4A4B53
neutral-400: #737581
neutral-300: #E1E1E1
neutral-200: #F4F5F7
neutral-100: #FFFFFF

We'll also create text and text-inverted colors.

Text Color: #000000;
Text Color Inverted: #ffffff;

Once you've filled in your squares with your monochromatic palette, select the square with the color, then click the four menu dots underneath the Fill item in the right-hand sidebar, click the plus button and add the label primary-X00. This will allow you to use your colors within your components.

Take the next 15 minutes and find a monochromatic color palette you enjoy!