How to convert a color
- Pick a color with the color picker, or paste a code like
#1657D8,rgb(22, 87, 216)orhsl(220, 82%, 47%). - The HEX, RGB and HSL values update instantly, with a live preview swatch.
- Click Copy next to the format you need.
HEX, RGB and HSL explained
HEX (like #1657D8) is the compact six-digit form used everywhere in CSS and design tools — two hexadecimal digits each for red, green and blue. RGB (like rgb(22, 87, 216)) lists the same red, green and blue values in plain decimal, from 0 to 255. HSL (like hsl(220, 82%, 47%)) describes a color by hue (0–360° around the color wheel), saturation (how vivid it is) and lightness (how bright it is). All three describe exactly the same color.
Which format should I use?
Use HEX when a tool or brand guide asks for a single short code. Use RGB when you need the raw channel numbers, for example in image editors or when adding transparency with rgba(). Use HSL when you want to adjust a color logically — keep the hue, then nudge lightness for hover states or saturation for muted variants.
Is it private and safe?
Yes. Toolyard converts colors inside your browser on your own device. Nothing you type or pick is ever uploaded anywhere, so it stays completely private.
Frequently asked questions
What color formats can I paste?
HEX codes like #1657D8 (or short #16D), RGB like rgb(22, 87, 216), and HSL like hsl(220, 82%, 47%). The converter parses all three.
When should I use HSL instead of RGB?
HSL separates hue, saturation and lightness, so it is easier to tweak — for example darken a button on hover by lowering lightness while keeping the same hue.
Is my color data uploaded?
No. The conversion runs entirely in your browser and nothing is sent to any server.
Is it free?
Yes, completely free with no sign-up.