Usually one of the first things I do when starting a new project is decide on a color palette. When I decided to create my own portfolio website, I spent quite a bit of time trying to figure out the right palette to use as it was difficult to imagine how all the colors would work together on the page. After trying another tool that aimed to achieve this, I decided to try creating a tool that was more in line with what I needed.

The Hex Color Visualizer is a tool designed to make it easy to visualize, organize, and adjust color palettes for development projects. It provides a simple user-friendly interface to experiment with color combinations and view live previews of how the colors interact on a web page.

For the most part, this project wasn't technically difficult. In fact, I'm pretty sure that the most challenging portion was trying to get it done with no electricity and a depleting laptop battery.

On the technical side, I had some issues with the color input and the drag-and-drop functionality. Initially, I was trying to have each hex color code on the left have its own input field. However, the drag-and-drop feature was causing the input field to lose focus after each keystroke.

After trying a few different implementations to resolve the focus issue, I opted to have a separate input field and allow the user to delete and add colors as I need. I used regex to validate the input field to ensure that only valid hex codes were accepted.