Color Picker
Pick a color or type a HEX code, and see its RGB and HSL equivalents update automatically — useful whenever a design tool and your CSS expect different formats.
Overview
HEX, RGB, and HSL all describe the same color space, but different tools and codebases prefer different formats — a design handoff might specify HEX while a CSS variable system uses HSL for easier lightness/saturation tweaks. This tool converts between all three at once, so you don't need to look up the conversion formula or reach for a separate utility.
Examples & Sample Data
Picking a shade of blue
#3366ff
RGB: rgb(51, 102, 255) — HSL: hsl(225, 100%, 60%)
How It Works
- Use the color picker to choose a color, or type a HEX code directly into the text field.
- The RGB and HSL equivalents update automatically as you change the color.
Frequently Asked Questions
No. All color conversions happen entirely in your browser using plain JavaScript math.
Yes — enter any valid 6-digit HEX code in the text field and the RGB and HSL values update automatically.
No. This tool converts opaque HEX, RGB, and HSL values — 8-digit HEX or rgba()/hsla() alpha channels aren't part of the conversion.
Related Tools
Explore more high-performance utilities.