About

Accurate color extraction from raster images requires reading raw pixel data, not eyeballing a zoomed screenshot. This tool renders your image onto an HTML5 Canvas, reads the exact R, G, B, A channel values at any coordinate using getImageData(), and converts them into HEX, HSL, and CMYK notations. The magnifier lens shows a grid-level view at up to 32× zoom so you can distinguish individual pixels in anti-aliased edges or compressed artifacts. Misreading a color by even 5 units in one channel can shift a brand color outside its acceptable ΔE tolerance. The tool also computes the nearest CSS named color using Euclidean distance in RGB space.

All processing runs locally in your browser. No image data leaves your device. Supported formats include PNG, JPEG, WebP, GIF, BMP, and SVG rasterized at native resolution. Note: CMYK conversion here is a mathematical approximation from RGB and does not account for ICC printer profiles. For print-critical work, use a profiled color management pipeline.

Formulas

RGB to HEX conversion concatenates each channel as a two-digit hexadecimal value:

HEX = # pad(R.toString(16)) + pad(G.toString(16)) + pad(B.toString(16))

RGB to HSL uses the min/max channel method:

L = C_max + C_min2

S = Δ1 − |2L − 1|

where Δ = C_max − C_min, and H depends on which channel is the maximum.

RGB to CMYK conversion:

K = 1 − max(R′, G′, B′)

C = 1 − R′ − K1 − K

where R′ = R ÷ 255. Same pattern applies to G′ and B′.

Nearest named color uses Euclidean distance in RGB space:

d = √(R₁ − R₂)² + (G₁ − G₂)² + (B₁ − B₂)²

The color with the smallest d is selected as the nearest match.

Reference Data

CSS Named Color	HEX	RGB	HSL	CMYK (approx.)
Alice Blue	#F0F8FF	240, 248, 255	208°, 100%, 97%	6%, 3%, 0%, 0%
Coral	#FF7F50	255, 127, 80	16°, 100%, 66%	0%, 50%, 69%, 0%
Crimson	#DC143C	220, 20, 60	348°, 83%, 47%	0%, 91%, 73%, 14%
Dark Slate Gray	#2F4F4F	47, 79, 79	180°, 25%, 25%	41%, 0%, 0%, 69%
Deep Sky Blue	#00BFFF	0, 191, 255	195°, 100%, 50%	100%, 25%, 0%, 0%
Gold	#FFD700	255, 215, 0	51°, 100%, 50%	0%, 16%, 100%, 0%
Hot Pink	#FF69B4	255, 105, 180	330°, 100%, 71%	0%, 59%, 29%, 0%
Indigo	#4B0082	75, 0, 130	275°, 100%, 25%	42%, 100%, 0%, 49%
Lavender	#E6E6FA	230, 230, 250	240°, 67%, 94%	8%, 8%, 0%, 2%
Lime Green	#32CD32	50, 205, 50	120°, 61%, 50%	76%, 0%, 76%, 20%
Medium Orchid	#BA55D3	186, 85, 211	288°, 59%, 58%	12%, 60%, 0%, 17%
Navy	#000080	0, 0, 128	240°, 100%, 25%	100%, 100%, 0%, 50%
Olive Drab	#6B8E23	107, 142, 35	80°, 60%, 35%	25%, 0%, 75%, 44%
Papaya Whip	#FFEFD5	255, 239, 213	37°, 100%, 92%	0%, 6%, 16%, 0%
Peru	#CD853F	205, 133, 63	30°, 59%, 53%	0%, 35%, 69%, 20%
Royal Blue	#4169E1	65, 105, 225	225°, 73%, 57%	71%, 53%, 0%, 12%
Salmon	#FA8072	250, 128, 114	6°, 93%, 71%	0%, 49%, 54%, 2%
Sea Green	#2E8B57	46, 139, 87	146°, 50%, 36%	67%, 0%, 37%, 45%
Sienna	#A0522D	160, 82, 45	19°, 56%, 40%	0%, 49%, 72%, 37%
Steel Blue	#4682B4	70, 130, 180	207°, 44%, 49%	61%, 28%, 0%, 29%
Teal	#008080	0, 128, 128	180°, 100%, 25%	100%, 0%, 0%, 50%
Tomato	#FF6347	255, 99, 71	9°, 100%, 64%	0%, 61%, 72%, 0%
Turquoise	#40E0D0	64, 224, 208	174°, 72%, 56%	71%, 0%, 7%, 12%
Wheat	#F5DEB3	245, 222, 179	39°, 77%, 83%	0%, 9%, 27%, 4%
Yellow Green	#9ACD32	154, 205, 50	80°, 61%, 50%	25%, 0%, 76%, 20%

Frequently Asked Questions

Color management profiles (ICC/ICM) affect how raw pixel data is interpreted. This tool reads the unmanaged RGB values directly from the canvas, which uses the sRGB color space by default. Applications like Photoshop may apply embedded ICC profiles, shifting displayed values. For consistency, convert your image to sRGB before inspection.

The CMYK values here are mathematical approximations derived from RGB channel ratios. Real CMYK output depends on the target printer's ICC profile, ink limits, and paper stock. For print production, use a color management system with device-specific profiles. This tool's CMYK output is useful for quick reference, not prepress.

Yes. JPEG uses lossy DCT-based compression that introduces artifacts, especially near sharp edges and in uniform color areas. A pixel that was originally rgb(255, 0, 0) might read as rgb(254, 2, 1) after JPEG encoding at quality 80. For exact color work, use lossless formats like PNG or WebP lossless.

The tool reads all four channels: R, G, B, and Alpha. When alpha is less than 255, the pixel is partially transparent. The displayed RGB values represent the raw channel data before compositing. The alpha value is shown separately. Canvas composites transparent pixels against a white checkerboard for display only.

The canvas renders only the first frame of an animated GIF. Pixel inspection applies to that static frame. For per-frame analysis, extract individual frames using a dedicated tool before loading them here.

The matching uses Euclidean distance in RGB space, which does not perfectly correlate with human perceptual difference. Two colors with the same numerical distance can look more or less different depending on the hue region. Perceptually uniform spaces like CIELAB (Delta E) give better results but require more complex conversion. The CSS named color set has only 148 entries, so gaps are inevitable.