Color and Gradient Fill

In Figma, you can use solid colors or gradient colors for your shapes and designs.

• Go to the Design Panel and click on the Fill icon;

• Use the Hue Spectrum, Hue Slider, and Opacity Slider to adjust colors;

• Color Value Systems you will see are:

  • Hex Code: type specific hexadecimal codes for colors;
  • RGB: define colors using Red, Green, and Blue channels; CSS: View color representations in CSS format;
  • HSL: adjust Hue, Saturation, and Lightness;
  • HSB: adjust Hue, Saturation, and Brightness.

• You can also use the Eyedropper Tool to sample colors from your page or frame, or access saved colors from other projects via the dropdown menu;

• When you select the Gradient Fill option in the Fill menu, a gradient bar will pop up;

• You can adjust the gradient bar by changing the position of color stops, adding new stops, rotating the gradient, flipping it, or adjusting individual stop colors and their opacity as needed.

Types of Gradients you will find are:

• Linear: smooth transition in a straight line;
• Radial: circular gradient;
• Angular: breaks colors into segments for a unique effect;
• Diamond: creates a diamond-shaped gradient.