Chrome расширение пипетка: Пипетка — узнаём и используем точный цвет

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. ColorZillaColorZilla показывает цвет под курсором мыши

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 GobblerSVG иконки, которые обнаружило расширение SVG Gobbler на главной странице Medium

Хотите скопировать и изменить значок закладки Medium? Просто зайдите на домашнюю страницу Medium и нажмите на расширение SVG Gobbler. Вы увидите кнопку загрузки, и вы сразу поймете, что надо делать. Я качаю иконки со своего собственного сайта, потому что это проще, чем искать на жестком диске. Имейте в виду, что это работает только для SVG-изображений.

5. CSS PeeperCSS Peeper отображает цветовую палитру с сайта FedEx

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

6. View Image InfoЩелкните правой кнопкой мыши на изображении, чтобы «Просмотреть информацию об изображении» (иллюстрация Fakurian Design via Unsplash)

‍View Image Info — это очень простое расширение для отображения основной информации о файле изображения — путь к файлу, габариты, тип и размер файла. Хотя его последнее обновление было около четырех лет назад, оно все еще отлично работает благодаря своей простоте.

View Image Info отображает основную информацию об изображении

7. Window ResizerWindow 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 — это то, что вам нужно. Он превращает новые вкладки во вдохновляющую творческую ленту со всего Интернета. Я начал пользоваться им всего несколько дней назад, и пока что совсем об этом не пожалел.

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

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

Журнал изменений | Eye Dropper

Версия 0.5.16

• Исправлено неверное определение типа в фоновом скрипте.
• Обновление нескольких зависимостей.
• Заменен продвигаемый партнер на UseChatGPT.ai.

Версия 0.5.15

• Замененная партнерская ссылка с Toucan

Версия 0.5.14

• Добавлена ​​Партнерская ссылка на Popup

Версия 0.5.13

• Фиксированные цвета копирования от всплыва последнее обновление). #219, #220

Версия 0.5.12

• Исправлена ​​ошибка, когда в некоторых случаях было невозможно выбрать цвет при большем количестве открытых окон #215
• Мелкое косметическое исправление для цветовых полей во всплывающем окне

Версия 0.5.11

• Цветовые поля для нового и текущего цвета во всплывающем окне теперь отображают короткий шестнадцатеричный код и название цвета, если есть точное совпадение #136, #192.
• Добавлены ссылки для сообщения об ошибке и подачи идей/запросов на изменение на страницу Options
• Добавлена ​​ссылка журнала изменений на страницу About .
• Библиотека Color Picker заменена простой палитрой цветов
• Переключено на Yarn Modern
• Всплывающее окно переписано на TypeScript.
• Загружать зависимости от NPM вместо вендора в т.ч.
• Обновлены все зависимости до последних версий.

Версия 0.

5.10

• Теперь должно нормально работать на Dribbble.com #203.
• Исправить неправильную ссылку на страницы справки №180, №197 и №205.
• Скрыть переполнение по оси X страницы настроек, предотвращая появление лишней полосы прокрутки. Предоставлено Salamander0 #198
• Исправлено копирование цветов в буфер обмена на macOS #156

Версия 0.5.8

• Критические исправления #166 — Невозможно выбрать цвета из Интернета с помощью Eye Dropper.

Версия 0.5.7

• Выбор цветов из локальных файлов теперь возможен, если это разрешено. Исправления №97 и №154.
• Пипетка теперь находится в открытом коллективе. Кнопка «Платежи в Интернет-магазине Chrome» и «Пожертвование через Paypal» удалены (исправление № 164).
• Информационная страница «Установлено» теперь отображается непосредственно из нового веб-сайта вместо HTML-страницы локального расширения.
• Исправляет #115 неправильный формат цветов HSL благодаря отчету @jakeparis.
• Исправить дублирование палитры цветов при многократном нажатии на вкладку. Исправления №108
• Обновлены зависимости разработчиков, исправления №148, №150, №151, №157 и №163.
• Окончательно удалены последние зависимости от jQuery, Eye Dropper теперь свободен от jQuery 🙂

Версия 0.5.6

• В некоторых системах macOS выбор веб-страницы перестал работать. Исправления №128.

Версия 0.5.5

• Страница приветствия должна открываться только при новой установке. Исправляет редкие случаи, например #128.

