AWS Builder Center

Builder Center

Weekend Creative Challenge: Daily Color Palette Extractor

Weekend Creative Challenge: Daily Color Palette Extractor

See how I built a serverless, browser-based Daily Color Palette Extractor using vanilla JS and AWS. Get the source code and learn the median cut algorithm!

Soumyadeep Mandal

Founder & Director @ OmniAi Global Solutions | AWS UG Kolkata Leader, AWS Community Builder

TL;DR / Key Takeaways

  • Pure Client-Side Magic: This app extracts the 5 dominant colors from any image entirely in your browser using the Median Cut algorithm.
  • Zero Backend Costs: Hosted on AWS using a secure S3 bucket behind a CloudFront distribution with Origin Access Control (OAC).
  • Privacy First: Because it uses the HTML Canvas API, your images never actually leave your device or get uploaded to a server.

Why I Built This

We’ve all been there. You are scrolling through Dribbble, Instagram, or just walking around and snapping a killer sunset. You look at the photo and think, "Bro, what are those exact hex codes?"
Usually, the process is a massive headache. You have to open a heavy desktop app, or worse, upload your personal image to some random, ad-stuffed website that probably stores your data on an insecure server somewhere. Honestly, that just didn't sit right with me.
So, I took this weekend to solve my own problem. I built the Daily Color Palette Extractor. It’s a completely serverless, client-side web application that pulls the five dominant colors from any image you throw at it. No backend APIs, no monthly server bills, and fully solid privacy. Let me walk you through exactly how I built it.

Table of Contents

  • Vision & What The App Does
  • The "Why": Choosing the Right Tech Stack
  • The "How": Architecture & Development Process
    • The Frontend Solution (Canvas API & Algorithm)
    • AWS Architecture Overview
    • Challenges Encountered
  • Cleanup Section
  • What I Learned
  • Screenshots
  • Frequently Asked Questions
  • Conclusion

Vision & What The App Does

The vision for this creative expression project was simple: create a frictionless, lightning-fast utility for designers and developers.
The Daily Color Palette Extractor allows users to drag and drop (or click to browse) any image file—supporting JPG, PNG, WebP, and GIF. Once uploaded, the app instantly processes the image and spits out a clean grid of the 5 most dominant colors.
Key Features:
  • Visual Swatches: Displays the extracted colors in a beautiful, responsive grid.
  • Click-to-Copy: You just click a color swatch, and the hex code is instantly copied to your clipboard with a neat little "Copied!" tooltip.
  • Keyboard Accessible: You can tab through the colors and hit Enter or Space to copy, making it super accessible.

The "Why": Choosing the Right Tech Stack

"Why pay for a backend server when the user's device has more than enough compute power to process an image?"
I wanted to keep things ridiculously lightweight. No React, no Next.js overhead, no complex state management. Just raw HTML5, CSS3, and Vanilla JavaScript.
By pushing all the processing to the client-side, I achieved two massive wins:
  1. Zero latency: The extraction happens in milliseconds because there is no network request sending a 5MB image payload to a server.
  2. Infinite scalability: Whether 10 people or 10,000 people use the app at the exact same time, my AWS bill stays practically at zero because they are just downloading static files.

The "How": Architecture & Development Process

Building this was a proper weekend grind. I split the work into two phases: the browser-side color math, and the AWS cloud infrastructure. Here is the step-by-step breakdown.

The Frontend Solution (Canvas API & Algorithm)

To get the colors without a backend, I used a hidden HTML <canvas> element. When you drop an image, the FileReader API reads it as a data URL, and I draw that image onto the hidden canvas. Then, I use ctx.getImageData() to grab the raw RGBA pixel data.
But how do you find the dominant colors from potentially millions of pixels? I implemented the Median Cut Color Quantization algorithm. Instead of just finding the most common exact pixel (which rarely works well for photos), this algorithm groups similar colors. It recursively splits the RGB color space along the channel (Red, Green, or Blue) that has the widest range, dividing the pixels into 5 distinct buckets. I then average out each bucket to get the final 5 hex codes. I even added a sorting function to arrange them by luminance (dark to light) so the output looks visually pleasing.

