How to Use Color Picker in Windows 11 using PowerToys?

Grabbing Color Codes using PowerToys Color Picker Utility tool in Windows 11!

Today, I discovered a best PowerToys utility for Windows 11 users called Color Picker. As a web developer, I often need to pick colors, whether it’s for backgrounds or other design elements. I get inspiration for background colors from images and other websites. For example, I use the Color Picker from image tool developed by IMGCentury, where I can upload an image, and the tool will display the most used colors and other color codes found in the image.

This PowerToys Color Picker is a game changer for web and app developers. It allows you to pick colors from any screen and copy them in a format you can customize. In this tutorial, I will show you how to use the Color Picker effectively on your Windows 11 PC.

What is Powertoys Color Picker?

PowerToys Color Picker is a tool for Windows 11 that lets you pick colors from anywhere on your screen. You can quickly select a color and copy its code to your clipboard, making it easy to use in your projects. It’s especially helpful for designers and developers who need to match or identify colors quickly.

Why Choose PowerToys Color Picker?

You can download the latest version of PowerToys from the official GitHub repository. Alternatively, my brother wrote a helpful guide on how to download and install the PowerToys tool on your Windows 11 PC.

1. Enable PowerToys Color Picker Utility:

To use this tool, you need to enable it in the PowerToys application. Follow the steps below to do this.

Launching PowerToys Application on Windows 11 PC
Launching PowerToys Application on Windows 11 PC
Enable Color Picker Utility using PowerToys
Enable Color Picker Utility using PowerToys

2. Activating Color Picker:

Once the utility is enabled, you can activate the Color Picker using the keyboard shortcut WinKey + Shift + C. Be sure to press and hold the WinKey first, then the Shift key, and finally the C key to activate the Color Picker.

You can adjust how the Color Picker behaves after launching it with the keyboard shortcut. By default, the “Pick a color and open editor” option is selected. You can click the dropdown menu to choose other options as well.

Activation behaviour options in color picker utility
Activation behaviour options in color picker utility

3. Picking Colors:

After activating the Color Picker, you can select any color on your screen by hovering over it. If you need a closer look at the area under your cursor, scroll up (using mouse wheel up) to zoom in. By default, the Color Picker will copy the color code in hexadecimal format, which is useful for web developers. After choosing the color, the color editor window will automatically appear.

Using Color Picker in Windows 11 PC
Using Color Picker in Windows 11 PC
Note:

To Select the Color from a Non Selective or Tiny Area:

  • You need to move your mouse cursor near to the area
  • Use the Mouse Wheel Up to enable Zoom window of the tiny area
  • Now you need to select the color from the zoomed tiny area to extract the color code.

4. Color Picker Editor:

After selecting a color from your screen, the Color Picker editor window will appear. This window shows the selected color in 3 different formats. Besides the color code details, it also provides a history of the colors you’ve picked. The editor window displays up to 8 colors at the top, allowing you to choose from your previously selected colors. For more detailed information, please refer to the GIF image.

Color Picker Editor Settings
Color Picker Editor Settings
Removing colors from the History in Color Picker Editor.
Removing colors from the History in Color Picker Editor.
Exporting Colors from the Color Picker Editor's history
Exporting Colors from the Color Picker Editor’s history

After saving the color as a text file:

color1;HEX#1f890f;RGB(31, 137, 15);HSL(112, 80%, 30%)

In this format, all the details (HEX, RGB, HSL) for a single color are provided on one line. This makes it easy for you to see all the information for each color at a glance.

HEX;color1#1f890f
RGB;color1(31, 137, 15)
HSL;color1(112, 80%, 30%)

In this format, The information is organized by color code type, with each format (HEX, RGB, HSL) listed separately.

5a. Color Picker Formats:

By default, the Color Picker displays only 3 formats, but you can add or remove formats from the Color Picker editor in the settings.

Color Pickers' Color Formats
Color Pickers’ Color Formats
Adding Color Formats in Color Picker Settings
Adding Color Formats in Color Picker Settings
Adding New Color Code Format in Color Picker Editor
Adding New Color Code Format in Color Picker Editor
Deleting Custom Color Code Format from Color Picker Editor
Deleting Custom Color Code Format from Color Picker Editor

5b. Define Color Formats with Parameters:

You can use the following table as a reference for creating color formats with the available parameters.

ParameterMeaningExample
%ReRed%Re = 255
%GrGreen%Gr = 128
%BlBlue%Bl = 64
%AlAlpha%Al = 1.0
%CyCyan%Cy = 0.5
%MaMagenta%Ma = 0.75
%YeYellow%Ye = 0.25
%BkBlack key%Bk = 0.0
%HuHue%Hu = 180°
%SiSaturation (HSI)%Si = 0.7
%SlSaturation (HSL)%Sl = 0.6
%SbSaturation (HSB)%Sb = 0.8
%BrBrightness%Br = 0.9
%InIntensity%In = 0.85
%HnHue (natural)%Hn = 200°
%LlLightness (natural)%Ll = 0.5
%LcLightness (CIE)%Lc = 0.7
%VaValue%Va = 0.8
%WhWhiteness%Wh = 0.3
%BnBlackness%Bn = 0.2
%CaChromaticity A%Ca = 0.56
%CbChromaticity B%Cb = 0.42
%XvX value%Xv = 0.4124
%YvY value%Yv = 0.2126
%ZvZ value%Zv = 0.0193
%DvDecimal value%Dv = 16711680
%NaColor name%Na = Red

This table gives you a clear reference for the parameters used in creating custom color formats, with examples to explains each one. Here’s the below table with formatting options for the red, green, blue, and alpha values:

FormatterMeaningExample
bByte value (default)%Reb = 255
hHex lowercase one digit%Reh = f
HHex uppercase one digit%ReH = F
xHex lowercase two digits%Rex = ff
XHex uppercase two digits%ReX = FF
fFloat with leading zero%Ref = 0.99
FFloat without leading zero%ReF = .99

Example Format Usage:

If you want to format the red value as a hex uppercase two digits, you would use %ReX. An example of a custom format could be:

6. Restrictions of Using PowerToys Color Picker:

7. Related Posts:

Verdict:

That’s it! I’ve provided detailed information about using the Color Picker in Windows 11 with PowerToys. As a developer, this utility has been incredibly helpful for me. Although it has some minor limitations, these will likely be fixed in future updates. Use this tool effectively, and it will help you build web apps with vibrant colors. If you have any questions about this topic, feel free to comment below. For more tutorials, visit WinSides.

Exit mobile version