Как определить определенный цвет в приложении или на веб-сайте

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

1. Использование инструментов разработчика в веб-браузере Chrome

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

  • Откройте веб-сайт, на котором вы хотите определить цвет, в веб-браузере Chrome.
  • Нажмите на трехточечный значок в правом верхнем углу Chrome. Появится всплывающее окно с множеством опций.
  • Нажмите «Дополнительные инструменты», а затем выберите «Инструменты разработчика» в появившемся всплывающем окне.
  • Используйте Ctrl + Shift + I, если хотите пропустить вышеуказанные шаги.
  • Теперь окно делится на два экрана - веб-сайт слева и код веб-сайта справа.
  • Введите Ctrl + Shift + C на клавиатуре. Это показывает вам все детали конкретного элемента на веб-сайте, когда мы наводим курсор мыши на элементы.
  • Вы можете найти цветовой код элемента вместе с другой полезной информацией.

Пример

Допустим, вас интересуют конкретные цветовые коды для некоторых элементов на следующем веб-сайте:

Вы можете выбрать инструменты разработчика, нажав на три точки в углу экрана. В раскрывающемся меню выберите Дополнительные инструменты, затем Инструменты разработчика.

Экран будет визуально разделен на две страницы. Вы увидите веб-сайт слева и код сайта справа.

Введите команду и ярлык «Ctrl + Shift + C» и наведите курсор мыши на элементы веб-сайта. Это покажет цвет этого элемента вместе с другой полезной информацией. Ниже приведены два примера, в которых мы находим цвет панели навигации и панели инструментов под инструментом поиска.

Здесь мы можем найти цветовой код во всплывающем окне для панели навигации. Код цвета # 333333.

Цвет приборной панели можно найти вместе с другими полезными деталями. Цвет: # 333333, Цвет фона: # 5D4A8E. Хотя вначале это может показаться немного устрашающим, программа становится намного проще в использовании, если немного потренироваться.

2. Расширение Chrome Eye Dropper

Eye Dropper - это популярное и широко используемое расширение Chrome, которое поможет вам найти определенные цвета на любом веб-сайте или в приложении.

Выполните следующие шаги, чтобы определить определенные цвета на веб-сайте или в приложении с помощью инструмента расширения Eye Dropper.

  • Откройте любой веб-сайт или приложение в браузере Chrome.
  • Щелкните значок расширения Eye Dropper.
  • Выберите «Выбрать цвет с веб-страницы» и наведите курсор мыши на различные элементы в приложении или на веб-сайте.

Вы можете найти цветовой код элементов, перечисленных в правом нижнем углу веб-страницы.

Пример

Хорошо, давайте воспользуемся инструментом для наращивания пипетки на реальном примере. Мы начнем с открытия веб-сайта и нажатия значка расширения Eye Dropper.

Когда вы наводите курсор на различные элементы веб-сайта, вы можете видеть, что цветовые коды появляются в разделе в правом нижнем углу экрана.

Когда я наводил курсор на V-образный значок, я вижу его цветовой код в нижнем окне, как уже упоминалось. Преимущество этого инструмента в том, что вы также можете найти код RGB вместе с шестнадцатеричным цветовым кодом элемента. Этот метод удобен для тех, кому нужен простой и быстрый способ получить коды своих любимых цветов.