A simple and beautiful web application that allows users to upload an image and automatically changes the background color of the page based on the dominant color extracted from the image using the Color Thief library.
- Upload an image via click or drag-and-drop
- Preview the uploaded image
- Automatically extract and apply the dominant color from the image as the background
- Smooth and visually pleasing UI with glassmorphism effect
- HTML5
- CSS3 (Glassmorphism UI design)
- JavaScript (Vanilla)
- Color Thief UMD
A modern web browser (Chrome, Firefox, Edge, etc.). No installation required for basic usage.
- Clone this repository or download the files.
- Open the
index.htmlfile in your browser. - Upload an image by clicking the upload area or using the "Choose Image" button.
- The background will change to the dominant color of the image automatically.
├── index.html # Main HTML page
├── style.css # Styling for the page
├── logic.js # JavaScript logic for handling image upload and color extraction
- You can customize the styles in
style.cssto match your desired theme. - Replace the font from Google Fonts or tweak layout settings as needed.
-
Color Thief: Extracts the dominant color from an image. Included via CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js"></script>
Developed by Ravi Ranjan Sharma.

