Chrome расширение пипетка: 12 полезных расширений Chrome для дизайнеров

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

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

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

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.

Лучшие расширения Chrome для выбора цвета для получения цветовых кодов HEX, RGB и HSL

Независимо от того, являетесь ли вы веб-дизайнером^{(web designer)} , художником или просто человеком, который хочет сочетать цвета, Google Chrome предлагает несколько надстроек в Интернет-магазине Chrome^{(Chrome Web Store)} , которые могут вам помочь.

Используя расширение Chrome для выбора цвета , вы можете получить значения HEX , RGB или HSL для любого цвета, который вы хотите в Интернете. Просто^(Simply) наведите курсор на цвет и получите код, который вам нужен, чтобы соответствовать цвету.

Вот 10 расширений палитры цветов Chrome , начиная с тех, у которых есть дополнительные функции и функции, которые могут вам понравиться. ^(Chrome)

Вы можете получить цветовой код для любого цвета, который вы видите на веб-странице, с помощью Color Picker Tool – Geco .

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите идентифицировать.
3. Нажмите^(Click) , чтобы сохранить цвет в списке расширений.

Затем вы увидите коды HEX , RGB и HSL в разделах ^(HSL)New и Picked окна расширения. Выберите предыдущий цвет, который вы определили, и вы увидите эти коды в разделе « Новый^(New) ».

Дополнительные возможности:

• Автоматически копируйте цветовой код HEX в буфер обмена для удобной вставки там, где это необходимо.^(HEX)
• Загрузите ^(Download)CSV — файл вашей цветовой палитры с кодами HEX , RGB и HSL .
• Настройте^(Adjust) параметры копирования в буфер обмена, включения уведомлений и использования щелчка правой кнопкой мыши.

Используйте инструмент «пипетка» от AKColor , чтобы получить цветовой код с любого сайта, который вы видите в Интернете.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите пипетку^(eyedropper) слева и наведите курсор на цвет, который хотите определить.
3. Нажмите^(Click) , чтобы просмотреть цветовые коды, а также ближайший цвет и средний цвет области.

Вы увидите красивое всплывающее окно с цветовыми кодами для RGB , RGBA , HEX , HSL и HSLA . Выберите^(Choose) любой из кодов, чтобы скопировать значения цвета в буфер обмена. Затем выберите «Выбрать снова»^{(Pick Again)} или «Закрыть^{( Close)} » .

Дополнительные возможности:

• Используйте преобразователь цвета^{(Color Converter)} и генератор градиента^{(Gradient Generator)} , встроенные прямо в расширение.
• Воспользуйтесь^(Take) преимуществами сочетаний клавиш для быстрой и легкой идентификации цвета.
• Настройте^(Adjust) параметры ночного режима, интерфейса, размера лупы, уровня масштабирования и т. д.

Если вы ищете палитру цветов, которую можно использовать в других местах, а не только в Интернете, инструмент « Выбор цвета^{(Pick Color)} » — это инструмент для вас.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите Выберите свой цвет^{(Choose Your Color)} , а затем выберите пипетку^(eyedropper) .
3. Наведите курсор на цвет, который хотите идентифицировать. Это может быть веб-сайт, рабочий стол или другое приложение.
4. Нажмите^(Click) , чтобы сохранить цвет в расширении.

Затем вы увидите цветовые коды HEX , RGB и HSL в окне расширения. Вы можете скопировать HEX — код, выбрав значок копирования справа от него. Чтобы скопировать значения RGB или HSL , перейдите в раздел ниже и используйте эти значки копирования.

Бонусная функция^{(Bonus Feature)}

С помощью Pick Color вы можете быстро определить цвет на веб-странице и скопировать шестнадцатеричный^(HEX) код в буфер обмена всего за пару кликов.

1. Щелкните правой кнопкой мыши веб-страницу и выберите «Выбрать цвет на странице»^{(Pick a color on the page)} в контекстном меню.
2. Наведите курсор на цвет, и вы увидите прикрепленный HEX — код.
3. Нажмите^(Click) , чтобы скопировать шестнадцатеричный^(HEX) код цвета в буфер обмена.

4. Палитра цветов

^{(Color Picker)} (от linangdata.com)

