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. Still not the friendliest for “a bit less saturated.”

HSL (hsl(239 84% 67%)) maps better to how we talk about color: hue, saturation, lightness. When I’m building a shade scale for a design system, I usually think in HSL (or OKLCH if the stack supports it) and convert back to HEX for tokens.

HSV (and CMYK on print-adjacent work) show up often enough that a converter should support them without a second website. HexColor Pro’s picker and converter expose HEX, RGB, HSL, HSV, and CMYK, including bulk conversion when you’re migrating a token list.

Contrast is not optional

Pretty palettes fail in production when body text sits at 2.3:1 on a pastel card. WCAG contrast ratios exist so people can actually read the UI:

  • AA normal text: at least 4.5:1
  • AA large text: at least 3:1
  • AAA is stricter (7:1 / 4.5:1)

“Large text” generally means ~18pt+ (or 14pt+ bold), but check the current WCAG definitions for your case. The habit that helped me: pick the text/background pair first, decorate second. Brand gradients look worse when the label on top fails AA.

HexColor Pro includes a contrast checker for AA/AAA and a text color helper that suggests a readable foreground for a given background. Use them as a gate before you export a palette.

Palettes and gradients that export to CSS

Harmony modes (complementary, analogous, triadic, split complementary, tetradic, monochromatic, shades) are a starting point, not a brand. I generate a candidate set, then kill anything that fails contrast on real components (buttons, links, helper text).

When a palette is “good enough,” I want CSS variables or SCSS — not only a PNG. The palette generator is built around that habit. Same for gradients: linear, radial, and conic stops are only useful if you can copy CSS into a stylesheet in one click (gradient generator).

Why a static toolkit

HexColor Pro is a static site on Cloudflare Pages. The tools run in the browser: no account, no signup wall, privacy-first, and they keep working offline after the first load. That constraint shaped the product — if a feature needs your email, it doesn’t belong here.

What’s included today:

  • Color picker with recent colors and clipboard copy
  • WCAG contrast checker
  • Palette generator with harmony modes and CSS/SCSS export
  • CSS gradient generator (linear / radial / conic)
  • Shades/tints, color mixer, random colors
  • Named-color finder (~1,500 names)
  • Converters (including bulk)
  • Color temperature and text-on-background helpers

Try it: https://hexcolorpro.pages.dev

A simple workflow you can steal

  1. Pick a base brand hue (HEX or HSL).
  2. Generate a small palette (primary / neutrals / danger).
  3. Run every text style against its background in the contrast checker.
  4. Build shade steps for hover/active states.
  5. Export CSS variables; only then tweak gradients or decorative accents.

What I’d love feedback on

I’m sharing this as a #showdev project, not a pitch deck. If you try the site, tell me:

  • Which tools you actually used vs skipped
  • Whether the homepage makes the purpose obvious
  • Formats or exports you’d add (Tailwind tokens, OKLCH, etc.)
  • Mobile UX pain

Thanks for reading — and if you only take one thing away, make it this: choose readable pairs before you fall in love with a palette.