The Image Color Extractor works in an iPhone browser and turns a local photo, screenshot, illustration, or logo into a ranked 3-, 5-, 8-, or 12-color palette with HEX, RGB, and visible-pixel percentages.
You do not need to tap individual pixels or install a native color-picking app: select an image, let the page analyze it, and choose a swatch to copy its HEX code. The complete workflow runs in the current browser, making it practical for extracting starting colors from an iPhone photo or screen capture.
What Runs on the iPhone
When you select a file, the browser decodes it through a temporary Object URL and draws it onto an in-memory canvas. Your image is not posted to Lizely or a remote image service. Replacing the image or leaving the page releases the temporary URL.
For analysis, the browser proportionally scales the image down only when necessary so that neither dimension exceeds 512 pixels. Pixels with an alpha value below 128 are ignored, which prevents a mostly transparent background from dominating the palette.
The file input is limited to 20 MB, and the pixel-processing function also has a separate defensive buffer limit. Consequently, an image with very large dimensions can still encounter a limit even when its compressed file size is below 20 MB. The interface accepts common PNG, JPEG, WebP, GIF, BMP, and AVIF files, while successful decoding ultimately depends on the browser.
Run the Palette Extraction on Your iPhone
Follow this workflow in the browser you want to use on the phone:
- Open the tool and choose an image. Go to Image Color Extractor, tap the file chooser, and select a local image from the location offered by iOS, such as Photos or device files. Keep the file at or below 20 MB. If the browser offers an unsupported format, save a PNG or JPEG copy first.
- Select a palette size. Choose 3, 5, 8, or 12 colors. The smaller lists provide a compact visual summary, while the larger lists expose more of the ranked color groups.
- Wait for the local canvas analysis. The browser decodes and processes the image in the current page. No manual selection of representative pixels is required.
- Compare the swatches with the image. Check where each ranked color appears in the visible composition. A background may rank highly because it occupies more area, not because the tool considers it aesthetically important.
- Select a swatch to copy its HEX value. Each result also displays an RGB triplet and the percentage of sampled visible pixels assigned to that color group. You can then paste the copied HEX code into a Notes draft or design application.
- Verify the final use. Run foreground and background colors through a Color Contrast Checker before using them for text. For official brand colors or print work, inspect the original source in an appropriate color-managed application.
Pick a Palette Size for the Job
The palette-size control determines how many ranked groups you see; it does not change the underlying area-frequency analysis.
| Palette size | What it provides | Useful when |
|---|---|---|
| 3 colors | A compact set of the most frequent groups | You need a short visual summary of the image's broad colors |
| 5 colors | A broader starting palette | The image contains several distinct color families |
| 8 colors | A more detailed ranked list | You want more separation among visible regions |
| 12 colors | The largest palette offered | You are closely exploring related shades and secondary areas |
Start with the smallest useful palette and compare it with the source image. Increase the size when two important regions appear merged or when an accent color is missing. A larger list can expose more groups, but it cannot recover a detail that was removed by scaling or fell outside the visible sample.
Read the Ranked Colors and Percentages
Every result includes a HEX code, an RGB triplet, and the share of sampled visible pixels assigned to that group. The percentages describe the reduced sample used for analysis, not the original file's full pixel count. They are useful for comparing how much area each group occupies within the analyzed image.
The extractor and a pixel picker answer different questions. The Image Color Picker is the better choice for a known button, logo edge, or small detail that you can point at directly.
| Your need | Appropriate tool | Result |
|---|---|---|
| Find the broad colors occurring across an image | Image Color Extractor | Ranked swatches with HEX, RGB, and sampled-area percentages |
| Read one exact location | Image Color Picker | The exact RGB value at the selected pixel |
An extracted swatch is descriptive: it represents a group of related pixels and does not mean every pixel in that region exactly matches the displayed color. Use the picker when point-level accuracy matters, and use the extractor when you want starting colors for an entire composition.
Why an Accent or Small Detail Can Disappear
Bounded scaling helps the browser process an image efficiently, but it can reduce the influence of very small features. A thin accent line, tiny icon, or single pixel may contribute less to the sample or disappear altogether, even when it is important to the design.
The method also groups colors into a maximum of 512 coarse RGB buckets. Two colors that people perceive as very similar can land in adjacent buckets, while several subtly different shades can merge into one averaged swatch. This makes the result reproducible, but it is not a perceptual clustering process.
For an animated image, the palette represents the frame that the browser decodes for the canvas rather than every frame in the animation. If a file contains no sufficiently visible pixels after transparent areas are ignored, the tool returns a clear error instead of an empty or misleading palette.
Know What the Color Values Do Not Prove
The analysis does not model brightness, gamma, device color profiles, or human visual sensitivity. Its swatches are therefore a fast frequency summary, not a color-managed proof of how every color will appear on a calibrated display or under print conditions.
Palette ranking measures sampled area, not visual importance, contrast quality, or accessibility. A large background can occupy the highest position simply because it covers most of the image. Likewise, a high percentage does not make a color suitable for text, and the output cannot establish an official brand palette, trademark permission, print ink formula, Pantone value, or accessible text pairing.
Check Contrast and Exact Brand Colors
After copying a palette into a design draft, test each intended text and background combination with a Color Contrast Checker. A pair that looks harmonious in the extracted swatches may still need adjustment for readability, and frequency ranking cannot make that decision.
When exact brand or print matching matters, open the original file in a color-managed design application and sample the intended source pixels. The extractor remains useful for rapid exploration, but its grouped averages should not replace the authoritative color reference for the deliverable.
Where an iPhone Palette Is Useful
The resulting colors can provide a practical starting point for a mood board, presentation theme, CSS variables, chart series, illustration study, or design review. On an iPhone, you can extract broad colors from a camera photo, a screenshot, or a saved design and copy the useful HEX values into a working document.
Keep the source image visible while reviewing the palette. Compare the ranked groups with the regions you recognize, increase the palette size if needed, and treat the final selection as an informed design direction rather than an automatic brand specification.
If you're weighing options, How to Invert Image Colors for Beginners covers this in detail.
If you're weighing options, Image Color Picker on Android: Pick Exact Colors covers this in detail.