Для другого расширения Chrome с полезными дополнительными функциями^{(Chrome extension with useful extra features)} взгляните на Color Picker от linangdata.com.

1. Нажмите кнопку расширения на панели инструментов и перейдите на вкладку « Пипетка ».^(Eyedropper)
2. Выберите « Пипетка»^(Eyedropper) и наведите курсор на цвет. Вы увидите, что шестнадцатеричный^(HEX) код появляется при перемещении указателя.
3. Нажмите^(Click) , чтобы сохранить цвет в списке расширений и одновременно скопировать шестнадцатеричный^(HEX) код в буфер обмена.
4. Снова откройте расширение с помощью кнопки на панели инструментов, и вы увидите коды HEX , RGB , HSL , HSV и CMYK . Выберите значок копирования справа от любого из кодов, чтобы поместить его в буфер обмена.

Дополнительные возможности:

• Используйте вкладку « Палитра цветов^{(Color Picker)} » для отображения основных цветов с их цветовыми кодами.
• Попробуйте вкладку « Цветовая шкала^{(Color Scale )} », чтобы просмотреть различные цветовые оттенки с их цветовыми кодами.
• Перейдите на вкладку Color Blender , чтобы умножить, затемнить, осветлить и наложить цвета.

Eye Dropper — хороший вариант выбора цвета для Chrome с несколькими бонусами, которые могут вам понравиться.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите «Выбрать цвет с веб-страницы»^{(Pick color from web page)} и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните^(Click) цвет, чтобы сохранить его в списке расширений.
4. Когда вы снова откроете расширение, вы увидите цветовые коды HEX , HSL и RGB вместе с названием этого цвета в разделе « Выбранный^(Selected) цвет». 

Дополнительные возможности:

• Используйте вкладку «Палитра цветов», чтобы смешивать собственные цвета .^{(Color Picker)}
• Экспортируйте^(Export) свою историю цветов в виде файла CSV с цветовыми кодами.^(CSV)
• Настройте^(Adjust) параметры копирования в буфер обмена, изменения внешнего вида указателя и отключения информации о цвете при перемещении курсора.

Если вы хотите определить цвета, а затем сгруппировать их для быстрого доступа, посмотрите Black-shrimp .

1. Нажмите кнопку расширения на панели инструментов. Откроется небольшое окно надстройки слева.
2. Наведите курсор на цвет, который хотите идентифицировать, и щелкните.
3. Вы сразу же увидите HEX — код в окне. Используйте раскрывающийся список рядом с определенным цветом, чтобы просмотреть цветовые коды RGB или HSL .
4. Чтобы сохранить цвет, выберите знак плюса^{(plus sign)} в нижней части окна.

Дополнительные возможности:

• Добавьте группу с помощью значка папки^(folder) и перетащите в нее сохраненные цвета.
• Экспортируйте^(Export) сохраненные цвета в виде файла ASE ( Adobe Swatch Exchange ).
• Используйте^(Use) сочетания клавиш, чтобы добавить цвет, создать группу, удалить или экспортировать.

Если модные дополнительные функции не для вас, и вы хотите простое расширение, взгляните на Easy Color Picker .

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку^(Pick) «Выбрать» в правом верхнем углу и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный^(Click) цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX , RGB и HSL .

Хотя для цветовых кодов нет простых вариантов копирования, вы можете щелкнуть правой кнопкой мыши внутри каждого поля и выбрать « Копировать^(Copy) » , если вам нужно вставить значения в другое место.

Подобно Easy Color Picker , это Colorfly Color Picker . Возьмите^(Grab) цвет, просмотрите код и скопируйте значения, если это необходимо.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку «Выбрать цвет^{(Pick Color)} » и наведите курсор на цвет. При перемещении курсора вы можете просматривать значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный^(Click) цвет, и вы увидите коды HEX , RGB и HSL в окне расширения. Выберите^(Select) любой цветовой код, чтобы скопировать его в буфер обмена.

9. Палитра цветов

^{(Color Picker)} (от kipelovvycheslav)

Еще одно базовое расширение для браузера Chrome^{(Chrome browser extension)} имеет то же имя, что и другое в нашем списке, Color Picker , на этот раз от kipelovvycheslav.

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите идентифицировать, и щелкните.
3. Снова откройте расширение, чтобы увидеть цветовые коды HEX , HSL и RGB .

