Цвета и прозрачность

Настройки цвета

Настройки цвета используются для стилизации фона элементов, их границ, а также цвета текста. Для установки цвета для каждого из этих свойств нужно выбрать соответствующий раздел на вкладке Стилей правой панели — Фон, Цвет фона, Границы или Текст.

Для установки цвета:

Выберите элемент на Холсте или на вкладке Слоев левой панели

Найдите нужный раздел стилей на вкладке Стилей правой панели (Фон, Цвет фона, Границы или Текст для текстового элемента)

Кликните по текущему цвету

Установите нужный цвет в открывшемся окне

Способы выбора цвета:

Ввод значения цвета в поле

С помощью панели цвета и ползунка

С помощью средства выбора цвета пипетка (color picker)

Значения цвета

Значения цвета можно установить, введя его в поле одним из 3 способов:

В формате Hex. 6-значный код цвета, состоящий из цифр и/или букв. Например, 000000 - черный цвет, FFFFFF - белый.

В формате RGB. 3-значный цифровой код цвета, каждая цифра которого имеет значение от 0 до 255 и соответствует одному из трех цветов - красному, зеленому и синему.

Название цвета. Название цвета может быть одним из стандартных HTML цветов. Например, black, green, darkblue и т.д.

Выбрав значение цвета, вы можете задать его прозрачность , введя в поле рядом число от 0 до 100%.

Выбор цвета с помощью панели цвета и ползунка

Выберите нужный цветовой спектр с помощью ползунка, а затем на панели цвета выберите нужных цвет. Прозрачность цвета можно отрегулировать с помощью ползунка прозрачности.

Выбор цвета с помощью средства выбора цвета пипетка (color picker)

Вы можете настроить цвет, выбрав в качестве образца любой цвет, который есть на Холсте. Это может быть цвет фона другого элемента или цвет фрагмента изображения на вашем сайте.

Для этого:

Кликните на иконку пипетки:

Переведите курсор мыши на Холст. Курсор примет вид прицела, который позволяет захватить нужный цвет. Рядом с ним вы увидите лупу с увеличенным фрагментом и значением текущего цвета в формате Hex.

Передвигайте курсор по Холсту до выбора нужного цвета, а затем кликните в выбранном месте левой кнопкой мыши.

Сохранные и недавно использованные цвета

Вы можете сохранять цвета для последующего использования их в проекте. Для этого:

Выберите нужный цвет и нажмите кнопку“+” в параметре Сохраненные цвета (Saved Colors):

Напишите название цвета и нажмите кнопку Сохранить. Вы можете оставить в качестве названия Hex-код цвета, написать название цвета или описать, какую роль этот цвет выполняет в проекте (например, текст или основной цвет).

В дальнейшем вы можете редактировать сохраненный цвет, нажав на иконку шестеренки рядом с ним, или удалить, нажав на иконку корзины.

В проекте также сохраняются недавно использованные цвета. Чтобы установить один из них, нажмите на выпадающий список в параметре Сохраненные цвета и выберите Недавно использованные цвета (Last Used Colors):

В открывшемся списке выберите нужный цвет:

Прозрачность (Opacity)

Помимо прозрачности цвета (для фона, границ или текста) вы можете установить значение прозрачности для всего элемента целиком. Эта настройка используется, если нужно применить прозрачность не к отдельным свойствам элемента (например, фону), а ко всему элементу и его дочерним элементам.

Прозрачность можно применять для создания визуальных эффектов. Например, можно менять видимость элемента при наведении на него курсора мыши.

Установить прозрачность можно на вкладке Стилей правой панели в разделе Внешний вид → Непрозрачность.

Она может принимать значение от 100% (полностью непрозрачный) до 0% (полностью прозрачный).