Color palette
Swatches — click any pill to copy value
Extract a color palette from any photo, logo, or mood board and bring it into Figma in seconds. Export as a PNG to import, use hex codes directly, or copy CSS variables for Figma Variables.
Color palette
Swatches — click any pill to copy value
When a project starts from photography or a visual reference, getting those exact colors into Figma accurately — without manual eyedropper work — saves significant time and produces more precise results.
Extract the palette from a hero image or lifestyle photo and import it directly into Figma's color system. Every UI element then shares a visual foundation with the photography it sits alongside.
Upload a client's logo or brand photography to get precise swatches. Import the exported PNG into Figma and use the color picker to add them to your local styles — far faster than manually entering hex codes.
Extract a palette from inspiration images and bring the colors into a shared Figma file with your team. A visual palette object makes it easy to reference and discuss color choices in design reviews.
Use the CSS variables export to manually populate Figma Variables (via the Variables panel) or to align your Figma color tokens with the colors defined in your codebase.
Download the palette PNG and drop it into your Figma presentation to visually show clients the color direction before committing to a full design concept.
Extract palettes from multiple reference images to explore different color directions in Figma. Lay them out side by side as a visual comparison before making decisions.
There are two main routes — use whichever fits your Figma workflow better.
Click "Download PNG" to save your color palette as an image. Drag the PNG into your Figma file. Use the color picker eyedropper to sample each swatch and add it to your local color styles or variable collection.
Copy individual hex codes by clicking any swatch, then paste them directly into Figma's fill color input. For a full palette, click "Hex codes" to copy all values as a comma-separated list.
Copy the CSS variables export and add the values as Figma Variables in the Variables panel. This keeps your Figma file and codebase in sync, with named color tokens that reference the same hex values in both.
In Figma, select a rectangle, apply your extracted color as a fill, then create a local color style from that fill. Name the style to match your design system — "Brand/Primary", "Neutral/100", etc.
Common questions about this workflow.
The simplest method: use the Download PNG button to save your extracted palette as an image file, then drag that PNG into your Figma file. Use Figma's eyedropper tool to sample each color and create a local color style or Variable from it. Alternatively, copy individual hex codes and paste them directly into Figma's fill color field.
Yes. Upload the brand photo or campaign image, extract 4–8 colors using the slider, and export either as CSS variables or a PNG. Use the hex values to manually populate Figma Variables in the Variables panel, naming each token to match your design system structure — for example Brand/Primary, Brand/Secondary, and Neutral/Background.
Most UI color systems need 5–8 functional colors: a primary, a secondary or accent, a background, a surface, a text color, and 1–2 supporting tones. If you're building a full design system with semantic tokens, extract 8–12 and map them to roles (primary, secondary, success, danger, neutral) in Figma Variables.
Yes. Take a screenshot of your Figma file, upload it to the tool, and extract the colors. This is useful for reverse-engineering an existing design, auditing the colors actually in use, or extracting a palette from a client-provided mockup to replicate in a new project.
Yes — it's entirely browser-based and independent of Figma. You don't need to install any plugin or be logged into Figma to use it. Extract your palette here, then bring the values into Figma however you prefer — PNG import, manual hex entry, or adding to Variables.
Other ways to use Find Palette for your workflow.