Последнее, простое расширение Chrome без наворотов — Smart Color Picker .

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку «Выбрать цвет^{(Pick Color)} » и наведите курсор на цвет. При перемещении курсора вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный^(Click) цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX , RGB и HSL . Выберите^(Select) любой цветовой код, чтобы скопировать его в буфер обмена.

Надеемся, что хотя бы одна из этих палитр цветов расширения Chrome — это именно то, что вам нужно. Любите ли вы дополнительные функции или предпочитаете простоту, все они отличные варианты.

Чтобы получить дополнительную помощь, посмотрите, как установить или удалить расширения в Chrome^{(install or remove extensions in Chrome)} .

Related posts

• 3 лучших VPN-расширения Chrome для безопасного просмотра веб-страниц

• 9 лучших расширений OpenOffice, которые вы должны установить прямо сейчас

• 6 Best Reddit Alternatives Вы можете использовать бесплатно

• 6 Best Online Paraphrasing Tools до Rewrite Text

• 7 Best Apps and Websites в часы Videos Together

• 13 Best бесплатные альтернативы Microsoft Visio

• 10 Best Apps Для измерения вашей производительности

• 7 Best Apps, чтобы помочь вам лучше изучить

• Best Speech до Text Software для Windows 10

• Лучшие инструменты для копирования большого количества файлов в Windows

• 5 Best Spotify Alternatives для Music Streaming

• 7 Best iTunes Альтернативы для управления вашим Music Collection

• 8 Best Apps, чтобы выучить японский

• 5 Best Apps для покупки Stocks для Free

• 6 Best Pregnancy Apps из 2021

• Какой лучший файловый менеджер для Android? Мы смотрим на 5

• 9 лучших приложений для отслеживания калорий для iPhone и Android

• 7 Best Apps, чтобы заводить друзей Online and IRL

• Лучшее программное обеспечение для потоковой передачи Twitch для Windows и Mac

• 4 Best Android Office Suites Besides Google and Microsoft

6 лучших расширений для выбора цвета Chrome (рейтинги и обзоры) в 2022 году 🎨

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

Поскольку дизайнеров и разработчиков тысячи, дефицита в 9 нет.0003 Расширения Chrome для выбора цветов. Но случайное расширение не поможет. Вот почему мы составили список лучших расширений выбора цвета для Chrome. В этой статье вы можете найти шесть инструментов расширения палитры цветов для дизайнеров. Прежде чем мы это сделаем, нам нужно поговорить о встроенной палитре цветов в Google Chrome .

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

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

1. Щелкните правой кнопкой мыши на веб-странице, где вы нашли цвет, который хотите выбрать.
2. Выберите параметр « Проверить » в контекстном меню.
3. Теперь вы сможете увидеть Параметры разработчика в Chrome.
4. На вкладке Стили прокрутите вниз, пока не найдете поле цвета .
5. Вы можете щелкнуть поле цвета, и появится интерфейс выбора цвета
6. Теперь вы можете переместить окно выбора цвета в сторону цвет, который вы хотите узнать
7. Дважды щелкните цвет, и встроенный цвет покажет вам HEX-значение и другие детали

Вы можете скопировать этот код цвета или выбрать другие градиенты из меню. Если вы ищете значения RGB цвета, вы также можете их найти. Вот проблема: нет ярлыка для этого инструмента выбора цвета. Это означает, что вам придется запускать инструменты разработчика каждый раз вы хотите выбрать цвет. Мы считаем, что это не будет удобным вариантом для большинства людей. Именно поэтому мы рекомендуем для этой цели выбрать специальное расширение Chrome .

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

Список расширений палитры цветов для Chrome

#1 ColorZilla

Editor’s Rating: 9/10

Developer	Alex Sirota
Price	Free

Download Now

