HexDrop Documentation

Getting Started

On first launch, HexDrop may show a welcome screen with quick tips. You can turn this off and find it again under About HexDrop in the menu.

Finding HexDrop

HexDrop lives in the menu bar: look for the droplet icon on the right side of your screen. If you don't see it, click the arrows (» or ››) at the edge of the menu bar to reveal the overflow area—HexDrop may be there. You can drag it into the main menu bar if you prefer.

Opening the Menu

Left-click the HexDrop icon to open the menu. You'll see two main options:

• Pick — Start picking a color from your screen. This is the primary way to capture colors.
• Formats — View and copy a color in multiple formats (HEX, RGB, RGBA, HSL, HSLA, and more).

You can also use keyboard shortcuts from any app—no need to switch to HexDrop first.

Quick Reference

For everyday speed, Live Loupe is hard to beat. When you need the tightest possible match, turn Live Loupe off and use the system color picker instead. Below is a cheat sheet—details are in the sections that follow.

Picking Colors

1. Click the Pick button in the menu, or press ⌘⇧E from anywhere.
2. Move your cursor over the color you want.
3. Click to capture it.

Every picked color is automatically copied to your clipboard and added to your history.

Live Loupe vs. system picker

HexDrop can pick in two ways—both are first-class, just suited to different moments.

Live Loupe — When Screen Recording is allowed, you get a magnified live preview under the cursor. It’s the smoothest way to work day to day, and what we recommend for most people.

System picker (fallback) — If Live Loupe is off or Screen Recording isn’t granted, HexDrop uses the standard macOS color picker. It’s the better choice when you need the most exact value—think strict design tokens, UI swatches, or reference colors you have to nail.

Tip: Use Live Loupe when you want speed and flow. Switch it off when you want maximum precision.

Canceling

Press ESC at any time to cancel and return to what you were doing.

Keyboard Shortcuts

Pick Color, Show Menu, and Color Formats are global—they work even when another app is frontmost. Export for Figma plugin (⌘⇧F) is different: it only runs when the menu popover is open, so it isn’t a global shortcut.

Copy All (and everything else in the menu) is a tap in the UI—not one of the four shortcuts you configure here. See Color History, Color Formats View, and Figma plugin export for the full picture.

In Settings → Shortcuts, you can rename, tweak, or turn off each shortcut. A short note at the top explains globals and Input Monitoring, with a link back to this guide. Use Reset anytime you want the defaults back. Open Settings from the menu (Settings…) or press ⌘, when HexDrop is focused.

Global shortcuts may conflict with other apps. If a shortcut doesn't work as expected, choose a different combination or disable it.

Figma plugin export

Save your color history as a .figpalette file for Figma plugins that understand that format. From the menu, choose Export for Figma plugin, or press ⌘⇧F while the menu is open (it’s off when history is empty).

Pick colors as you work, export when you’re ready, and pull the palette into your plugin workflow—no copy-paste marathon.

Color History

Your recently picked colors appear in the History section below the Pick and Formats buttons. By default, HexDrop keeps the last 10 colors (you can change this in Settings).

Color Names

HexDrop assigns a name to each color using perceptual color matching (CIEDE2000) against a palette of 1,500+ named colors. Chromatic colors (purples, blues, greens, etc.) are prioritized over gray-ish names, and when several names are equally good matches, HexDrop prefers designer-friendly names (e.g. Gin, Early Dawn, Danube, Mint Green) for a more intuitive experience.

List View and Grid View

You can switch between two layouts:

• List view — Each color appears as a row with a swatch, value, and actions. Good when you want to see the full format string.
• Grid view — Colors appear as compact cards. Useful when you're browsing visually.

Use the toggle icons in the History header (grid and list icons) to switch, or press ⌘1 or ⌘G for grid view and ⌘2 or ⌘L for list view when the menu is open. Your choice is remembered.

Copying a Color

You can copy a color in several ways:

• Click the color swatch — Copies in your default format (set in Settings).
• Click the copy icon — Same as clicking the swatch.
• Select with keyboard, then press Enter or ⌘C — Copies the selected color (or multiple if more than one selected). See keyboard navigation below.
• Copy All — Tap the Copy All row at the bottom to copy the entire history (one value per line in your default format, no names).

