ColorSnapper for Designers: Precise Mac Color Picker with Magnifier

macOS color picker that magnifies pixels and copies color values in any format to your clipboard

ColorSnapper is a Mac color picker that lives in your menubar until you need it. Hit a keyboard shortcut and a magnifying loupe appears. Move your mouse to any pixel on screen, click, and ColorSnapper copies the color value to your clipboard in your preferred format (HEX, RGB, Swift, etc.). The entire process takes two seconds.

Key Specs

   
Price $5-10 one-time purchase
Platform Mac only (macOS 10.12+)
Best for UI design, front-end dev, color matching
Learning curve 30 seconds to learn; instant workflow

How Designers Use ColorSnapper

For Matching Brand Colors

See a color you like on a website or in an app. Hit your ColorSnapper shortcut, hover over the pixel, and click. The HEX code copies to your clipboard. Paste it into Figma, Sketch, or CSS. No screenshots, no guessing, no manual RGB-to-HEX conversion.

For Design QA and Handoff

When reviewing developer builds, use ColorSnapper to verify that colors match your design specs. Hover over a button, check the HEX value, compare it to your design system tokens. If the developer used #2E7D32 instead of #2E7C32, catch it before launch.

For Building Color Palettes

Scrape colors from inspiration sources (Dribbble, Pinterest, existing sites). ColorSnapper’s history panel stores your last 200+ picked colors. Export them as a palette or reference them later. Faster than screenshot-crop-upload to color palette generators.

ColorSnapper vs. Alternatives

Feature ColorSnapper Digital Color Meter Figma’s Eyedropper ColorSlurp
Platform Mac only Mac built-in Figma only Mac, iOS
Price $5-10 Free Free Free + Pro
Multiple formats ✅ 14+ ❌ RGB only ⚠️ Figma formats ✅ Many
System-wide hotkey
History ✅ 200+
Retina precision ✅ Physical pixels ⚠️ Logical only
Color palette export ⚠️ Basic ✅ Strong

Choose ColorSnapper if: You want the fastest possible color picker with format flexibility and don’t need palette organization.

Choose Digital Color Meter if: You rarely pick colors and can’t justify $5 for a dedicated tool. It’s free but clunky.

Choose ColorSlurp if: You want color palette management, cloud sync across devices, and automatic palette generation from images.

Choose Figma’s eyedropper if: You only pick colors within Figma designs and don’t need system-wide access.

Getting Started with ColorSnapper

A 2-minute quick start to picking your first color:

Step 1: Install and set your hotkey

Download ColorSnapper 2 from colorsnapper.com or the Mac App Store. On first launch, choose a keyboard shortcut (default is Cmd + Shift + C, but customize to avoid conflicts). ColorSnapper sits in your menubar until triggered.

Step 2: Pick your first color

Press your hotkey. A magnifying loupe appears. Move your mouse to any pixel on screen. The loupe magnifies the area and shows the current color value. Click to copy it to your clipboard. The format depends on your preferences (set in menubar > Preferences).

Step 3: Switch between color formats

Open Preferences from the menubar icon. Set your primary format (e.g., HEX for CSS) and secondary format (e.g., UIColor for Swift). While picking a color, hold the Option key to toggle between formats. This lets designers grab HEX and developers grab Swift code from the same pixel.

ColorSnapper in Your Design Workflow

ColorSnapper is a quick-access utility that doesn’t replace design tools. It fits into moments when you need a color value fast.

  • Before ColorSnapper: See a color somewhere (web, app, photo, mockup)
  • During design: ColorSnapper to grab the exact value
  • After ColorSnapper: Paste the color into your design tool, code, or style guide

Common tool pairings:

  • ColorSnapper + Figma/Sketch for importing colors from external sources into design files
  • ColorSnapper + VS Code for quickly grabbing UI colors from running apps to match in CSS
  • ColorSnapper + Notion/Markdown for documenting brand colors in style guides

Common Problems (and How to Fix Them)

“ColorSnapper shortcut doesn’t work”

Check for conflicts with other apps. Go to System Preferences > Keyboard > Shortcuts and search for apps using the same shortcut. Common conflicts: screenshot tools (CleanShot, Droplr) and clipboard managers. Change ColorSnapper’s shortcut to something unique like Cmd + Ctrl + C.

“Colors don’t match between ColorSnapper and my design tool”

Color profiles matter. ColorSnapper reads your display’s RGB values. If your design tool uses a different color profile (Display P3 vs sRGB), values differ. ColorSnapper automatically converts colors from native macOS apps to sRGB, but other apps might not. For accuracy, set your monitor to sRGB profile in System Preferences > Displays > Color.

“Can’t pick colors from full-screen apps”

macOS security prevents some apps from reading pixel data in full-screen mode. Exit full-screen (green button) and try again. If that doesn’t work, take a screenshot first and pick from the screenshot instead.

“History doesn’t save colors”

ColorSnapper saves history automatically, but if you’re not seeing past colors, check that history isn’t disabled in Preferences. The history panel (menubar icon > History) shows your last 200+ picks. If it’s empty after picking colors, reinstall ColorSnapper or check macOS privacy permissions (System Preferences > Security & Privacy > Accessibility).

“ColorSnapper is slow on my M1/M2 Mac”

ColorSnapper 2 runs natively on Apple Silicon. If it’s slow, check Activity Monitor for other apps using CPU. Sometimes menubar apps conflict. Try disabling other menubar utilities temporarily. If slowness persists, reset ColorSnapper’s preferences (delete ~/Library/Preferences/com.koolesache.ColorSnapper2.plist) and restart.

Frequently Asked Questions