ColorZilla is probably the best расширение выбора цвета для Chrome , которое вы можете получить уже сегодня. С более чем 3 миллионами пользователей и 4,4 из 5 рейтингов это расширение Chrome объединяет лучшее из обоих миров. После установки вы можете найти кнопку ColorZilla на панели расширения. Вы можете найти несколько вариантов, нажав на кнопку — и первый вариант называется Выберите цвет со страницы . Эта опция преобразует ваш курсор в палитру цветов , и вы можете нажать на цвет, который хотите захватить. Через секунду ColorZilla покажет вам шестнадцатеричное значение цвета и значения RGB .

В пакете также есть дополнительные функции. Например, расширенная палитра цветов работает аналогично Adobe Photoshop . Вы также можете использовать Ultimate CSS Gradient Generator , если вам нужны новые цветовые идеи для вашего дизайна. Нам тоже понравилось Функция анализа цвета веб-страницы на ColorZilla. Эта функция предоставит вам полную цветовую палитру веб-сайта в один клик . ColorZilla также отслеживает все выбранные вами цвета. Таким образом, вы всегда можете проверить историю для справочных целей .

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

#2 Color by Fardos

Editor’s Rating: 8.8/10

Developer	Fardoss
Price	Free

Download Now

Color by Fardos is еще одно расширение Chrome, которому вы можете доверять , когда дело доходит до выбора цветов с сайта. Он включает в себя все стандартные функции, которые вы ожидаете от расширения палитры цветов. Однако, в отличие от ColorZilla, расширение Color by Fardos не занимает много места или ресурсов . С другой стороны, вы можете пользоваться некоторыми полезными функциями, такими как синхронизация браузера с несколькими браузерами Chrome . Это означает, что цвета, выбранные вами в браузере Chrome, будут доступны и на других устройствах.

Расширение Color by Fardos также автоматизирует некоторые вещи. Например, вам не нужно копировать HEX выбранного вами цвета. Всякий раз, когда вы щелкаете по цвету, его HEX будет в вашем буфере обмена . Благодаря полноценная цветная панель , легко найти цветовые градиенты и дополнительные комбинации . Вы также можете создать линейных или радиальных градиента , используя ввод с веб-страницы. И последнее, но не менее важное: поскольку инструмент использует технологию масштабирования , вы можете быть очень придирчивыми к цветам.

Мы рекомендуем Color by Fardos, если вам нужна более простая альтернатива ColorZilla . В то же время, он содержит на больше функций, чем встроенный в Chrome инструмент выбора цвета 9.0004 .

#3 ColorPick Eyedropper

Editor’s Rating: 8.6/10

Developer	Vidsbee Enterprises by Sam Larison
Price	Free

Download Now

ColorPick Eyedropper должно быть следующим лучшим решением для выбора цветов из Google Chrome . Когда дело доходит до функций и удобства использования, расширение занимает золотую середину. Хотя у него не так много функций, как у ColorZilla, он не так прост, как Color by Fardos. Это расширение используется более 1 000 000 пользователей и имеет общий рейтинг 4,3 из 5 . Использование этого расширения также чрезвычайно просто. Вы можете нажать на кнопку расширения, чтобы активировать пипетку.

Затем вам просто нужно выбрать цвет, который вы хотите выбрать. ColorPick Eyedropper мгновенно покажет значения RGB и HEX цвета . В дополнение к высокой точности ColorPick Eyedropper также имеет регулируемую функцию масштабирования . Как мы видели в других приложениях, оно может выбирать цвета из элементов веб-страницы, а также из проигрывателей Flash и HTML5. Расширение также расширяется до полноценной цветовой палитры, когда вы нажимаете на определенный цвет.

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

#4 Eye Dropper

Editor’s Rating: 8.6/10

Developer	Kepi
Price	Free

Download Now

Eye Dropper is an ultra -простое расширение выбора цвета для Google Chrome . В отличие от других расширений, перечисленных здесь, Eye Dropper не предлагает никаких дополнительных функций . Вы можете включить расширение, щелкнуть цвет, который хотите захватить, и вы получите значения HEX и RGB. Вы также можете проверить историю цветов , если вам нужны ссылки. Несмотря на свою простоту, расширение Eye Dropper также предлагает варианты настройки. Например, вы можете изменить поведение выбора веб-страницы и пользовательский интерфейс.

#5 Slick Color Picker

Ред. Редактор: 8,6/10

Разработчик	Джанет Пурди
Цена	БЕСПЛАТНЫЙ