After you copy, HexDrop flashes a quick confirmation in your chosen language. In Spanish, color names in that message appear in Spanish too.

Opening Color Formats

Each history item has a chevron (›) on the right. Click it to open the Color Formats view for that color. You can also select a color with the keyboard and press F to open Formats for that color.

Selecting Colors (Finder-Style)

• Click — Select a single color (or copy if clicking the swatch).
• ⌘+Click — Toggle a color in or out of the selection (add if unselected, remove if selected). Holding ⌘ pauses the default action—only the selection changes, no copy or open.
• Shift+Click — Extend the selection from the anchor to the clicked item (range select).

Removing a Color

• List view — Click the minus (−) icon once to highlight, then click again to confirm. Or hold Control to reveal the trash icon and click it to delete.
• Grid view — Hold Control to turn the chevrons into trash icons, then click a trash icon to delete that color.
• Either view (keyboard) — Select one or more items and press Delete to remove all selected. Use ⌘Z to undo the entire batch.

Reordering Colors

You can reorder colors in both list and grid view:

• List view — Hold Option to reveal up (↑) or down (↓) arrows (first item shows down). Click an arrow to move that color.
• Grid view — Hold Option to reveal left (←) or right (→) arrows (last item shows left). Click an arrow to move that color in the list order.
• Both views (keyboard) — Select an item, hold Option, then press ↑ ↓ (list) or ↑ ↓ ← → (grid) to move it. The icon switches to a combined up-down (↑↓) when focused and Option is held. Works when exactly one is selected.

Keyboard Navigation

When the HexDrop menu is open and the History section has focus:

• List view: Use ↑ and ↓ to move selection.
• Grid view: Use ↑ ↓ ← and → to move selection.
• Shift+arrows — Extend or contract the selection: Shift+Down/Right adds the next item; Shift+Up/Left deselects the current anchor (goes back). At the top or bottom, pressing again keeps the selection unchanged.
• ⌘A — Select all colors.
• Enter or ⌘C — Copy the selected color(s). Multiple selected: copies newline-separated values in your default format. All selected items show a checkmark briefly.
• Delete — Remove all selected colors.
• F — Open the Color Formats view for the selected color (only when exactly one is selected).
• P — Start a new color pick (same as Pick Color).
• ⌘Z — Undo the last delete, clear, or move.
• Option+arrows — Reorder the selected color (↑↓ in list; ↑↓←→ in grid); works when exactly one is selected.

Color Formats View

When you tap the chevron (›) on a history item (or press F when a color is selected), HexDrop shows the Color Formats view. Here you can see a single color in multiple formats.

Standard formats: HEX, RGB, RGBA, HSL, HSLA, CMYK, Closest Pantone. RGBA and HSLA are disabled by default; enable them in Settings → Formats if needed.

Developer formats: OKLCH, CSS Variable, SwiftUI, Tailwind. You can enable or disable these in Settings → Formats.

“Closest Pantone” is an approximation. Exact print results depend on calibration, materials, and process.

