The color palette is used to choose an element background color, text or icon color.
Picking a color
Picking a color can be done in two ways.
- Using the color picker
First, click anywhere on the color plane. Then, use the horizontal slider to choose a hue. Move around the color plane to set saturation on the x axis and on the y axis.
2. Choosing a precise color by typing an HEX code or RGBA values
More about HEX & RGBA below.
A swatch is a color that is saved to be used again within a project. Once a swatch is saved on your color palette, you can easily apply it to any element on your webpage.
To save a swatch, simply enter a HEX color code or pick a color with the color picker. Then, click on ‘+’ and you’re swatch will be saved.
Use preset colors & gradients
Instead of finding colors with the color picker, you can choose from a library of organized hues and gradients by clicking on the switch icon underneath color swatches on the color palette.
You can set color opacity by sliding the horizontal bar on the color picker.
About HEX and RGBA color codes
HEX & RGBA are two HTML color code formats.
HTML color codes are a way to express the color that we see in a way that the web can process them.
- HEX codes are the most used and are made up of # and 6 digits.
To learn more about what these digits mean, check out this in-depth article (outside link)
- RGBA codes are made up of a value for each of three hues (Red, Green and Blue) plus opacity (A).
To learn more about RGBA, read this.
Switching between HEX & RGBA color codes
You can easily switch between these two color codes formats, as shown below.
A gradient is a range of colors that gradually fade into each other. Here’s an example.
To create a gradient:
- Select the gradient icon from the color palette.
2. Choose the two colors that will make up the gradient by clicking on the toggle on the horizontal slider.
3. Set the gradient angle & degree.
Here is an example of gradient creation.