9009

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

#6 Ultimate Color Sicker

Рейтинг редактора: 8,6/10

Разработчик	Verblike.com
Цена	Free
.0084

Загрузить сейчас

Мы заканчиваем этот список Ultimate Color Picker, расширением, которое остается верным своему названию. В Chrome это простое расширение позволяет эффективно выбирать цвета и находить их значения RGB. Вы также можете найти список всех цветов, которые вы выбрали в течение периода. Функция масштабирования и функции автоматического копирования также отлично подходят для большинства дизайнеров. Палитра цветов в стиле Photoshop пригодится и профессионалам. И последнее, но не менее важное: расширение Ultimate Color Picker поставляется с встроенный ярлык для запуска.

Часто задаваемые вопросы

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

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

Есть ли в Chrome палитра цветов?

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

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

Чтобы использовать скрытую палитру цветов в Google Chrome, необходимо щелкнуть правой кнопкой мыши веб-страницу, выбрать «Проверить», найти поле цвета в меню «Стиль» и щелкнуть поле цвета . Затем будет активирована палитра цветов, и вы сможете выбрать любой цвет на веб-странице.

Почему ColorZilla требуется разрешение на «доступ к данным на всех веб-сайтах»?

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

Итог

Не кажется ли вам, что сторонние расширения для выбора цвета для Chrome лучше, чем скрытый инструмент выбора цвета? Что ж, у нас есть основания в это верить. Мы также хотели бы добавить, что все инструменты, которые мы здесь упомянули, на 100% безопасны и обеспечивают конфиденциальность. Таким образом, вы можете использовать их без каких-либо опасений.

Лучшие расширения Chrome для выбора цвета для получения цветовых кодов HEX, RGB и HSL

Для художников и любителей цвета

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

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

Содержание

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

Вы можете получить цветовой код для любого цвета, который вы видите на веб-странице, с помощью Color Picker Tool – Geco.

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите определить.
3. Нажмите, чтобы сохранить цвет в списке расширений.

Затем вы увидите коды HEX, RGB и HSL в Новые и Выбранные раздела окна расширения. Выберите предыдущий цвет, который вы определили, и вы увидите эти коды в разделе New .

Дополнительные возможности:

• Автоматически копируйте HEX-код цвета в буфер обмена для удобной вставки в нужное место.
• Загрузите CSV-файл вашей цветовой палитры с кодами HEX, RGB и HSL.
• Настройте параметры для копирования в буфер обмена, включения уведомлений и использования щелчка правой кнопкой мыши.

Используйте пипетку от AKColor, чтобы получить код цвета с любого сайта, который вы видите в Интернете.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите пипетку слева и наведите курсор на цвет, который хотите определить.
3. Нажмите, чтобы просмотреть цветовые коды, а также ближайший цвет и средний цвет области.

Вы увидите красивое всплывающее окно с цветовыми кодами для RGB, RGBA, HEX, HSL и HSLA. Выберите любой из кодов, чтобы скопировать значения цвета в буфер обмена. Затем выберите Подобрать снова или Закрыть .

Дополнительные возможности:

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

Если вы ищете палитру цветов, которую можно использовать не только в Интернете, но и в других местах, Pick Color — это инструмент для вас.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите Выберите свой цвет , а затем выберите пипетку .
3. Наведите курсор на цвет, который хотите определить. Это может быть веб-сайт, рабочий стол или другое приложение.
4. Нажмите, чтобы сохранить цвет в расширении.

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

Бонусная функция

С помощью Pick Color вы можете быстро определить цвет на веб-странице и скопировать шестнадцатеричный код в буфер обмена несколькими щелчками мыши.

1. Щелкните правой кнопкой мыши веб-страницу и выберите Выберите цвет на странице в контекстном меню.
2. Наведите курсор на цвет, и вы увидите прикрепленный HEX-код.
3. Нажмите, чтобы скопировать шестнадцатеричный код цвета в буфер обмена.

Чтобы узнать о другом расширении Chrome с полезными дополнительными функциями, взгляните на палитру цветов на сайте linangdata.com.

