Colors and opacity
Color settings are used to style the background of various elements, their borders, and text. To set a color for each of these properties, you need to select the appropriate section on the Styles tab in the right panel, i.e. Background, Border, or Text.
To set a color:
- Select an element on the Canvas or the Layers tab in the left panel
- Find the Styles section on the Styles tab in the right panel (Background, Border, or Text)
- Click on the current color
- Set the desired color in the new window
How to select colors:
- Enter the color value in the field
- Use the color bar and slider
- Use the color picker
You can set color values using one of the following three methods:
● In Hex format. Enter a 6 digit color code consisting of numbers and/or letters. For example, 000000 is black, FFFFFF is white.
● In RGB format. Enter a 3-digit numeric color code, each digit of which has a value from 0 to 255 and corresponds to one of three colors: red, green and blue.
● Color name. You can enter a name of one of standard HTML colors. For example, black, green, darkblue, and so on.
After selecting a color value, you can set its opacity by entering a number from 0 to 100% in the box next to it.
Use the slider to select the desired color spectrum, and then select the desired color from the Colors panel. Opacity can be adjusted using the slider below.
You can customize the color by selecting any color on the Canvas as a sample. This can be the background color of another element, or the color of an image fragment on your website.
To do this:
- Click on the color picker icon:
- Move the mouse cursor to the Canvas. The cursor will take the form of a crosshair to capture the desired color. Next to it, you will see a magnifying glass with a magnified fragment and the value of the current color in Hex format.
- Move the cursor across the Canvas to select the desired color. Then click on the selected point with the left mouse button.
You can save colors to use them in the project later. To do this:
- Select the desired color and click on “+” in Saved Colors:
- Enter a name for the color and click on the Save button. You set a Hex-code for the color, write its name, or describe what role this color plays in the project (for example, text or base color).
Later, you can edit the saved color by clicking on the gear icon next to it, or delete it by clicking on the trash icon.
You can also save recently used colors in the project. To use one of them, click on the drop-down list in the Saved colors section and select Last Used Colors option:
Select the desired color in the new list:
Beside color opacity (for background, border, or text), you can set the opacity value for the entire element. This setting is used if you want to apply opacity not to individual properties of an element (for example, background), but to the entire element and its child elements.
Opacity settings affect the opacity of both the element itself and its child elements.
Opacity can be used to create visual effects. For example, you can change the visibility of an element when you hover on it with the mouse cursor.
You can set transparency on the Styles tab in the right panel in the Size section.
You can set 100% (fully opaque) to 0% (fully transparent).
Setting the value to 0% makes the element completely invisible but it continues to occupy the space on the page (as opposed to the Display > None option, when the element completely disappears from the page).