Содержание
4 лучших расширения Chrome для определения цвета онлайн
Мир полон красок, как и Интернет. Это дар, который у нас есть, чтобы уметь идентифицировать цвета и работать с ними. Итак, что вы делаете, когда видите уникальный оттенок или что-то, что бросается в глаза? Вы пытаетесь найти его шестнадцатеричный код цвета, что еще? Так же, как четыре цвета на значке Chrome, существует несколько расширений Chrome для определения цветов в Интернете, так что не беспокойтесь.
Оглавление
1. КолорЗилла
2. Пипетка ColorPick
3. Пипетка для глаз
4. Цвет Фардоса
Цвет, Цвет на стене
Эти расширения сделают вашу жизнь проще, особенно если вы работаете в такой области. Вы можете заниматься одеждой, редактированием изображений, графическим дизайном или веб-дизайном. Особенно, если вы являетесь частью команды дизайнеров или работаете в одиночку, это поможет упростить задачу поиска правильного цвета.
Может быть, вы просто ищете свой следующий цвет стен? Давай начнем.
1. КолорЗилла
ColorZilla имеет множество функций. Первый — это EyeDropper, который распознает любой цвет, на который вы нажимаете. Это может быть что угодно на веб-странице, включая изображения в любом формате.
Как только вы это сделаете, вы заметите, что значок палитры цветов меняется с черного на выбранный вами цвет. Нажмите на значок еще раз, чтобы открыть всплывающее окно с информацией о шестнадцатеричном коде. Нравится этот инструмент? У него есть сочетания клавиш.
Внимательно посмотрите на программное обеспечение, и вы увидите историю цветов, где все цвета, которые вам понравились, будут сохранены для вас. Просто нажмите на цвет, чтобы снова просмотреть детали. С левой стороны вы можете поэкспериментировать с оттенками, чтобы еще точнее настроить цветовой оттенок. Не знаете, какие шестнадцатеричные коды копировать? Выберите опцию «Копировать в буфер обмена». Вы можете мгновенно проанализировать цветовую палитру любой страницы.
Получить ColorZilla
Профессиональный совет:
2.
Пипетка ColorPick
ColorPick Eyedropper — это самое простое расширение Chrome для определения цвета в Интернете. Откройте расширение и наведите указатель мыши на интересующий вас цвет. Расширение распознает и отобразит шестнадцатеричный код цвета в режиме реального времени.
Когда вы нажимаете на пиксель цвета, расширение отображает всплывающее окно рядом с ним с шестнадцатеричным кодом цвета. Вы можете скопировать и вставить его сейчас.
Довольно простой и лишенный каких-либо продвинутых функций, которые мы видели ранее в ColorZilla. Если вас не устраивает использование расширения на панели инструментов, вы можете открыть его во всплывающем окне. Может помочь на определенных сайтах.
Получите пипетку ColorPick
Интересный факт: Доказано, что женщины видят больше оттенков
3. Пипетка для глаз
Eye Dropper — еще одно расширение Chrome для определения и выбора цветов из Интернета. Откройте расширение и нажмите «Выбрать цвет из Интернета» и просто выберите пиксель.
Как только вы это сделаете, расширение отобразит шестнадцатеричный код цвета, который вы можете скопировать.
Каждый цвет, который вы идентифицируете, будет аккуратно храниться в столбце истории. Так что вы можете вернуться к нему позже. Другим вариантом является вкладка «Палитра цветов», где вы можете манипулировать палитрой, чтобы найти или точно настроить оттенок, который вы хотите выбрать.
Как и другие расширения в списке, Eye Dropper можно загрузить и использовать бесплатно.
Получить пипетку для глаз
4. Цвет Фардоса
Одно из наиболее изысканных расширений Chrome, которое мне нравится, — Colors by Fardos, потому что оно хорошо спроектировано. Внизу есть четыре варианта, первый из которых — «Пипетка». Выберите его и нажмите на любой пиксель на веб-странице, чтобы определить его цвет.
Вы можете дополнительно уточнить его, перейдя в градиенты. Есть палитра цветов, где вы можете перемещаться по палитре, пока что-то не привлечет ваше внимание.
Наконец, есть вкладка поиска, где вы можете ввести шестнадцатеричный код цвета и просмотреть его в действии.
Получить цвет от Fardos
Интересный факт:
Цвет, Цвет на стене
Социолог из Университета Мэриленда Филип Коэн в своем исследовании указал, что синий официально является самым популярным цветом в мире. Ну, кто не любит ясное голубое небо? В следующий раз, когда вы увидите фотографию с оттенком понравившегося вам, вам больше не придется ломать голову. Просто используйте одно из расширений Chrome, чтобы идентифицировать его в Интернете. Кроме того, легко определить точные цвета, запечатленные фотографами, которые размещают свои изображения на Flickr, Instagram и других ресурсах.
Следующий: Есть что-то эстетически приятное в черно-белых изображениях. Нажмите на ссылку ниже, чтобы узнать, как создать черно-белое изображение из цветного с помощью Photoshop.
12 полезных расширений Chrome для дизайнеров
Аудио перевод статьи
В этом списке представлены 12 расширений Chrome, которые я собрал за последние десять лет, начиная с 2011 года.
Хотя некоторые из них могут быть устаревшими, многие из них я использую почти каждый день. Наверное, я продолжу с ними работать еще как минимум лет десять.
1. ColorZilla
ColorZilla показывает цвет под курсором мыши
ColorZilla — это, пожалуй, одно из самых первых расширений Chrome, которое я взял на вооружение. После занятий графическим дизайном в колледже я продолжал пользоваться им на постоянной основе.
Наиболее часто используемая функция этого расширения — пипетка и история ранее выбранных цветов. Другие функции я использую редко.
2. WhatFont
На странице «О компании» сайта Medium используется шрифт GT Super Text Book, согласно расширению WhatFont.
Как только WhatFont был выпущен в 2011 году, он быстро стал расширением де-факто среди дизайнеров — по крайней мере, если речь идет о дизайнерах Нью-Йорка. В свое время мне казалось, что любой уважающий себя дизайнер просто обязан иметь это расширение в своем арсенале. Я до сих пор использую его почти каждый день.
3. Dimensions
Строка поиска google.com находится на 376 пикселей ниже от верха, согласно расширению Dimensions.
Dimensions предоставляет быстрый и точный способ измерения расстояния между двумя элементами DOM (от англ. Document Object Model — «объектная модель документа»). Это как ходить по дому с линейкой, измеряя каждый угол для новой мебели. Это настолько полезно, что вскоре и вы пристраститесь к нему.
4. SVG Gobbler
SVG иконки, которые обнаружило расширение SVG Gobbler на главной странице Medium
Хотите скопировать и изменить значок закладки Medium? Просто зайдите на домашнюю страницу Medium и нажмите на расширение SVG Gobbler. Вы увидите кнопку загрузки, и вы сразу поймете, что надо делать. Я качаю иконки со своего собственного сайта, потому что это проще, чем искать на жестком диске. Имейте в виду, что это работает только для SVG-изображений.
5. CSS Peeper
CSS Peeper отображает цветовую палитру с сайта FedEx
CSS Peeper обнаруживает и отображает цвета, которые используются в CSS-файлах сайта.
Это очень удобно, если вы просто хотите узнать всю цветовую палитру конкретного сайта. Кроме того, он предоставляет возможность загрузки изображений, используемых на текущей странице.
6. View Image Info
Щелкните правой кнопкой мыши на изображении, чтобы «Просмотреть информацию об изображении» (иллюстрация Fakurian Design via Unsplash)
View Image Info — это очень простое расширение для отображения основной информации о файле изображения — путь к файлу, габариты, тип и размер файла. Хотя его последнее обновление было около четырех лет назад, оно все еще отлично работает благодаря своей простоте.
View Image Info отображает основную информацию об изображении
7. Window Resizer
Window Resizer предоставляет различные возможности для тестирования адаптивного дизайна.
Если вы интенсивно тестируете свой сайт на различных размерах области просмотра, Window Resizer может помочь вам в этом. Он предоставляет множество предустановленных опций, но вы также можете создавать и сохранять пользовательские настройки.
8. VisBug
VisBug — это мощный инструмент для отладки и редактирования веб-страниц. Вы можете редактировать живые веб-страницы, как если бы вы редактировали их в дизайнерском приложении, таком как Figma или SketchApp. Вы можете изменять любой текст на странице, менять местами изображения, перемещать любые элементы в любое положение, получать информацию о CSS и так далее.
Поскольку VisBug предоставляет полный пакет инструментов для редактирования внешнего интерфейса, лучший способ познакомиться с ним — попробовать его на практике самостоятельно. Я уверен, что он понравится вам так же, как и мне.
9. Живой редактор для CSS, Less и Sass — Magic CSS
Страница Википедии с цветом фона “психоделический голубой”
Если вы серьезно относитесь к редактированию CSS в режиме реального времени, рассмотрите возможность использования Live-редактора для CSS, Less & Sass — Magic CSS. Он предоставляет всплывающую консоль для записи кода CSS.
Единственное, что мне не нравится в этом расширении — это название. Оно слишком длинное.
10. Расширение SEO Pro
Быстрый и удобный просмотр SEO-данных с помощью расширения SEO Pro Extension
Если вы дизайнер продуктов или UX-дизайнер, иногда вам необходимо проверить SEO-данные страницы, которую вы разрабатываете. SEO Pro Extension — это один из самых удобных инструментов, который поможет вам в ваших SEO-исследованиях. Когда я исследую другие сайты, одним из первых моих действий является изучение их SEO-данных.
11. Lighthouse
Lighthouse, представленный Google, — это удобный и мощный инструмент для проверки производительности сайта, оценки доступности и SEO-показателей в одном месте. Это отличный инструмент для всех UX-дизайнеров, которые хотят улучшить показатели своего сайта. Это еще один инструмент, который я всегда использую для исследований или конкурентного анализа. Подробную информацию можно найти на странице разработчиков Google.
12. Momentum
Momentum превращает новую вкладку в красивую приборную панель со списком дел. Как только вы начинаете использовать его в качестве новой вкладки, очень трудно перейти на что-то другое.
13. Earth View от Google Earth (Бонус #1)
И теперь я не могу перестать обновлять новые вкладки
Если вы любите планету Земля, а также красивые абстрактные изображения, я бы очень рекомендовал вам программу Earth View от Google Earth. Изображения настолько потрясающие, неожиданные и красивые, что вы будете настолько зачарованы, что не сможете оторвать от них свой взгляд.
14. Muzli 2 — Stay Inspired (Бонус #2)
Вдохновляйтесь новыми вкладками
Если вам нужно что-то более вдохновляющее и информативное, а не просто красивое, Muzli 2 — Stay Inspired — это то, что вам нужно. Он превращает новые вкладки во вдохновляющую творческую ленту со всего Интернета. Я начал пользоваться им всего несколько дней назад, и пока что совсем об этом не пожалел.
Всякий раз, когда я читал подобные статьи, я понимал, что ни одна из них не похожа на мою. Поэтому я подумал, что могу написать свой собственный вариант не только для удовольствия, но и для ведения учета своих расширений.
Некоторые из них могут иметь лучшие альтернативы. Пожалуйста, не стесняйтесь предлагать любые расширения, которые, по вашему мнению, стоит попробовать. Мне действительно интересно, какими расширениями пользуются мои коллеги-дизайнеры каждый день.
Как использовать палитру цветов Google Chrome?
Google Chrome поставляется вместе с Chrome DevTools, набором инструментов веб-разработчика. Среди всех доступных инструментов палитра цветов, доступная в Chrome, пригодится.
Но как получить к нему доступ? Как вы используете его? Какие функции предлагаются вместе с инструментом?
В этой статье мы рассмотрим этот инструмент и его возможности.
Как запустить Chrome Color Picker?
Вы можете получить доступ к хромированному инструменту выбора цвета с помощью сочетания клавиш или графического пользовательского интерфейса.
Нажмите Ctrl + Shift + I при использовании клавиатуры , чтобы получить DevTools, а затем перейдите к палитре цветов. Если вы используете Mac, вам нужно нажать Command + Option + I .
Используя мышь, вам нужно выполнить щелчок правой кнопкой мыши, а затем нажать « Inspect », чтобы перемещаться по DevTools.
Вы также можете настроить Chrome DevTools на автоматическое открытие при каждой новой вкладке. Таким образом, вы можете быстро получить доступ к палитре цветов для каждой вкладки вашего браузера.
Для этого вам нужно запустить новый экземпляр Chrome с помощью командной строки, передав следующий флаг:
--auto-open-devtools-for-tabs
Вот как это выглядит при запуске Chrome с автоматическое открытие DevTools через терминал в Linux:
google-chrome-stable --auto-open-devtools-for-tabs
Как использовать палитру цветов в Chrome?
После запуска DevTools вам нужно будет пройти путь, чтобы получить доступ к инструментам, необходимым для определения цвета на веб-странице или дизайна, над которым вы хотите работать.
По умолчанию вы должны увидеть активный раздел « Style » в нижней части DevTools, как показано на снимке экрана.
Если вы выбрали что-то еще, не забудьте нажать « Стиль », чтобы получить доступ к коду CSS веб-страницы.
Здесь вам нужно прокрутить вниз доступный код CSS и найти поле цвета, помеченное как фон или цвет под разделом body. Это палитра цветов, которую вы искали.
Просто нажмите на поле цвета; это должно дать вам больше возможностей, как показано на скриншоте ниже.
Вот и все! Вуаля, у вас есть палитра цветов в вашем браузере, готовая помочь вам.
Здесь вы должны найти шестнадцатеричный код или значение RGB цвета и получить возможность выбирать другие элементы CSS для изучения и проверки дизайна на веб-странице.
Функции палитры цветов в Chrome
Встроенная палитра цветов Chrome предоставляет разнообразную информацию в дополнение к шестнадцатеричному коду для определения цвета.
Вот что от него можно ожидать. Некоторые ключевые функции включают в себя:
Цветовые палитры: Вместо того, чтобы переключаться между множеством оттенков цвета, вы получаете несколько предопределенных цветовых палитр, чтобы быстро применить некоторые варианты выбора.
Цветовой формат : Вы получаете возможность переключаться с шестнадцатеричного кода на значения RGBA и значения цвета HSLA.
Пипетка : При доступе к палитре цветов вы можете просмотреть веб-страницу и выбрать любой элемент, чтобы получить шестнадцатеричный код этого цвета. Вы можете нажать на переключатель палитры цветов, чтобы включить/отключить его.
Вы получаете больше возможностей для настройки цветов и получения точного цвета по вашему выбору. Вот они:
- Копировать в буфер обмена : Вы можете быстро скопировать код определенного цвета в буфер обмена.
- Градиент цвета : Вы можете настроить оттенок цвета и переключаться между вариантами сочетания цветов по своему вкусу.
- Управление непрозрачностью : Вы можете настроить уровень прозрачности, чтобы он выглядел сплошным или минимальным.
- Выбор цвета фона : Для выбора подходящего цвета фона для идеального контраста.
- Коэффициент контрастности : Отрегулируйте контрастность или откорректируйте ее, чтобы сделать текст/элемент видимым.
Примечание: Инструмент выбора цвета не ограничивается Google Chrome, но может использоваться в любом веб-браузере на базе Chrome, таком как Brave.
Как использовать палитру цветов Chrome с Google Slides?
Вы можете перейти к инструменту выбора цвета, щелкнув правой кнопкой мыши раздел заголовка на веб-странице Google Slides. Несмотря на то, что Google Slides не предлагает встроенного инструмента выбора цвета, этого должно быть достаточно.
Если вам неудобно использовать DevTools с Google Slides, вы также можете попробовать некоторые расширения Chrome для работы.
Расширения Chrome как альтернатива палитре цветов
Хотя расширения могут пригодиться, следует отметить, что они не обновляются и не поддерживаются активно. Учитывая, что им требуется доступ к данным вашего браузера, вы должны быть осторожны при установке любого расширения, даже рекомендованного здесь.
Однако есть два популярных расширения, которые вам, возможно, будет интересно попробовать:
#1. ColorZilla
Расширение ColorZilla предлагает все основные функции, которые вы получаете со встроенной палитрой цветов Chrome. В качестве бонуса вы также получаете возможность проверить историю последнего выбранного цвета.
Таким образом, это должно пригодиться для любого варианта использования, а не только для Google Slides.
#2. ColorPick Eyedropper
Если у вас возникли проблемы с пипеткой с помощью DevTools, вы можете попробовать ColorPick Eyedropper, чтобы получить пипетку без доступа к веб-инструментам.
При выборе цвета отображается значение RGB и возможность создания цветовых палитр. Как и в приведенном выше расширении, вы также можете проверить историю выбранных вами цветов.
Final Words 🎨
Chrome DevTools Color Picker — полезный инструмент. Вам не нужен профессиональный инструмент, который поможет вам идентифицировать цвета и связанные с ними коды или значения. Встроенный инструмент Chrome упрощает работу без необходимости использования стороннего расширения.
От графических дизайнеров до веб-разработчиков, создающих шаблон веб-сайта, он будет полезен всем.
Конечно, вы также можете использовать сторонние расширения. Но если вам это не нужно, мы предлагаем вам изучить все функции с помощью DevTools.
Как использовать расширение Chrome Eye Dropper для получения любого шестнадцатеричного значения
Автор
Шарлин Хан
Если вы хотите найти различные шестнадцатеричные значения цвета, у Eye Dropper есть расширение для Google Chrome, которое вам поможет.
При посещении веб-сайта вы могли столкнуться с определенными цветами, которые вам действительно нравятся. Однако вам понадобится код RGB, HSL или шестнадцатеричный код, чтобы узнать точный цвет, если вы хотите использовать его самостоятельно.
К счастью, в Google Chrome есть различные расширения для этого. Одним из них является инструмент «Пипетка», который вы можете добавить в свой браузер Chrome и сразу начать использовать.
Что такое расширение Chrome Eye Dropper?
Расширение Eye Dropper для Chrome позволяет найти шестнадцатеричный код пикселя в любом месте на веб-сайте. Если вы новичок в шестнадцатеричных кодах, вот все, что вам нужно знать о шестнадцатеричных кодах.
Инструмент «Пипетка» работает только в браузере Chrome. Если вы используете Windows, вы можете найти любой цвет на экране с помощью палитры цветов PowerToys. Если вы используете Mac, вы можете изучить лучшие приложения для выбора цвета для Mac.
Как добавить расширение Chrome Eye Dropper
Вы можете добавить инструмент «Пипетка» в свой браузер с помощью Интернет-магазина Chrome.
- Посетите страницу расширения Eye Dropper в Интернет-магазине Chrome.
- Нажмите Добавить в Chrome .
- После добавления вы получите уведомление о подтверждении, а инструмент «Пипетка» отобразится в правом верхнем углу панели инструментов Google Chrome.
- Если вы не видите инструмент «Пипетка», нажмите «Расширения» и закрепите пипетку.
Как использовать пипетку для получения шестнадцатеричного значения пикселя
Чтобы использовать инструмент «Пипетка», откройте его на панели инструментов Chrome и начните выбирать пиксели на веб-странице.
- Щелкните инструмент «Пипетка» в правом верхнем углу панели инструментов Google Chrome.
- Выберите Выберите цвет на веб-странице .
- Рядом с курсором появится квадрат, указывающий, что вы выбрали пиксель. Наведите указатель мыши на любую точку на сайте, где вы хотите узнать цвет. Шестнадцатеричный код появится в правом нижнем углу окна Chrome.
