Как использовать палитру цветов Google Chrome?

Google Chrome поставляется с Chrome DevTools, набором инструментов для веб-разработчиков. Среди всех доступных инструментов палитра цветов, доступная в Chrome, пригодится.

Но как получить к нему доступ? Как ты это используешь? Какие функции предлагаются вместе с инструментом?

В этой статье мы рассмотрим этот инструмент и его возможности.

Как запустить Chrome Color Picker?

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

Нажимать Ctrl + Shift + I при использовании клавиатуры чтобы получить DevTools, а затем перейдите к палитре цветов. Если вы используете Mac, вам нужно нажать, Команда + Опция + Я.

Используя мышь, вам нужно выполнить правый клик, а затем нажать «Осмотреть», чтобы перемещаться по DevTools.

Вы также можете настроить Chrome DevTools на автоматическое открытие при каждой новой вкладке. Таким образом, вы можете быстро получить доступ к палитре цветов для каждой вкладки вашего браузера.

Для этого вам нужно запустить новый экземпляр Chrome с помощью командной строки, передав следующий флаг:

–auto-open-devtools-for-tabs

Вот как это выглядит при запуске хрома с автоматическим открытием DevTools через терминал в Linux:

google-chrome-stable –auto-open-devtools-for-tabs

Как использовать палитру цветов в Chrome?

После запуска DevTools вам нужно будет пройти путь, чтобы получить доступ к инструментам, необходимым для определения цвета на веб-странице или дизайна, над которым вы хотите работать.

По умолчанию вы должны увидеть «Стиль” в нижней части DevTools, как показано на снимке экрана.

Если вы выбрали что-то еще, не забудьте нажать «Стиль», чтобы получить доступ к коду CSS веб-страницы.

Здесь вам нужно прокрутить вниз доступный код CSS и найти поле цвета, помеченное как фон или цвет под разделом body. Это палитра цветов, которую вы искали.

Просто нажмите на поле цвета; это должно дать вам больше возможностей, как показано на скриншоте ниже.

Вот и все! Вуаля, у вас есть палитра цветов в вашем браузере, готовая помочь вам.

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

Возможности Color Picker в Chrome

Встроенная палитра цветов Chrome предоставляет вам различную информацию в дополнение к шестнадцатеричному коду для определения цвета.

Вот что вы можете ожидать от него. Некоторые ключевые особенности включают в себя:

Цветовые палитры: Вместо того, чтобы переключаться между множеством оттенков цвета, вы получаете несколько предопределенных цветовых палитр для быстрого применения некоторых вариантов.

Формат цвета: вы получаете возможность переключаться с шестнадцатеричного кода на значения RGBA и значения цвета HSLA.

Пипетка: при доступе к палитре цветов вы можете просмотреть веб-страницу и выбрать любой элемент, чтобы получить шестнадцатеричный код этого цвета. Вы можете нажать на переключатель палитры цветов, чтобы включить/отключить его.

Вы получаете больше возможностей для настройки цветов и получения точного цвета по вашему выбору. Они здесь:

Скопировать в буфер обмена: Вы можете быстро скопировать код определенного цвета в буфер обмена.

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

Контроль непрозрачности: Вы можете настроить уровень прозрачности, чтобы он выглядел сплошным или минимальным.

Выбор цвета фона: выбор подходящего цвета фона для идеального контраста.

Контрастность: отрегулируйте контрастность или исправьте ее, чтобы текст/элемент был виден.

Как использовать палитру цветов Chrome с Google Slides?

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

Если вам неудобно использовать DevTools с Google Slides, вы также можете попробовать некоторые расширения Chrome для этой работы.

Расширения Chrome как альтернатива палитре цветов

Хотя расширения могут пригодиться, следует отметить, что они не обновляются и не поддерживаются активно. Учитывая, что им требуется доступ к данным вашего браузера, вы должны быть осторожны при установке любого расширения, даже рекомендованного здесь.

Однако есть два популярных расширения, которые вам могут быть интересно попробовать:

№1. ColorZilla

Расширение ColorZilla предлагает все основные функции, которые вы получаете со встроенной палитрой цветов Chrome. В качестве бонуса вы также получаете возможность проверить историю последнего выбранного цвета.

Таким образом, это должно пригодиться для каждого варианта использования, а не только для Google Slides.

№ 2. Пипетка ColorPick

Если у вас возникли проблемы с инструментом «Пипетка» с помощью DevTools, вы можете попробовать ColorPick Eyedropper, чтобы получить пипетку без доступа к веб-инструментам.

Когда вы выбираете цвет, он отображает значение RGB и возможность создания цветовых палитр. Как и в приведенном выше расширении, вы также можете проверить историю выбранных вами цветов.

Заключительные слова 🎨

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

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

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