CruxDevCruxDev Tools Prompts
color Utility • Zero-Server Privacy • 100% Client-Side

Screenshot Eyedropper & Palette Picker

Sample colors from app screenshots click-by-click, or pick anywhere with the system eyedropper (Chromium). Export Compose, Flutter, SwiftUI, HEX, and RGB.

Overview

Sample any pixel from an uploaded screenshot and copy the color as HEX, RGB, Compose, Flutter, SwiftUI, or Android XML. An automatic palette surfaces the top eight colors, and a Chromium eyedropper reads any on-screen color.

How It Works

Upload a screenshot through the file input or draw the built-in 'Load Sample UI' mockup. Click the canvas to sample that pixel, or use the system eyedropper on Chromium browsers, then copy any of the six export formats.

Step-by-Step Usage Guide

  1. Open the file input and upload a screenshot, or press 'Load Sample UI' to draw a mockup canvas.
  2. Click anywhere on the canvas to sample that exact pixel as the active color.
  3. On Chromium browsers, press the system eyedropper button to pick any color visible on screen.
  4. Click a palette swatch or copy the color in HEX, RGB, Compose, Flutter, SwiftUI, or Android XML form.

Technical Specifications & Standards

Canvas sampling reads a 1×1 getImageData at the clicked point, with coordinates mapped by displayed size. This mapping follows CSS scale only and is not devicePixelRatio-aware, so results can shift on scaled displays. The palette buckets each channel to the nearest 20 and counts frequency over a sparse sample of about 2000 pixels, listing the top eight; clicking a swatch selects it. Flutter and Compose exports are identical by design, both 0xFFRRGGBB.

Targeted Use Cases

  • Extracting a theme color: upload an app screenshot, click a button surface, and copy the Jetpack Compose Color(0xFF...) string straight into your theme file.
  • Building colors.xml: copy the Android XML hex resource line for a sampled brand color and paste it into a values resource file.
  • Matching a web design: use the Chromium eyedropper to grab a color from another window and compare it against the palette of your screenshot.
  • Porting UI to iOS: sample a color once and copy the SwiftUI Color(red:green:blue:) initializer without converting channels by hand.

Notes & Gotchas

  • There is no magnifying loupe. Zoom your screenshot before uploading so the pixel you click is the pixel you want.
  • High-resolution images are sampled sparsely, so rare colors can be missed by the top-eight palette. Sample such colors by clicking the canvas directly.
  • The palette is frequency-based, not perceptual; two visually similar shades can occupy several of the eight slots.
  • Uploads only: there is no drag-and-drop or paste. Expect slight offset when a scaled display is not devicePixelRatio-aware.

Frequently Asked Questions

Does the eyedropper work in Firefox?

No. The EyeDropper API is Chromium-only, so the button works on Chromium browsers; canvas clicking works everywhere.

Why are the Flutter and Compose exports identical?

Both formats are 0xFFRRGGBB by design, so the tool intentionally emits the same string for each.

Why is a color I see missing from the palette?

The palette counts frequency over a sparse sample of about 2000 pixels, so rare colors can be absent. Click the canvas to sample them directly.

How is the clicked pixel located?

The tool reads a 1×1 getImageData at the click point, mapping coordinates by displayed size; the mapping is CSS-scale only and not devicePixelRatio-aware.