Hyu-Sync (My accidental colour picker)

#showdev #javascript #webdev #frontend

This project started as a simple experiment: I wanted to learn how to build a colour picker using the Canvas API. It quickly grew into a full website where I pulled together tools and ideas from the colour-related sites I’m always using.

At its core, the site is a colour picker that lets you select two colours and then checks contrast ratios against black, white, and the second selected colour. The goal is to make it easy to see whether your choices meet WCAG accessibility contrast standards.

You can also type colours directly into a text input to view their different values. Right now, the supported formats are HSL, Hex, and RGBA (with plans to expand this later).

To make experimenting easier, I built a colour history section so you can quickly reselect colours you’ve already tried. Under that, there’s a set of common colour harmonieslike Complementary, Analogous, and Monochromatic, to help with palette building.

I also worked on improving repeat load performance. When you revisit the site, I store a blob of the canvas image and repaint it after reload, so the picker can restore faster. Colour history is saved in local storage as well, so it persists through refreshes.

Finally, there’s a section for palettes I like, and I’ll be adding more as I find them.