How I Built a Color Picker That Actually Converts Colors Correctly (HEX/RGB/HSL)

While working on a design system, the reporter kept encountering the frustrating issue of constantly switching between different websites to convert colors between HEX, RGB, and HSL formats. Each site had its unique user interface, required JavaScript, and lacked a proper color scheme along with the conversion. Tired of this repetitive task, the reporter decided to create their own color picker tool.

The reporter identified several problems with existing color converter tools online: they were slow due to heavy JavaScript libraries, lacked context by not providing complementary colors and schemes, and were ad-heavy, which was distracting during the matching process. The reporter desired a single, instantaneous, and comprehensive HTML file that could be used offline without any ceremony.

For the architecture decision, the reporter chose to write the conversion logic using vanilla JavaScript instead of relying on libraries like color (npm). The core conversion logic was implemented in the form of two functions: hslToRgb and rgbToHsl. The hslToRgb function takes hue (h), saturation (s), and lightness (l) as parameters and returns an array with the corresponding RGB values.

The reporter also mentioned their honest take on AI-assisted development, explaining that they collaborated with AI to generate the initial code structure and design. However, they acknowledged that AI sometimes made mistakes in the output. In this case, the AI introduced subtle but critical bugs in the color conversion process, which the reporter had to address manually by rewriting the conversion functions using a more precise formula.

After iterating on the AI-generated code and verifying the output with specific test cases, the reporter arrived at a reliable RGB-to-HSL conversion function. With their new color picker tool, users can easily convert colors between HEX, RGB, and HSL formats without any distractions or errors.