Color Tools
Color picker
Pick any color and instantly see its HEX, RGB, and HSL values. All processing happens locally in your browser.
The color picker lets you choose any color and instantly get its HEX, RGB and HSL values — the three formats designers and developers use most. Pick a color visually, paste a HEX code to convert it to RGB and HSL, or grab a value from a recent-colors history. Nothing is sent to a server, so it works offline once the page loads.
#0EA5E9
rgb(14, 165, 233)
hsl(199, 89%, 48%)
How to use the color picker
- Click the color swatch to open your browser's native color picker, or type a HEX value directly.
- Read the RGB and HSL equivalents shown below.
- Use the Copy buttons to grab the format your tool expects (CSS, Figma, a design token, etc.).
Worked example
A designer needs to match a brand color from a screenshot. They open the color picker, eyeball the teal in the screenshot using the native picker, and get #0ea5e9 — the HEX they paste straight into their CSS as background-color: #0ea5e9;. They also grab the HSL value to drop into a Figma token. The whole match takes seconds and stays entirely on their machine.
Frequently asked questions
- How does the color picker work?
- Use the native color picker to select a color, or type a HEX value directly. The tool instantly converts it to RGB and HSL and displays all three formats with copy buttons.
- What color formats are supported?
- HEX (e.g. #0ea5e9), RGB (e.g. rgb(14, 165, 233)), and HSL (e.g. hsl(199, 89%, 49%)). Enter any HEX value and get all formats instantly.
- Is my data sent anywhere?
- No. All color calculations happen in your browser. Nothing is sent to a server.