If you’re a designer, you likely pay attention to the design of things that you use, looking for inspiration or ideas that you’d like to adopt. Websites are no different and one of the key parts of website design is the use of color. If you spot a website with the perfect color for a project you’re working on or thinking about, then you’ll likely want to work out exactly what color it is. While you could take a screenshot, open it in an image editor and then look at the RGB values, this process is slow. Firefox actually has a color picker tool built-in so you can save yourself the time and get the exact value in the hexadecimal HTML color format used on the web.
How to use the color picker
Firefox’s color picker can be found in the developer toolbar. To access it, click on the burger menu icon in the top-right corner, then click “Web Developer” which can be found fourth from the bottom.
In the list of web developer tools, click on “Eyedropper” and the eyedropper tool will open.
Tip: The eyedropper tool can’t be moved across tabs or windows, so make sure you open it in the tab you want to use it in. You also won’t be able to scroll the page, so make sure you’re in the right spot on the page. While you can technically zoom in and out, this will cause the centering of the color picker to break, making it much harder to accurately use.
The eyedropper tool will follow your mouse across the window, so move the central highlighted square over the color you want to select. The zoom level is precise enough to allow you to easily see and choose the color of a specific pixel.
The HTML color code of the pixel is displayed in the small box below the zoom tool but will also be copied to the clipboard if you click on the color you like. Just be aware clicking will close the color picker, forcing you to reopen it again if you wanted to pick out multiple colors.
Did this help? Let us know!