Guide: convert colors between HEX, RGB, and HSL
Designers ship HEX from Figma while modern CSS favors `hsl()` for theming and `rgb()` with alpha. Mental math between formats causes rounding mistakes and lost transparency.
The visual picker and numeric fields keep HEX, RGB/RGBA, and HSL/HSLA in sync locally — no palette data leaves your browser, which helps under NDA brand work.
Use when migrating CSS variables, documenting design tokens, or checking WCAG contrast. HSL makes it easy to tweak lightness for hover states without shifting hue.
Step by step
- Enter or pick a color — Type `#336699`, `rgb(51, 102, 153)`, or use the picker. Invalid values are rejected immediately.
- Switch output format — Copy the format your stack needs: HEX for some assets, HSL in `@theme`, RGBA for overlays.
- Tune alpha when needed — Set opacity for modals, glass effects, or subtle borders — alpha shows in RGBA and HSLA.
- Apply in code — Paste into custom properties (`--color-primary`), Tailwind config, or CSS-in-JS without manual recalculation.