If you've ever wondered exactly how a photo gets converted into thousands of perfectly coloured emojis, you're in the right place. This technical guide breaks down the science and engineering behind emoji art generation — from colour space mathematics to canvas rendering. No engineering degree required.
The Core Challenge: Colour Matching
The fundamental problem in emoji art generation is: given a region of your photo with a specific colour, which emoji from a database of 1,200+ options is the closest perceptual match? This seems simple, but the answer involves some fascinating colour science.
The naive approach would be to compare the RGB (Red, Green, Blue) values of the image region with each emoji. But RGB has a major flaw: it doesn't reflect how humans actually perceive colour differences. Two colours that are numerically close in RGB might look very different to the human eye, and vice versa.
The CIE LAB Colour Space
PhotoFromEmoji, like professional colour management systems used in printing and design, uses the CIE LAB colour space for colour matching. LAB is designed to be "perceptually uniform" — meaning equal numerical differences in LAB values correspond to equal perceived differences to the human eye.
LAB has three components:
- L (Lightness): 0 = perfect black, 100 = perfect white
- A axis: Negative values are green; positive values are red/magenta
- B axis: Negative values are blue; positive values are yellow
Converting from RGB to LAB involves two steps: converting from RGB to the XYZ colour space using a transformation matrix, then converting from XYZ to LAB using the D65 standard illuminant as the white point reference.
The Delta E 94 Colour Difference Formula
Once all colours are in LAB space, PhotoFromEmoji uses the Delta E 94 formula (ΔE94) to calculate the perceptual difference between two colours. This formula was developed by the CIE and is used in professional printing, paint manufacturing, and textile industries.
The formula accounts for the fact that human eyes are more sensitive to chroma (saturation) differences in highly saturated colours, and adjusts weighting accordingly. A Delta E 94 value below 1 is generally imperceptible to the human eye; values under 3 are acceptable for most colour-matching applications.
Building the Emoji Colour Database
Before matching emojis, each emoji must be analyzed for its average colour. This is done by rendering each emoji at a standard size using the system emoji font, then reading the pixel data and calculating the root mean square (RMS) average of RGB values across all non-transparent pixels.
RMS averaging (squaring values before averaging, then taking the square root) produces more accurate average colours than simple arithmetic mean averaging, especially for emojis with high internal contrast. The resulting RGB value is converted to LAB and stored in the emoji database.
Emojis with too many transparent pixels (like ❗ which is mostly whitespace) are filtered based on the "Allowed Empty Space" threshold, preventing sparse emojis from being chosen when a solid-coloured emoji would be more accurate.
The Hue Map Optimization
A naive implementation would compare each image region against all 1,200+ emojis for every cell — 12+ million Delta E calculations for a 10,000-cell grid, which would be very slow.
PhotoFromEmoji uses a hue map cache: when an emoji match is found for a particular lightness value, the result is cached. Subsequent cells with the same lightness value get the cached emoji pool rather than re-running the full database search. This reduces Delta E calculations by 60–80% for typical photos, which have many regions of similar brightness.
Canvas Rendering and the Randomization Step
Once the emoji for each grid cell is determined, they're rendered onto an HTML5 Canvas using the browser's built-in emoji font rendering via fillText(). A crucial detail: emojis are drawn in randomized order rather than top-to-bottom, left-to-right.
This randomization creates a more natural, organic mosaic effect. If emojis were drawn sequentially, you'd see a visible "sweeping" pattern as the canvas fills — which looks mechanical and artificial. Random order creates the impression that the emojis appeared simultaneously, like a genuine mosaic.
The Image Sampling Optimization
One of the most significant performance improvements in PhotoFromEmoji was changing from per-cell getImageData() calls to a single full-image extraction. Previously, for a 100×100 emoji grid, the tool made 10,000 individual calls to the browser's graphics API — each with marshaling overhead between JavaScript and the graphics layer.
The optimized approach reads the entire image's pixel data in a single getImageData() call, storing it as a flat Uint8ClampedArray in JavaScript memory. A getBlock() function extracts the relevant sub-region for each cell using pure array arithmetic — essentially zero overhead per cell. This reduced processing time by approximately 60–70% on typical photos.
Download and Encoding
When you download your emoji art, the browser encodes the Canvas as a JPEG using the toBlob() API. JPEG is chosen over PNG because emoji art — despite being technically a "graphic" — contains thousands of overlapping text characters that create complex pixel patterns much better suited to JPEG's lossy compression than PNG's lossless approach.
For large canvases on mobile devices, encoding happens in strips to avoid exceeding mobile memory limits. Each strip is a horizontal canvas slice, encoded using GPU-accelerated drawImage() operations before final assembly.
Technical FAQ
Emojis are rendered differently by different operating systems. Apple uses Apple Color Emoji, Windows uses Segoe UI Emoji, and Android uses Noto Color Emoji. While colour matching is system-neutral, the visual appearance of each emoji varies between these fonts, causing subtle differences in the final artwork across devices.
Using Delta E 94 in LAB colour space, PhotoFromEmoji achieves professional-grade colour matching. For most image regions, the chosen emoji is within Delta E 3–8 of the original colour — acceptable for artistic applications. Highly saturated or unusual hues may see larger differences due to the limited palette of available emoji colours.
The core technique — CIE LAB colour space conversion + Delta E colour difference + pre-computed emoji colour database — is well-documented in colour science literature. The key implementation challenge is building an accurate emoji colour database and optimizing the matching loop for browser performance. Contact us if you have specific technical questions.