Figma Color Picker From Image — Or Use This Free Browser Alternative
Table of Contents
Figma has an eyedropper built into its color picker — you can sample a color from any element on the canvas. But that eyedropper only works within Figma. If you want to extract a color from an image file you have not added to Figma yet, or if you need the hex code before opening Figma at all, a browser-based tool is faster. No canvas required, no image placement needed.
What Figma's built-in eyedropper does (and doesn't do)
In Figma, the color picker includes an eyedropper icon. Clicking it lets you sample any color from your Figma canvas — including colors in images you have placed on the canvas. This works well when you are already designing in Figma and want to match a color from a reference image that is already in your file.
The limitation: the Figma eyedropper only samples from the Figma canvas. To use it on an external image, you must first place that image into a Figma frame. For quick extraction before opening Figma, or for images you do not want in your Figma file, this adds unnecessary steps.
The browser-based alternative
Open the Kingfisher Color Extractor alongside Figma. Drop any image file directly — without placing it in a Figma canvas first. Get the 8 dominant colors plus pixel-level picking in one view. Copy the hex code and paste it directly into any Figma color field.
This workflow is faster for:
- Extracting colors from reference images before starting a Figma design
- Checking the colors in a delivered asset file without importing it to Figma
- Getting hex codes to share in a design brief before the Figma file is set up
When Figma plugins for color extraction are worth using
Plugins like "Image Palette" in the Figma Community can extract a color palette from an image placed on the canvas and create color styles automatically. These are useful when you want the colors imported directly as Figma color styles rather than just hex codes you will paste manually.
Use a plugin when: you are setting up a design system in Figma and want extracted colors to become named color styles automatically.
Use the browser tool when: you just need the hex codes quickly, you are working on a machine where plugins are not available (Figma starter limits plugins), or the image is confidential and you do not want it in a Figma file.
How to use extracted colors in Figma
After copying a hex code from the extractor:
- Select any element in Figma
- Click the color in the Fill or Stroke panel
- In the color picker, click the hex value field at the bottom
- Paste or type the hex code
To create a reusable color style: after setting the color on an element, click the "+" icon in the Fill panel beside "Color Styles" to save it as a local style. Name it according to your design system convention.
For batch importing, the CSS export from the extractor gives you all hex values in one file you can reference while building out your color styles.
Try It Free — No Signup Required
Runs 100% in your browser. No data is collected, stored, or sent anywhere.
Extract Colors FreeFrequently Asked Questions
Can I use the Figma eyedropper to sample from outside the Figma window?
No — the Figma eyedropper is constrained to the Figma canvas. To sample from anywhere on your screen, you need a separate screen-wide eyedropper tool (like macOS Digital Color Meter or Windows PowerToys Color Picker).
Does this work with Figma Dev Mode or FigJam?
Yes — the browser color extractor works alongside any Figma product. It's a separate browser tool, not a Figma integration, so it works with any version or plan.
James worked as an in-house graphic designer for six years before moving to content writing. He covers image editing and design tools with a focus on what actually works for non-designers.
More articles by James →