Staaarter

PNG to HCL Colors Converter

Uploads a PNG, tallies every distinct RGBA color it contains, converts each to CIE LCh(ab) via linear sRGB and CIE XYZ/Lab, and presents the result as Hue, Chroma, and Luminance (in that field order) in a plain-text report sorted by how frequently each color appears, entirely client-side. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-29
By Staaarter Team
converteranalyzerimagepng

Overview

Introduction

This tool scans every pixel of an uploaded PNG and reports its colors converted to Hue, Chroma, and Luminance (HCL), computed with the same perceptually-uniform CIE LCh(ab) math as the site's LCH converter.

It exists specifically for workflows that expect this color space's values in Hue-first order rather than the standard CIE Lightness-first ordering.

What Is PNG to HCL Colors Converter?

A client-side color analysis tool that decodes a PNG, tallies its distinct RGBA colors, and converts each one through linear sRGB, CIE XYZ, and CIE L*a*b* into cylindrical Hue/Chroma/Luminance values.

The output is a readable plain-text report rather than raw pixel data, capped at the 256 most frequent colors for readability, listed in H/C/L order.

How PNG to HCL Colors Converter Works

Every pixel's exact RGBA value is counted in a frequency map; the resulting unique colors are sorted from most to least common.

Each color's sRGB values are linearized, converted to CIE XYZ against the D65 reference white, then to CIE L*a*b*; the same Chroma (sqrt(a^2 + b^2)) and Hue (atan2(b, a) in degrees) as the LCH converter are computed, then presented alongside Luminance (L) in H/C/L order.

When To Use PNG to HCL Colors Converter

Use it when a downstream tool, library, or dataset expects this perceptual color space's values specifically in Hue-first order.

Otherwise, reach for either this tool or the LCH converter interchangeably; the underlying numbers are identical either way.

Features

Advantages

  • Runs entirely client-side; your image is never uploaded to a server.
  • Reuses the exact same validated CIE LCh(ab) math as the LCH converter rather than a separate re-derivation, so the two tools can never drift out of sync numerically.
  • Groups identical colors together with counts, rather than dumping every pixel individually.

Limitations

  • The conversion assumes a standard sRGB source image and the D65 reference white; it isn't ICC-profile-aware for images tagged with a different color space.
  • The report caps out at the 256 most frequent unique colors; images with huge color diversity (like photos) will have many rarer colors omitted.

Examples

Analyze a saturated primary color

Input

A pixel at pure blue (0, 0, 255)

Output

A row with a Hue angle in the blue range (roughly 300-310 degrees) and high Chroma

Field order is the only difference from the LCH converter's output for this same pixel.

Analyze a neutral gray

Input

A mid-gray pixel (128, 128, 128)

Output

A row with Chroma near 0 and a mid-range Luminance value

Neutral colors have essentially no Chroma regardless of which field order they're reported in.

Best Practices & Notes

Best Practices

  • Pick whichever of this tool or the LCH converter matches the field order your downstream workflow expects; don't run both expecting different numbers.
  • Focus on the Chroma column when comparing how vivid different colors are.

Developer Notes

This tool's rgbToHcl function imports and calls rgbToLch from png-to-lch-colors-converter.ts directly, then destructures the returned {l, c, h} into {h, c, l} for display: a thin re-presentation wrapper, not a separate math implementation, so the two tools' numeric output can never diverge.

PNG to HCL Colors Converter Use Cases

  • Feeding a color report into a tool or format that expects Hue-first field order
  • Perceptually-aware color analysis for design or accessibility work
  • Comparing how vivid/colorful different image regions are via the Chroma value

Common Mistakes

  • Assuming HCL and LCH are different color models: they're the exact same numbers in a different field order.
  • Running both this tool and the LCH converter expecting to cross-check different results; they'll always agree numerically.

Tips

  • If you're not sure which field order you need, the LCH converter's standard CIE L/C/H ordering is the more universally recognized default.
  • Use the Hue column to group similar colors together even when their Chroma or Luminance differ.

References

Frequently Asked Questions