How I keep HEX, RGB, HSL, and WCAG contrast straight (and the free toolkit I built for it)

If you design or ship UI, you live in color values. One tab has a picker stuck on HEX. Another has a contrast checker. A third has a palette generator that exports everything except the CSS variables you actually need. I got tired of that loop, so I wrote down the mental model I use — and packaged the tools I reach for into one free static site: HexColor Pro .

This is not a “10 color theory tips” list. It’s the practical subset I use when picking UI colors and checking that text stays readable.

HEX, RGB, HSL — when each one helps

HEX is the web’s default shorthand: #6366f1 . It’s compact, copy-paste friendly, and what most design tokens still speak. Great for storing and sharing. Awkward when you want to “make this 10% lighter” by hand.

RGB ( rgb(99, 102, 241) ) is what the browser composites. Useful when you reason about channels, mix colors, or talk to canvas/WebGL.…