Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to find average color of an image using JavaScript?

Javascript Web Development Front End Technology

Finding the average color of an image involves extracting pixel data from the image and calculating the mean RGB values. JavaScript's Canvas API provides the tools needed to access and analyze image pixel data.

How It Works

The process involves drawing an image onto a canvas element, extracting pixel data using getImageData(), and calculating the average of all red, green, and blue values. The canvas element allows us to manipulate image data at the pixel level.

Basic Syntax

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.drawImage(imageElement, 0, 0);
const imageData = context.getImageData(0, 0, width, height);

Complete Implementation

Here's a complete example that calculates the average color of an image and applies it as the background:

<!DOCTYPE html>
<html>
<head>
    <title>Average Color of an Image</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            transition: background-color 0.5s ease;
        }
        img {
            width: 80%;
            max-width: 500px;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .color-info {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.9);
            padding: 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="color-info" id="colorInfo">Loading...</div>
    <img id="myImg" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop" crossorigin="anonymous">

    <script>
        function extractAvgColor(imageElement, sampleRatio = 10) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            
            // Set canvas dimensions to match image
            canvas.width = imageElement.naturalWidth;
            canvas.height = imageElement.naturalHeight;
            
            // Draw image on canvas
            context.drawImage(imageElement, 0, 0);
            
            // Get pixel data
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            
            let r = 0, g = 0, b = 0;
            let pixelCount = 0;
            
            // Sample pixels based on ratio to improve performance
            for (let i = 0; i < data.length; i += 4 * sampleRatio) {
                r += data[i];     // Red
                g += data[i + 1]; // Green  
                b += data[i + 2]; // Blue
                pixelCount++;
            }
            
            // Calculate averages
            return {
                r: Math.floor(r / pixelCount),
                g: Math.floor(g / pixelCount),
                b: Math.floor(b / pixelCount)
            };
        }

        const img = document.getElementById("myImg");
        const colorInfo = document.getElementById("colorInfo");

        img.onload = () => {
            try {
                const { r, g, b } = extractAvgColor(img, 50);
                const avgColor = `rgb(${r}, ${g}, ${b})`;
                
                // Apply background color
                document.body.style.backgroundColor = avgColor;
                
                // Display color information
                colorInfo.innerHTML = `
                    <strong>Average Color:</strong><br>
                    RGB(${r}, ${g}, ${b})<br>
                    <div style="width:30px;height:30px;background:${avgColor};border:1px solid #000;margin-top:5px;"></div>
                `;
            } catch (error) {
                colorInfo.innerHTML = "Error: Could not process image";
                console.error("Error processing image:", error);
            }
        };

        img.onerror = () => {
            colorInfo.innerHTML = "Error: Could not load image";
        };
    </script>
</body>
</html>

Key Parameters

Parameter Purpose Default Value
sampleRatio Controls sampling frequency (higher = faster, less accurate) 10
crossorigin Required for external images to avoid CORS issues "anonymous"

Simplified Function

Here's a reusable function for getting average color:

function getAverageColor(imgElement) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    
    ctx.drawImage(imgElement, 0, 0, canvas.width, canvas.height);
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    let r = 0, g = 0, b = 0;
    
    for (let i = 0; i 


Important Considerations
  • CORS Policy: Use crossorigin="anonymous" for external images
  • Performance: Use sampling ratios for large images to improve speed
  • Error Handling: Always wrap in try-catch blocks for robust applications
  • Image Loading: Use onload event to ensure image is fully loaded

Common Use Cases

  • Dynamic background colors based on album artwork
  • Color-coordinated user interfaces
  • Automatic theme generation for image galleries
  • Color analysis tools and applications

Conclusion

Extracting average colors from images using JavaScript's Canvas API enables dynamic, visually appealing interfaces. This technique is widely used in modern applications like music players and image galleries to create cohesive color schemes.

Updated on: 2026-03-15T23:19:01+05:30

981 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements