Drag & Drop Color Palette Creator
An idea that has been in my head for years has finally taken the form of a web page.
About this project
This color palette creator allows you to generate color palettes by combining 465 traditional Japanese colors. Inspired by the idea of showcasing these beautiful colors and their names, I aimed to create something useful for website design, social media posts, presentation materials, and more.
From the color samples on the left side of the page, you can select your favorite colors and drag and drop them into the slots on the right, creating a palette of up to five colors.
The drag-and-drop functionality for the color blocks uses the HTML draggable attribute, and the generation of PNG files for downloading the created color palettes utilizes the <canvas> element.
Languages
HTML, CSS, JavaScript
Features
- Drag and drop new colors to overwrite the slots
- Hover over a slot to clear its color
- Clear all slots at once
- Download the built color palette as a PNG file
- Displays hexadecimal and RGB color codes for instant use in designing
Future Plans
- Optimize for mobile devices
- Enhance the overall design for better readability and usability
I will be happy if everyone gets to know about the traditional Japanese colors and uses them as inspiration for their creative activities.
Color Palettes Examples
With 465 color blocks, billions of combinations are possible; these are just a few examples.