1. Нажмите кнопку расширения на панели инструментов и перейдите на вкладку Пипетка .
2. Выберите Пипетка и наведите курсор на цвет. Вы увидите, что шестнадцатеричный код появляется при перемещении указателя.
3. Нажмите, чтобы сохранить цвет в списке расширений и одновременно скопировать шестнадцатеричный код в буфер обмена.
4. Повторно откройте расширение с помощью кнопки на панели инструментов, и вы увидите коды HEX, RGB, HSL, HSV и CMYK. Выберите значок копирования справа от любого из кодов, чтобы поместить его в буфер обмена.

Дополнительные возможности:

• Используйте вкладку Color Picker для отображения основных цветов с их цветовыми кодами.
• Перейдите на вкладку Цветовая шкала , чтобы просмотреть различные цветовые оттенки с их цветовыми кодами.
• Откройте вкладку Color Blender , чтобы умножить, затемнить, осветлить и наложить цвета.

Пипетка — хороший вариант выбора цвета для Chrome с несколькими бонусами, которые могут вам понравиться.

1. Нажмите кнопку расширения на панели инструментов.
2. Выберите Выберите цвет на веб-странице и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните цвет, чтобы сохранить его в списке расширений.
4. Когда вы снова откроете расширение, вы увидите цветовые коды HEX, HSL и RGB вместе с названием этого цвета в разделе Selected color.

Дополнительные функции:

• Используйте Color Picker вкладка для смешивания собственных цветов.
• Экспортируйте историю цветов в виде файла CSV с кодами цветов.
• Настройте параметры для копирования в буфер обмена, изменения внешнего вида указателя и отключения информации о цвете при перемещении курсора.

Если вы хотите идентифицировать цвета, а затем сгруппировать их для быстрого доступа, посмотрите Black-shrimp.

1. Нажмите кнопку расширения на панели инструментов. Откроется небольшое окно надстройки слева.
2. Наведите курсор на цвет, который хотите определить, и щелкните.
3. Вы сразу увидите HEX-код в окне. Используйте раскрывающийся список рядом с определенным цветом, чтобы просмотреть цветовые коды RGB или HSL.
4. Чтобы сохранить цвет, выберите плюсик внизу окна.

Дополнительные возможности:

• Добавьте группу с помощью значка папки и перетащите в нее сохраненные цвета.
• Экспортируйте сохраненные цвета в файл ASE (Adobe Swatch Exchange).
• Используйте сочетания клавиш для добавления цвета, создания группы, удаления или экспорта.

Если модные дополнительные функции не для вас и вам нужно простое расширение, взгляните на Easy Color Picker.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Выберите в правом верхнем углу и наведите курсор на цвет. При перемещении указателя вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX, RGB и HSL.

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

Подобно Easy Color Picker, Colorfly Color Picker. Возьмите цвет, просмотрите код и скопируйте значения, если это необходимо.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Pick Color и наведите курсор на цвет. При перемещении курсора вы можете просматривать значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, и вы увидите коды HEX, RGB и HSL в окне расширения. Выберите любой цветовой код, чтобы скопировать его в буфер обмена.

9. Color Picker (от kipelovvycheslav)

Еще одно базовое расширение браузера Chrome имеет то же имя, что и другое в нашем списке, Color Picker, на этот раз от kipelovvycheslav.

1. Нажмите кнопку расширения на панели инструментов.
2. Наведите курсор на цвет, который хотите идентифицировать, и щелкните.
3. Повторно откройте расширение, чтобы увидеть цветовые коды HEX, HSL и RGB.

Последнее, простое расширение Chrome без наворотов — Smart Color Picker.

1. Нажмите кнопку расширения на панели инструментов.
2. Нажмите кнопку Pick Color и наведите курсор на цвет. При перемещении курсора вы увидите значения HEX и RGB в правом нижнем углу окна браузера.
3. Щелкните нужный цвет, а затем снова откройте расширение с помощью кнопки, чтобы просмотреть коды HEX, RGB и HSL. Выберите любой цветовой код, чтобы скопировать его в буфер обмена.

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

Чтобы получить дополнительную помощь, ознакомьтесь с инструкциями по установке и удалению расширений в Chrome.

‘;document.getElementsByClassName(«post-ad-top»)[0].outerHTML=»;tocEl.outerHTML=tocHTML+newHTML;}}catch(e){console.log(e)}

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

