Loading tool…
Why HSL for UI theming?
HSL separates hue, saturation, and lightness—tweaking lightness preserves hue for hover/dark-mode ramps more intuitively than RGB alone.
How to use this tool
Pick or type a color. Copy formats you need. Compare contrast pairs using companion accessibility tools when available.
Use cases
Design tokens, CSS custom properties, screenshot eyedropper follow-ups, teaching color spaces.
Privacy and security
Editor and conversion workflows run in your browser without uploading your content to our servers for those steps. Clear sensitive data when you finish, especially on shared machines.