Color Picker & Converter
Escolha uma cor ou converta entre HEX, RGB e HSL instantaneamente.
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
What is Color Picker & Converter?
Um seletor de cores é uma ferramenta para selecionar uma cor e expressar seu valor nos sistemas de notação usados em design e desenvolvimento. Os três formatos mais comuns, hexadecimal (hex), RGB e HSL, descrevem o mesmo espaço de cores sRGB: hex é a forma compacta mais usada no CSS, RGB especifica os canais vermelho, verde e azul de 0 a 255 para corresponder à forma como os dispositivos emitem luz, e HSL expressa tom, saturação e luminosidade, o que torna ajustes sistemáticos como escurecer ou mudar tom mais intuitivos. Um seletor útil aceita qualquer um desses formatos como entrada e converte entre eles instantaneamente, para que a mesma cor possa ser copiada na notação que a plataforma de destino espera. Este também lida com a forma abreviada de três dígitos do hex e copia cada valor com um único clique.
How to Use Color Picker & Converter
- Use o seletor de amostra de cor ou digite um valor diretamente — hex (#ff5733), rgb(255, 87, 51) ou hsl(9, 100%, 60%) são todos aceitos.
- Os valores HEX, RGB e HSL são atualizados juntos instantaneamente.
- Clique em "Copiar" ao lado de qualquer formato para copiar apenas esse valor.
Examples
Entrada de hex
Input: #ff5733
Output: rgb(255, 87, 51) · hsl(9, 100%, 60%)
Entrada de RGB
Input: rgb(34, 139, 230)
Output: #228be6 · hsl(207, 79%, 52%)
Hex de 3 dígitos
Input: #f5a
Output: #ff55aa
Common Mistakes
- Esquecer o # ao digitar um valor hexa diretamente (embora essa ferramenta tolere de qualquer forma).
- Confundir as porcentagens de saturação/luminosidade do HSL com a faixa de 0 a 255 do RGB ao editar CSS manualmente.
- Supor que um hexa de 3 dígitos como #f5a seja uma cor diferente da sua expansão de 6 dígitos #ff55aa — elas são idênticas, apenas abreviadas.
Why Use This Tool
- Aceita entrada em qualquer um dos três formatos comuns e converte para todos os três simultaneamente.
- Trata tanto hexa de 3 dígitos quanto de 6 dígitos.
- Executa inteiramente no lado do cliente com atualizações instantâneas à medida que você digita.
- Cópia de um clique por formato.