Did you ever wonder how to get the color code of a beautiful color you find in a webpage or a document? Many times, you come across a banner on a webpage or background color in an app and want to use the same color for your own design. By default, Windows do not offer a color picker to select an item and copy its color codes. However, there are free apps and browser extensions that you can use for picking colors with additional options. In this article, we will explain some popular ways to use color picker in Windows.
Selecting color picker app depends on the purpose you want to use. We will explain the following three ways using different apps and extension.
- Systemwide color picker to copy the color code to clipboard.
- Color picker extension for Edge to use only on the browser.
- Color picker for Microsoft Word and PowerPoint.
1. Systemwide Color Picker Using Microsoft PowerToys
The best option to use color picker in Windows PC is to use Microsoft PowerToys app. This is a free and official app from Microsoft which you can install from Microsoft Store. It comes with more than 10 free utilities to power up your computer. Here we will focus on the Color Picker tool and check out our guide on PowerToys to understand about all the available tools.
Click the Microsoft Store app icon showing on the taskbar of your Windows 11 PC. If you are not finding the icon or using Windows 10, click on the search icon to search for “store” and open Microsoft Store app.
When you are in Microsoft Store, search for “powertoys” and install the Microsoft PowerToys app. Remember, this app will work only on Windows 11 and 10 versions and not on earlier versions.
After installing the app, open it either from Start menu or by using Windows search. The name of the app will show as “PowerToys (Preview) in Start menu programs list and in the search results.
When the PowerToys app opens, go to Color Picker section turn the switch on against “Enable Color Picker” option. Now, you can start using the Color Picker systemwide using the default settings or customize the settings as per your need.
- The default shortcut to open Color Picker is “Win + Shift + C”. You can click on the pencil icon next to the shortcut keys to assign a new shortcut if you need.
- You have three options to set the activation behavior – only pick a color, open editor and pick a color and open editor.
- PowerToys Color Picker offers 13 different color formats and choose your favorite format from the “Default color format” dropdown. The available formats include CMYK, HEX, HSB, HSI, HSL, HSV, HWB, NCol, RGB, CIE LAB, CIE XYZ, VEC4 and Decimal. We have not seen any other color picker tool offers these many formats.
- Enable “Show color name” switch to show the name of the color when you pick.
- Since there are too many color formats are available, showing all of them will be congested in the editor. Therefore, you can disable unnecessary formats and rearrange the order under “Editor” section.
Only Pick a Color and Copy to Clipboard
When you finished the setup, press “Win + Shift + C” or the keyboard shortcut you setup to open the color picker. If you have only selected “Only pick a color” for activation behavior, then you will see a color palette attached to the mouse pointer showing the color name and code in the set default format. The color picker will pick the color dynamically while you move mouse pointer over the objects. Click the mouse to copy the selected color to clipboard in default color format. Now, you can paste the copied color code from clipboard anywhere you want. If you do not want to copy the color, simply press escape key to quit the color picker.
Note: You can copy multiple colors to clipboard by enabling clipboard history option in Windows as explained in this article.
Open Editor or Pick Color and Open Editor
If you have selected the activation behavior as “Open editor”, then pressing the shortcut keys will open the Color Picker editor of PowerToys tool. Similarly, for “Pick a color and open editor” behavior, pressing the shortcut keys will first show the color palette with mouse pointer. When you select a color, the tool will open the editor for customizing the selected color.
- The editor will show the list of color formats as you have enabled in the PowerToys settings page.
- You can find the historically picked colors in the left sidebar for selection.
- Click the pencil icon showing on top left corner of the editor to pick a new color.
- Click the gear icon to open PowerToys Color Picker settings page.
- You can find click to copy icon next to each color code format, click on it to copy the color code to clipboard.
- Press escape or click close icon to quit the editor.
If you want to customize the selected color, click on the different sections of the color band. For example, click on the center portion to open additional options for manually editing HSV, RGB and HEX values of the color code. You can see the preview based on your adjustment to help you to visualize the color codes dynamically.
2. Color Picker Extension for Edge
Microsoft Edge comes with a default color picker tool as part of its DevTools. Simply right-click on a page and select “Inspect” option to open DevTools. Click on any CSS property for colors (like background-color) to view the color picker. You can use the color picker (pencil icon) to pick any color from the webpage and get its color code. Click on the arrow marks in the color picker to change the format and customize the selected color.
You can also use PowerToys Color Picker in Edge to pick the colors as explained above. If you want a custom Edge add-on that works only on the Edge, then go to Microsoft Edge add-on page. Search for “color picker” and install Just Color Picker extension.
After installing the extension, open any webpage and click on “Alt + P” shortcut keys. This will show the color codes in RGB and HEX formats on lower right corner tracking mouse pointer. Press the left mouse key to copy the color code of the object to clipboard.
If you want to see the editor, click on the extension icon showing next to address bar. This will open the editor showing recently picked colors and an option to pick a new color from the webpage. Click on the color code to copy to clipboard and use the arrows to change the format. Though this is a cool extension, it offers only three color codes in RGB, HSL and HEX formats.
3. Using Color Picker in Microsoft Word and PowerPoint
Word and PowerPoint apps offer an in-built color picker when you draw objects.
- Go to “Draw” menu and select the pen from “Drawing Tools” group.
- After selecting the pe, click on the small down arrow showing on the selected pen to open color options.
- Click “More Colors” showing at the bottom of the dropdown.
- This will open color picker to choose colors from standard and custom tabs.
- Go to “Custom” tab and pick up a color or set RGB/HSL/HEX codes to find its corresponding color.
Though in-built color picker tool is useful to select color for pens, it will not allow to pick color from the document or from other objects.
Final Words
If you really need a color picker that works systemwide, then we strongly recommend using PowerToys Color Picker tool. PowerToys also comes with handful of useful tools for splitting screen, mapping keys, etc. Good part is that you can set a custom keyboard shortcut to open color picker and any time enable/disable the tool from the settings page. However, if you only want to use color picker in Edge, then choosing an extension is sufficient. The color picker in Word and PowerPoint is a quick tool to adjust the pen colors and not much useful for other purposes.
Параметры цвета
Websafe:
Выбранные цвета:
Pixie – это очень маленького размера утилита, не требующая установки в систему, созданная специально для вебмастеров и дизайнеров, помогает определить цвет произвольной точки на экране монитора.
Программа запускается в небольшом окне в котором размещена информация о горячих клавишах и список вариантов цветов, таких как HEX, HTML, RGB CMYK, HSV, а также две кнопки, свернуть программу в трей и закрыть. Pixie также покажет текущие координаты указателя мыши.
Пользоваться утилитой очень просто, необходимо ее запустить и навести курсор мыши на нужный элемент, в результате Pixie нам покажет цвет в нескольких форматах, о них я написал выше.
Кроме этого в утилиту включено еще два дополнительных инструмента, это таблица цветов или по-другому миксер, и увеличительное стекло, позволяет увеличить элемент на который наведен курсор, это позволит более точно определить цвет самых мелких элементов.
Горячие клавиши:
CTRL + ALT + C – скопировать в буфер обмена цвет в формате HTML
CTRL +ALT + Z – Открыть инструмент лупа.
CTRL + ALT+ X – Открыть таблицу цветов (миксер)
Pixie это один из самых простых инструментов для определения цвета на экране монитора, пользуйтесь.
Как определить цвет любого пикселя на рабочем столе
Как все наверно знают палитра цветов очень большая, поэтому в большинстве случае определить цвет по внешнему виду невозможно. Для этих целей многие использую специальные онлайн сервисы, которые могут определить цвет любого пикселя на картинке, но только но картинке. А что делать если необходимо определить цвет скажем ярлыка на рабочем столе, элемента системного окна или элемента другого приложения. В этом случае поможет приложение «PowerToys» разработанное самой компанией Microsoft, в его арсенале достаточно много функции которые расширяют стандартные возможности операционной системы Windows и упрощают работу.
Найти и установить приложение можно в Microsoft Store, о том как это делается я уже рассказывал в одной из предыдущих статей.
Определяем цвет пикселя
После установки запускаем «PowerToys» и переходим в раздел «Цветоподборщик». Далее включаем данное дополнение к системе, при необходимости можно изменить сочетание клавиш для его активации, настроить действие при активации и включить отображение цвета.
Ниже можно включить необходимые форматы цветов.
После этого пора посмотреть как это работает, активируем «Цветоподборщик» нажав комбинацию горячих клавиш и наводим курсор мыши на элемент цвет которого хотите узнать и один раз кликаем кнопкой мыши.
В результате откроется окно в котором данный цвет будет отображен в выбранных ранее форматах, по умолчанию это «HEX» «RGB» «HSL».
Теперь можно его скопировать и использовать в своих целях. Вот так с помощью «Цветоподборщик» можно определить цвет абсолютно любого пикселя на экране и не важно что это, картинка, окно, приложение, ярлык и т.д.
Такой вопрос наверняка ни раз возникал у веб-дизайнера, разработчика или простого пользователя компьютера. Часто возникает необходимость подобрать цвет используемый на каком-либо объекте, например сайте или просто точки на экране монитора.
Такой вопрос наверняка ни раз возникал у веб-дизайнера, разработчика или простого пользователя компьютера. Часто возникает необходимость подобрать цвет используемый на каком-либо объекте, например сайте или просто точки на экране монитора.
Существуют несколько основных способов представления цветов, например когда каждый цвет или оттенок, обозначается HTML кодом и цветовой палитрой RGB в виде #FF7700. Это представление в виде трёх пар шестнадцатеричных цифр, в которых каждая пара отвечает за свой цвет:
первые две цифры — красный цвет, т.е. — R (red)
две в середине — зелёный — G (green)
последние две цифры — синий — B (blue)
Довольно часто используют крадкое представление цвета в виде трех символов #F70, что будет равносильно #FF7700.
Кстати, на веб-ресурсах цвета обычно указываются в стилях CSS.
Давайте перейдем к ответу на главный вопрос — Как узнать цвет пикселя на экране монитора или картинке?
Способов большое множество…
Способ 1. Узнаем цвет в photoshop
Итак, сделаем «снимок экрана» нажатием на клавиатуре клавиши — Print Screen (PrtSc), в том месте, где хотим узнать код нашего цвета. Во время нажатия клавиши система сохранит снимок в буфере обмена. Можно просто скопировать изображение, например из браузера, без PrtSc. Теперь остается только вставить изображение из буфера в фотошоп.
Открываем фотошоп и вставляем изображение (Файл — Создать, Редактирование — Вставить). Ищем на панели инструментов «Пипетка» (Клавиша I), далее щелкаем левой кнопкой мыши в ту область, в котрой хотим «снять» цвет. Все готово! Теперь остается перейти в палитру и узнать код цвета.
Способ 2. Узнаем цвет в Paint
Заходим в Paint — вставляем картинку — используем инструмент «палитра» — переходим в «изменение цветов»:
В нашем случае красный — 252, зеленый — 168, синий — 10, т.е. RGB(252,168,10) или в HEX формате #FCA80A.
Способ 3. Просмотреть код элемента в браузере
Опишу способ для браузера Opera. Выделяем мышкой элемент на сайте и щелкаем по нему правой кнопкой мыши — «Просмотреть код элемента» (Ctrl + Shift + C). Откроется панель с html и css кодом, нужно будет найти что-то подобное «color».
Способ 4. Использование специальных средств или программ.
Существует большое количество специальных программ для снятия цвета, мне нравится очень простая прога под названием «Pixie» с весом около 10-11 Кб. Управление очень простое. Достаточно просто навести мышь в нужную точку на экране монитора и нажать следующие клавиши — Ctrl + Alt + C, в результате чего цветовой код скопируется в буфер обмена.
