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%)
O que é 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.
Como usar 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.
Exemplos
Hex input
Entrada: #ff5733
Saída: rgb(255, 87, 51) · hsl(9, 100%, 60%)
RGB input
Entrada: rgb(34, 139, 230)
Saída: #228be6 · hsl(207, 79%, 52%)
3-digit hex
Entrada: #f5a
Saída: #ff55aa
Erros comuns
- 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.
Por que usar esta ferramenta
- 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.