Nearest Color Finder

About this plugin

🌈 Finding Your Perfect Match Just Got Easier!Ever stumbled upon a random color and wondered, Which token from my design system is closest to this?Nearest Color Finder helps designers and developers instantly match any color with the nearest style or variable from their design system libraries — removing guesswork and manual comparison completely.By scanning through your local styles, variables, and connected library snapshots, the plugin helps teams maintain better design consistency across files, products, and workflows.---✨ What does it do?Nearest Color Finder allows you to:Match any random color with the nearest design tokenScan both local styles and variablesUse connected design system libraries across different filesDetect colors automatically from selected elementsAnalyze nested layers and complex UI componentsInspect gradient steps and their nearest matching tokensWhether the color comes from:a screenshot,an imported design,a hardcoded developer value,or a random hex code,…the plugin instantly finds the closest matching color from your design system.No more manually searching through hundreds of tokens or visually comparing similar shades.---🚀 What’s New in Version 2.0?🌐 Library Snapshot SupportYou can now add library snapshots from your design system and use them across any Figma file.This means:No need to open the original library fileMatch colors in external or audit filesWork consistently across projects and teams---⚡ Instant Color Matching on SelectionMatching colors is now faster than ever.Previously, you had to manually trigger the plugin to search for nearby colors. In 2.0, simply selecting an element automatically shows the nearest matching color from your design system.Even better:Works on nested layersDetects colors inside buttons, modals, cards, and complex componentsSupports text, fills, strokes, and layered UI elementsJust click and inspect — no extra steps required.---🌈 Gradient Step DetectionGradients are now fully supported.Nearest Color Finder can now:Detect all gradient steps used in an elementShow the exact hex value for every gradient stopMatch each step with the nearest design system colorThis helps teams standardize gradients and identify inconsistent color usage much faster.---📋 Copy Style / Variable Name & Hex CodeYou can now click on the matched style or variable color indicator to instantly copy:The exact style/variable nameThe matching hex color codeThis makes it much easier to:Search the exact token in your libraryCommunicate colors with developersReplace hardcoded colors quickly---🔄 Quick RefreshAdded a refresh button for faster workflows.Now you can refresh libraries and updates instantly without reopening the plugin.---👥 Perfect ForDesigners maintaining scalable design systemsDevelopers validating UI implementation colorsProduct teams auditing consistency across filesAnyone working with tokens, variables, and shared libraries---Jump in and give Nearest Color Finder a whirl. And hey, if you’ve journeyed with us before, drop us a line with your thoughts. We're always looking to level up with your feedback! Stay colorful and consistent, Figma fam! 🎨👩‍🎨👨‍🎨