Color Picker & Converter
Pick a color or convert between HEX, RGB, and HSL instantly.
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
What is Color Picker & Converter?
A color picker is a tool for selecting a color and expressing its value across the notation systems used in design and development. The three most common formats, hexadecimal (hex), RGB, and HSL, all describe the same sRGB color space: hex is the compact form most CSS uses, RGB specifies red, green, and blue channels from 0 to 255 to match how displays emit light, and HSL expresses hue, saturation, and lightness, which makes systematic adjustments like darkening or shifting tone more intuitive. A useful picker accepts any of these formats as input and converts between them instantly so the same color can be copied in whichever notation the target platform expects. This one also handles three-digit hex shorthand and copies each value with a single click.
How to Use Color Picker & Converter
- Use the color swatch picker, or type a value directly — hex (#ff5733), rgb(255, 87, 51), or hsl(9, 100%, 60%) are all accepted.
- HEX, RGB, and HSL values all update together instantly.
- Click "Copy" next to any format to copy just that value.
Examples
Hex input
Input: #ff5733
Output: rgb(255, 87, 51) · hsl(9, 100%, 60%)
RGB input
Input: rgb(34, 139, 230)
Output: #228be6 · hsl(207, 79%, 52%)
3-digit hex
Input: #f5a
Output: #ff55aa
Common Mistakes
- Forgetting the # when typing a hex value directly (though this tool tolerates it either way).
- Mixing up HSL's saturation/lightness percentages with RGB's 0-255 range when hand-editing CSS.
- Assuming a 3-digit hex like #f5a is somehow a different color than its 6-digit expansion #ff55aa — they're identical, just shorthand.
Why Use This Tool
- Accepts input in any of the three common formats and converts to all three simultaneously.
- Handles both 3-digit and 6-digit hex shorthand.
- Runs entirely client-side with instant updates as you type.
- One-click copy per format.