Прочитать полную биографию Сэнди

Подписывайтесь на YouTube!

Вам понравился этот совет? Если это так, загляните на наш собственный канал на YouTube, где мы рассказываем о Windows, Mac, программном обеспечении и приложениях, а также предлагаем множество советов по устранению неполадок и видео с практическими рекомендациями. Нажмите на кнопку ниже, чтобы подписаться!

Подписывайся

Новое расширение Google Chrome | Блог Moqups

Используйте наше расширение для Chrome, чтобы включить цветную пипетку, делать снимки экрана в свою библиотеку и сразу переходить к Moqups одним щелчком мыши!

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

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

• Включить Color Eyedropper для выборки и сопоставления цветов
• Захват скриншотов страниц непосредственно в вашу библиотеку Moqups
• создавать проекты одним щелчком мыши

Читайте дальше, чтобы узнать, что вы можете делать с нашим новым расширением, загляните за кулисы нашего процесса разработки и узнайте, почему эти функции доступны только в браузере Chrome… пока!

Хотите установить расширение?
1. Посетите Интернет-магазин Chrome или в приложении Moqups просто щелкните пипетку в палитре цветов и перейдите по ссылке.
2. После установки расширения справа от адресной строки браузера появится синяя кнопка Moqups.
3. Чтобы включить пипетку, вам нужно обновить все вкладки, на которых открыто приложение Moqups.

Установите наше расширение для Chrome

Техническое приключение с нашей цветной пипеткой

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

Итак, почему мы не предоставили эту базовую функциональность раньше и почему сейчас мы полагаемся на расширение Chrome? Два слова: безопасность и технологии.

Color Eyedropper

Большинство программ, предназначенных для визуализации сложной 2D-графики в браузере, используют SVG/HTML или Canvas для отображения этой графики. Но как SVG/HTML, так и Canvas имеют свои ограничения.

Подобно Google Slides и веб-версии Keynote от Apple, Moqups выбрал SVG/HTML для отображения наших проектов. Это позволило нам поддерживать расширенный текстовый контент, предоставить отличную готовую типографику (особенно для нелатинских символов) и предложить более реалистичный предварительный просмотр.

Однако одним из недостатков SVG/HTML является то, что доступ на уровне пикселей, необходимый для образцов цветов, либо заблокирован, либо строго ограничен производителями браузеров. Это связано с проблемами безопасности. Без этих ограничений вредоносные сторонние скрипты, встроенные в страницы, могут получить несанкционированный доступ к вашей конфиденциальной информации.

Итак, нам пришлось искать другой подход.

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

Использование нашей новой пипетки

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

Использовать пипетку очень просто:

1. Щелкните значок пипетки, чтобы открыть окно инспектора в правом верхнем углу экрана.
2. При перемещении курсора-перекрестия по странице в окне будет отображаться крупный план пикселей под ними, а также их значения RGB и Hex.
3. Нажмите, чтобы выбрать цвет под курсором.
Как пипетка позволяет делать скриншоты

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

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

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

С нашим новым расширением вам больше не нужно выполнять утомительный процесс создания скриншотов, поиска их в папке «Загрузки», переименования и последующей ручной загрузки в Moqups. Теперь вы можете быстро захватить видимую область, выделенную область или всю веб-страницу и мгновенно добавить ее в свою библиотеку изображений группы.

Делать снимки экрана легко и быстро:

1. Щелкните значок расширения Moqups справа от адресной строки браузера
2. Выберите один из вариантов снимка экрана страницы
   • Видимая область захватит только то, что в данный момент видно в окне вашего браузера
   • Выделенная область позволит вам щелкнуть и перетащить, чтобы выбрать определенную часть окна
   • Вся страница захватит всю веб-страницу
3. Ваш снимок экрана откроется в новая вкладка браузера; здесь вы можете назвать его, сохранить прямо в свою библиотеку Team Images в Moqups — или отменить, если вы хотите попробовать еще раз!
4. После того, как вы нажали кнопку Сохранить в Moqups
   и изображение было загружено, просто нажмите кнопку Готово! Перейдите к кнопке Moqups , чтобы сразу перейти к вашему проекту.

   No related posts.