Each format has its own copy button. Use Copy All to paste all enabled formats in one go—handy for design docs or notes. Copy All prepends the color name as the first line (e.g. Blue:\nHEX: #3B82F6).

Selecting Formats (Finder-Style)

• Click — Select a single format.
• ⌘+Click — Toggle a format in or out of the selection.
• Shift+Click — Extend the selection from the anchor to the clicked format.
• Enter or ⌘C — Copy the selected format(s). Multiple selected: copies newline-separated values. All selected rows show a checkmark briefly.

Keyboard Navigation (Formats View)

• ← — Go back to the menu (keeps the current color selected).
• ↑ / ↓ — Move focus between format rows.
• Shift+↑ / Shift+↓ — Extend or contract the selection (same as history: add when moving into unselected, deselect when going back).
• ⌘A — Select all enabled formats.
• Enter or ⌘C — Copy the selected format(s) (single or multiple).
• P — Start a new color pick (same as Pick Color).
• ⌘Z — Undo the last delete from the header (if applicable).

The Pick Color… button at the bottom starts a new color pick. Use Back to return to the menu.

Settings

Open Settings… from the HexDrop menu (or press ⌘, when the app is focused). Everything is grouped into tabs: General, Formats, Shortcuts, and Advanced. When the Settings window is focused, use ← and → to hop between tabs—they wrap from last to first.

General

• Theme — Auto follows the Mac’s light/dark mode, or choose Light or Dark for the menu popover, Settings, About, and the rest of HexDrop’s UI. This is separate from the popover’s background material (see Window Appearance).
• Window Appearance — How the menu popover itself looks: System (default macOS vibrancy), Solid (flat), or Glass (translucent). Mix and match with theme—for example, dark theme + glass popover.
• Copy colors as — Default format when you copy from a swatch or with Enter/⌘C in history (Hex, RGB, HSL, CMYK, Closest Pantone). The Color Formats view still exposes every enabled format on its own.
• History size — How many recent colors to show (1–30; default 10). Lowering the number hides older rows without deleting them until you clear history or remove colors.
• Language — System, English, or Spanish. Changing language applies after you restart HexDrop.

Formats

Turn formats on or off for the Color Formats view and for Copy All:

• Standard formats: HEX, RGB, RGBA, HSL, HSLA, CMYK, Closest Pantone. RGBA and HSLA are off by default.
• Developer formats: OKLCH, CSS Variable, SwiftUI, Tailwind. The developer section only appears when at least one developer format is enabled.

Anything you disable stays out of the Formats popover and out of Copy All.

Shortcuts

Adjust Eyedropper (pick), Menu, Color Formats, and Export for Figma plugin. Each has an Enabled toggle and a key field—handy when another app claims the same combo. Click a field, press the keys you want, and use Reset for the default. The note at the top covers global shortcuts and Input Monitoring, with a link to this guide.

Advanced

At-a-glance status for Screen Recording (Live Loupe), Accessibility (click-to-pick with Live Loupe), and Input Monitoring (optional; helps global shortcuts behave their best). If something’s still off, use Open System Settings to jump straight to the right pane.

Menu Options

From the HexDrop menu you can:

• Launch at Login — Start HexDrop automatically when you sign in. Toggle this on if you use it often.
• Enable Live Loupe — Turns the live magnified preview on or off (only when Screen Recording is granted). Leave it on for faster picking, or turn it off when you want the standard macOS picker for maximum precision.
• Screen Recording Required / Accessibility Required — If these appear, tap Enable to open System Settings where you can grant the permission.
• Copy All — Copies all current colors to the clipboard, one value per line in your default format (e.g. #3B82F6). Tap the Copy All row when the menu is open.
• Export for Figma plugin — Saves your color history as a .figpalette file for compatible Figma plugins. Shortcut: ⌘⇧F (menu open; disabled when history is empty).
• Clear History — First tap shows a trash icon; click the trash to confirm and remove all colors. Tap the text again to cancel.
• Settings… — Open the Settings window.
• About HexDrop — See app info and tips.
• Quit HexDrop — Quit the app.

Permissions Explained

HexDrop asks for only what it needs:

• Screen Recording — Powers Live Loupe, the magnified preview under your cursor. Grant it in System Settings → Privacy & Security → Screen Recording. Without it, HexDrop uses the system color picker and works just fine—some people prefer that when they want the most exact match (strict tokens, reference colors, and the like).
• Accessibility — Needed for click-to-capture and ESC in Live Loupe mode. Grant it in System Settings → Privacy & Security → Accessibility. If you stick to the fallback picker only, you may not need this.
• Input Monitoring (optional) — For the most reliable global shortcuts from any app, enable System Settings → Privacy & Security → Input Monitoring. When granted, HexDrop uses a low-level event tap. Without it, HexDrop falls back to Carbon hotkeys (fine for most people) or, if that fails, shortcuts only work when HexDrop is focused. Other apps can still see key events in some setups—HexDrop doesn’t promise perfect suppression. Settings → Advanced summarizes whether Input Monitoring (and the other permissions) are on.