Skip to main content
NeatUtility

Interactive Color Picker & Palette Studio

Color & CSS100% Client-Side
Loading interactive workspace...
About this tool, examples & FAQ

Interactive visual color picker, hue and alpha sliders, native EyeDropper, local image pixel sampler with magnifier, and real-time CSS format conversions.

Key facts

Verified capabilities and limits of this utility
Supported color modelsHEX, HEXA, RGB, RGBA, HSL, HSLA, OKLCH, OKLAB, HSV, HWB, CIE Lab, CIE LCH, and CMYK
Screen eyedropperNative browser EyeDropper API where supported, with immediate image fallback
Image pixel loupe100% local Canvas sampling with crosshair, coordinates, and high-DPI magnifier
Palette export formatsHEX list, JSON model, CSS variables, SCSS variables, and TypeScript object
Data privacy guaranteeAll color and image processing runs entirely in the browser; zero uploads or external requests
Max input size10 KB
Execution deadline1 s

How to use

  1. Select colors visually using the Saturation-Value box, Hue slider, and Alpha slider.
  2. Click 'Screen' to sample any pixel from your desktop or browser window (using native EyeDropper).
  3. Switch to 'Image' or drag and drop any local screenshot or image file to sample exact pixel coordinates with the high-DPI magnifier.
  4. Inspect, edit, or copy any of the 13 supported color formats including modern OKLCH and CSS Color 4.
  5. Save favorite colors into your local palette (up to 20 swatches) and export them as CSS variables, SCSS, JSON, or a HEX list.

Example

Inspect and format Tailwind Indigo (#6366f1) as uppercase HEX

Input

#6366f1

Example output

#6366F1

Edge cases

Achromatic hue preservation

When saturation or value is reduced to zero (pure grays, black, or white), the previous hue angle is preserved so sliding saturation back does not jump to red.

EyeDropper browser availability

The native EyeDropper API is available in Chromium-based desktop browsers. When unavailable, users are seamlessly prompted to upload a screenshot into the local image sampler.

Local image memory protection

Image files are sampled entirely in browser memory and decoded pixel bounds are constrained to protect system resources. No image data or coordinates are ever transmitted over the network.

How it works

  1. Maintains one canonical sRGB + alpha state driving all UI controls, sliders, and format selectors.
  2. Transforms coordinates from the visual Saturation-Value field and Hue track into canonical floating-point sRGB color values.
  3. Computes real-time transformations for perceptual spaces (OKLab, OKLCH, CIE Lab) and cylindrical models (HSL, HSV, HWB).
  4. Samples local image pixels via HTML5 Canvas using device pixel ratio (DPR) coordinate mapping and 9x magnification.
  5. Persists saved palette swatches safely in localStorage with schema validation and bounds capping.

Related workflows

Frequently asked questions

Why use OKLCH instead of HSL or RGB?

OKLCH is a perceptually uniform color space introduced in CSS Color Module Level 4. Unlike HSL, where colors at 50% lightness appear vastly different in perceived brightness (e.g. yellow vs blue), OKLCH lightness corresponds directly to human eye perception.

Are my uploaded images or screenshots sent to a server?

No. All image decoding and pixel extraction occurs locally inside your browser's HTML5 Canvas. No image data, filenames, or sampled colors are ever uploaded or stored externally.

How many colors can I save in the palette?

You can save up to 20 favorite swatches in your local palette. The palette is preserved across page refreshes in your browser's local storage and can be exported as CSS variables, SCSS variables, JSON, or a HEX list.

References