AWS Architecture Overview

For hosting, I went with an enterprise-grade but incredibly cheap setup using AWS CloudFormation.
Here is the exact architecture flow:
1
2
3
4
┌─────────────┐ ┌──────────────────┐ ┌────────────┐
│ Browser │──HTTPS──▶ CloudFront CDN │──OAC───▶ S3 Bucket │
│ (User) │◀────────│ (Distribution) │◀───────│ (Private) │
└─────────────┘ └──────────────────┘ └────────────┘
  • Amazon S3: Stores the index.html file. Crucially, this bucket is strictly private. Public access is completely blocked.
  • Amazon CloudFront: Acts as the CDN, caching the site globally and serving it over HTTPS.
  • Origin Access Control (OAC): This is the magic bridge. It securely connects CloudFront to my private S3 bucket, ensuring nobody can bypass the CDN to hit the bucket directly.

Challenges Encountered

The biggest roadblock hit me during testing. When I uploaded a massive 4K resolution image, the browser completely froze. Looping through millions of pixels in vanilla JS on the main thread is a terrible idea.
The Fix: I added a scaling constraint. Before reading the pixels, the script checks the image dimensions. If it's larger than 200px on its longest side, it scales the canvas down to a maximum size of 200px while maintaining the aspect ratio. You don't need full 4K resolution to extract general color themes. This simple fix dropped the processing time from "browser crash" to instant.

Cleanup Section

If you are following along and deploying this yourself via the provided CloudFormation template, you don't want to leave unused resources running. To remove all resources and avoid any surprise charges, you just need two CLI commands.
First, empty the bucket (CloudFormation cannot delete a bucket that has files in it):
1
aws s3 rm s3://<YOUR-BUCKET-NAME> --recursive
Then, delete the stack:
1
aws cloudformation delete-stack --stack-name daily-color-palette-extractor --region us-east-1

What I Learned

This challenge pushed me out of my standard full-stack comfort zone.
  • Deep dive into Color Theory Math: Writing the Median Cut algorithm from scratch instead of relying on an npm package taught me a ton about how RGB color spaces work and how luminance affects visual sorting.
  • AWS Security Best Practices: I finally mastered CloudFront Origin Access Control (OAC). Using OAC instead of the older OAI (Origin Access Identity) is the modern, most secure way to serve static sites.
  • Browser Capabilities: It was a great reminder of how incredibly powerful modern browsers are. We often reach for Lambda functions or heavy backends when the client's device can easily handle the compute load.

Screenshots

Frequently Asked Questions

What is the median cut algorithm?
It is a color quantization technique that takes all the pixels in an image and recursively divides them into buckets based on the RGB channel with the widest range. By averaging these buckets, you get a highly accurate representation of the image's dominant colors.
Is it safe to upload personal images to this extractor?
Fully safe! The app is entirely client-side. The image is processed in your browser using the HTML Canvas API and is never sent to a server or stored anywhere.
How much does it cost to host this on AWS?
Because it's just a single HTML file hosted on S3 and served via CloudFront, the cost is practically zero. It easily fits within the AWS Free Tier, making it a perfect low-maintenance project.

Conclusion

Building the Daily Color Palette Extractor was one of the most rewarding weekend challenges I've tackled recently. It proved that you don't always need a complex backend or expensive AI APIs to build a genuinely useful tool. By leveraging the browser's Canvas API and combining it with a robust, serverless AWS deployment, you can deliver lightning-fast, privacy-first software to users globally.
Don't let the idea that you need complex infrastructure stop you from building cool stuff. Pick a problem, find a clever workaround, and just start coding.

Call to Action

Ready to dive into the code or try the app yourself?
View the GitHub Repo & Source Code Here 
About the Author:
Soumyadeep Mandal is a passionate developer who loves breaking down complex architectural problems and building elegant, serverless solutions. When he's not optimizing AWS CloudFormation templates, he's probably drinking coffee and working on a new side project.
Connect & Follow:
👉 X (Twitter)     | LinkedIn     | GitHub  
Related Reading:
# creative-expression# aws-community# aws-community-builders# aws-cloudformation# amazon-cloudfront
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article