Версия 0.5.4

• Теперь работает с увеличенными страницами.
• Infamous Picking Only Black наконец-то закончился (большое спасибо Hannah Carrol за тестирование). Исправления №141, №134, №133, №132, №131, №109, №103, №99.
• Дубликаты больше не выбираются. Исправления №135.
• Чувствительность к регистру при визуальном выборе цвета в палитре цветов. Исправления №120.
• Уточнить, как изменить ярлык по умолчанию. Исправления №124.
• Эффекты наведения должны корректно отключаться во всех случаях.
• Начал с перезаписи на TypeScript. Уже помог отловить пару багов выше.
• Первый крошечный набор модульных тестов, чтобы мы могли быстрее выявлять ошибки.
• Сценарий содержимого теперь меньше и его легче отлаживать.
• Несколько помощников для отладки и создания расширений.

Версия 0.5.3

• Пустое экспортное выпуск № 129

Версия 0.5.2

• «Все мои цвета сдали в порядке» Выпуск № 106

Версия 0.5.1

Eye Dropper Plus

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

• Дополнительные цветовые палитры. Теперь вы можете сортировать свою историю цветов в именованных палитрах.
• Экспорт палитры теперь имеет дату и время выбора цвета.
• Экспорт палитры теперь имеет исходный тип выбора цвета (веб-страница, палитра цветов или преобразование)
• Удалить избыточное сохранение истории и переключатели палитры
• Неправильная запись временных меток истории цвета
• Страница параметров ведет себя неправильно после обновления расширения в некоторых незначительных случаях
• Добавить предупреждение для других специальных хромированных страниц
• Использовать локальную копию Tachyons CSS

Версия 0.4.3

• Удвоенная палитра цветов (см. #93 и #95)
• использовать локальную версию tachyon.css вместо CDN

Версия 0.4.2

• Добавить поле ввода цвета в палитре цветов, которое было удалено по ошибке во время перезаписи всплывающего окна (см. #90)

404: Страница не найдена

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

Что я могу сделать сейчас?

Если вы впервые посещаете TechTarget, добро пожаловать! Извините за обстоятельства, при которых мы встречаемся. Вот куда вы можете пойти отсюда:

Поиск

• Узнайте последние новости.
• Наша домашняя страница содержит самую свежую информацию о Java-разработке.
• Наша страница «О нас» содержит дополнительную информацию о сайте, на котором вы находитесь, TheServerSide.com.
• Если вам нужно, свяжитесь с нами, мы будем рады услышать от вас.

Просмотр по категории

Архитектура приложения

• Прочная связь между законом Конвея и микросервисами

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

• Как выжить, когда царит развитие Waterfall

  Несмотря ни на что, методология Waterfall поддерживает бесчисленное количество команд разработчиков программного обеспечения. …

• Необработанный, но растущий потенциал банковского обслуживания без ядра

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

Качество ПО

• Тестовые фреймворки и примеры для модульного тестирования кода Python

  Модульное тестирование является важным аспектом разработки программного обеспечения. Команды могут использовать Python для модульного тестирования, чтобы оптимизировать преимущества Python…

• Атрибуты эффективной стратегии тестирования базы данных

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

• Обновления Java 20 Project Loom готовят почву для Java LTS

  Java 20 повторно инкубирует две функции масштабируемости Project Loom, что делает их главными кандидатами на то, чтобы стать стандартом в сентябрьском выпуске Java 9.

  0153

Облачные вычисления

• Как работает маршрутизация на основе задержки в Amazon Route 53

  Если вы рассматриваете Amazon Route 53 как способ уменьшить задержку, вот как работает этот сервис.

• 4 рекомендации, чтобы избежать привязки к поставщику облачных услуг

  Без надлежащего планирования организация может оказаться в ловушке отношений с облачным провайдером. Следуйте этим …

• Подходит ли вам облачная стратегия?

  Стратегия, ориентированная на облачные технологии, имеет свои преимущества и недостатки. Узнайте, как избежать рисков и построить стратегию, которая …

Безопасность

• Microsoft и Fortra получили судебный приказ о срыве Cobalt Strike

  Microsoft, Fortra и Центр обмена и анализа медицинской информации объявили, что получили постановление суда, чтобы .

  No related posts.