The color panel allows you to change text color, fill color, border color, and shadow color of an element. It also allows you to choose a different blend mode for the background, which can be used to create visual effects in combination with background images and videos.
Select a Coloring Mode
The color panel can be used in four modes, which allow you to choose what aspect of an element you are coloring:
They are (from left to right):
Text: This mode will color all text that appears in the element.
Fill: This mode will change the color of the background of the element. Note: changes may not be visible (i.e. if there is also a background image).
Border: Used in combination with the Border Panel, this mode controls the color of the borders of the element.
Shadow: Used in combination with the Box Shadow panel, this lets you choose what color the shadow of an element will be.
Choosing a Color
There are four different ways to select a color in the color panel.
Hexadecimel value
You can select a color by typing a hexadecimal value (e.g. #fd0367) into the hexadecimal color input box. This is especially useful if importing colors from an existing CSS style sheet.
RGB color sliders
By sliding the red (R), green (G), and blue (B) sliders, you can additively mix the three colors to create a specific color.
Color picker
The color picker is a combination of a hue slider and an interactive gradient. First, select a hue and then click or drag your mouse on the gradient to select the proper lightness and saturation.
Color swatches
Click on a color swatch to apply that color. The buttons above the swatches will let you save a new swatch, or delete a swatch.
Opacity
The opacity (or alpha) of any color can adjusted using the opacity slider. The value here can range from completely transparent (0%) to completely opaque (100%).
Note that the opacity will be applied to this color, not to the element as a whole. To adjust the opacity of the overall element, use the Filters Panel from the right toolbar.
Remember: If you find yourself constantly applying the same swatches and colors to the same components, you may want to consider setting the color choice as a global style. Global styles can be used to automatically apply a color to all components of that type on the entire site by default.