CAMERA AND IMAGE PICKER
Capture a color precisely
Use a photo, saved image, or live camera feed, then drag the loupe over the exact area you want to sample. Pixel averaging helps when texture, compression, glare, or sensor noise makes a single pixel unreliable.
Choose a source
| Source | Best for | What happens |
|---|---|---|
| Start camera | Objects, rooms, materials, signs, and live environments | HexCheck requests camera permission and shows a live sampling canvas. |
| Load image | Screenshots, product photos, artwork, and reference images | The file is decoded locally and displayed only after it loads successfully. |
| Take photo | Mobile capture with the rear camera | The device opens its camera or photo capture interface, then returns the image to the Picker. |
The large sampling stage remains hidden until a source is active, so the page stays compact when you only need the current selected color or its relationships.
Sample with the loupe
Choose a camera, image, or mobile photo.
Hover on desktop or touch and drag on a mobile device. The loupe magnifies the sample area.
The selected hex, color name, descriptors, formats, relationships, and readability information update.
Copy the hex value, or select Open color to load it in the Color Utility.
Choose the right averaging size
The Average controls determine how many nearby pixels contribute to the sample.
| Size | Use it when | Tradeoff |
|---|---|---|
| 1×1 | You need the exact source pixel from a flat digital graphic | Most sensitive to compression, noise, and tiny alignment changes |
| 3×3 | You want a small amount of stabilization | Still preserves fine local detail |
| 5×5 | You are sampling photographs, textured materials, or compressed images | Balances precision and stability for many real-world sources |
| 11×11 | You want the broader average of a visibly noisy or textured area | Can blend nearby edges and different colors together |
Always keep the averaging square fully inside the intended material. A large average across an edge produces a mixture that may not exist anywhere in the source.
Use the camera controls
- Freeze frame pauses visual updates so you can sample without holding the device perfectly still.
- Resume camera returns to the live feed.
- Stop ends the active camera stream, stops the media track, and hides the sampling stage.
- Starting a new source temporarily locks the source controls so camera permission and image decoding cannot overlap.
Read the selected-color results
The selected result includes the hex value, a nearest common name, descriptive tags, and actions to copy or open the color.
The Color Intelligence section also shows:
- The nearest CSS named color.
- The nearest Tailwind reference.
- The nearest Material reference.
- Whether black or white text creates the stronger contrast, with its ratio.
RGB, HSL, CMYK, and luminance values are Pro developer outputs. Selecting an unlocked format copies that format directly.
Explore color relationships
The relationship palette generates useful variations around the selected color. Tap a relationship to inspect it in the Picker result without changing the active Color Utility color.
Use these as exploration aids. A complement or analogous color is mathematically related, but still needs hierarchy, role assignment, and contrast testing before production use.
Extract a dominant image palette
Image palette extraction is a Pro feature. After an image loads and access is verified, HexCheck analyzes the image locally and presents a reusable dominant-color collection.
- Select a dominant swatch to inspect it.
- Run Extract again after changing or reloading the image.
- Use recent picks to return to sampled points during the session and across the saved Pro workspace.
- Clear the recent-pick list when it is no longer useful.
Image and camera privacy
Camera frames and loaded images stay on the device and are processed in the browser for sampling and palette extraction. HexCheck does not need to upload the source image to provide the Picker workflow.
- Your browser controls camera permission.
- Stopping the camera ends the media tracks used by the page.
- The source image itself is not restored when you revisit the Picker.
- Picker settings such as averaging size, selected color, and supported recent-pick state can be restored separately.
Tips for better samples
- Use diffuse neutral lighting and avoid colored reflections.
- Fill more of the camera frame with the target material.
- Freeze the camera before sampling a small area.
- Use 5×5 or 11×11 averaging for textured surfaces.
- Use 1×1 for screenshots and flat digital art when the exact pixel matters.
- Sample several nearby points and compare them before choosing a representative value.
- Open the selected color before adding it to Contrast, Palette, or Gradient.