Image Color Studio

Analyze image colors locally, inspect pixels, create palettes and harmonies, and export the complete results.

Features

• Lokale Bildanalyse
• Farbpaletten und Harmonien
• WCAG-Kontrastprüfung
• Analyseexport

Purpose and privacy

Image Color Studio inspects local images at original-pixel accuracy. Image files, pixels, and analysis results stay in the browser and are not sent to a server or third party. The last image may be stored locally in IndexedDB so it can be restored on the next start.

Requirements

Use a current JavaScript-enabled browser and a local image file. The optional screen eyedropper requires localhost or HTTPS and EyeDropper support.

Steps

Load an image, select a pixel or palette color, open the required analysis view, and explicitly export the result when needed.

Parameters

Zoom, pan mode, palette size, active base color, foreground, and background affect the view and analysis.

Result

The studio provides pixel values, dominant colors, a collection, variants, harmonies, WCAG contrast, theme tokens, and local exports.

Loading an image

Use Open image, drop a file onto the work surface, or paste it with Ctrl+V. PNG, JPEG/JPG, WebP, and BMP are supported. AVIF works when the browser can decode it; GIF may be supported as its first frame. Invalid input is reported without replacing the last valid image.

Work surface

The toolbar provides zoom out, zoom in, 100%, fit, and pan. The mouse wheel and keyboard control zoom; arrow keys move the pixel selection. The 11×11 loupe and all coordinates always refer to original pixels, independently of zoom. The analysis sidebar can be closed, reopened, and resized with its separator.

IconButtons and operation

The first column shows the real disabled AT IconButton. Its tooltip and accessible name match the label and explain the action without relying on color.

IconButton	Label	Function
	Open image	Opens the local file picker.
	Screen eyedropper	Picks a screen color when browser and security context support it.
	Zoom out	Reduces only the visible image viewport.
	Zoom in	Enlarges only the visible image viewport.
	Actual size	Resets the view to 100 percent.
	Fit image	Centers and scales the complete image into the workspace.
	Pan	Toggles canvas dragging; the pressed state identifies the active mode.
	Copy	Copies the associated color value or all collection values.
	Add to color collection	Collects the active pixel, screen, palette, variant, or harmony color.
	Show palette	Displays the generated palette list.
	Show color properties	Displays the Property Grid for the selected palette color.
	Clear collection	Removes every collected color.
	Remove entry	Removes only the affected collection row.

Pixels and screen eyedropper

Click to select a pixel. HEX, HEX8, RGB, RGBA, HSL, HSV, HWB, CMYK, XYZ, LAB, LCH, and alpha values can be copied individually or added to the color collection. The screen eyedropper requires localhost or HTTPS, a visible user action, and a browser with EyeDropper support.

Palette and color collection

The palette calculates 5, 8, 10, 12, or 16 dominant colors and their shares. Colors can be selected, copied, and collected. Collection colors can be inspected, removed individually, copied together, or cleared completely.

Variants, harmonies, theme, and contrast

Variants creates lighter and darker steps. Harmonies shows complementary, split-complementary, analogous, triadic, tetradic, and monochromatic relationships. Theme creates light and dark tokens from the active color. Contrast evaluates foreground and background against WCAG AA and AAA and provides a live text preview.

Export

JSON contains the complete analysis state and metadata but no image bytes. CSS contains theme, palette, and collection variables. The text report summarizes the source and main results. A download is created only after an explicit action.

Common errors

Corrupt or unsupported files are rejected. The screen eyedropper is unavailable without a secure context or browser support. Blocked local storage can prevent restoration.

Troubleshooting

All standard controls are keyboard accessible. If an image cannot be loaded, check its format and integrity. If the screen eyedropper is unavailable, use localhost/HTTPS and a supported browser. Reload the page if local restoration fails; original files are never modified.