Как подобрать цвет на сайте с помощью браузера

Любой элемент дизайна можно вычислить с помощью инспектора кода, встроенного в браузере (будем рассматривать на примере Хрома).

Для вызова консоли инспектора нужно кликнуть правой кнопкой мыши на нужный элемент и выбрать "Просмотреть код":

Инспектор кода

Например, мы хотим подобрать новый цвет для кнопки "В корзину" в карточке товара:

Инспектор кода

"Просмотрим код" этой кнопки.

Откроется консоль разработчика.

Убедимся, что выделен именно тот кусок кода:

Подбор цвета

видим в коде текст "в корзину" - значит не промахнулись.

Теперь там же в консоли опускаемся чуть ниже к стилям (Styles):

Подбор цвета 

и практически сразу видим цвет фона нашей кнопки (background-color#eb5858;).

В CSS для цветов в большинстве случаев используются:

  • background или background-color - цвет фона
  • color - цвет текста
  • border - цвет рамки

Теперь клацаем на квадрат с цветом и появляется окно для подбора своего цвета:

Подбор цвета

далее подбираем свой цвет:

Инспектор кода

И в браузере у кнопки сразу изменится цвет на выбранный:

Инспектор кода

Собственно этот код цвета вам и нужен: #5c8e2e

Чтобы изменения сохранились на сайте - их нужно внести в соответствущем файле стилей и записать

Как узнать этот "соответствующий файл стилей"?

Инспектор кода

В правом углу выводится название файла стилей и номер строки где это находится, в нашем случае - это файл 0.css (в 95 строке)

А при наведении на него будет показан полный путь до данного файла стилей.

Стили (CSS) лежат в:

/design/активная_тема/css/

или

Админка > Дизайн > Десктоп : Шаблоны и стили

Как подобрать цвет на сайте с помощью браузера

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
  • Возможность выбора типа слайдера

    Возможность выбора типа слайдера

    В админке добавлена возможность выбора как выводить слайдер на главной - на всю ширину, на ширину контента или с боковыми баннерами. Что позволяет добавить гибкости при настройке дизайна и обходиться без помощи программиста.

  • Программа лояльности для интернет-магазина

    Программа лояльности для интернет-магазина

    Цель программы лояльности - увеличить продажи интернет-магазина за счет воздействия на поведение покупателей.

  • Модуль опросы (голосования) и промокоды

    Модуль опросы (голосования) и промокоды

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