Color Picker & Converter
Understand Color Picker & Converter
Converte uma cor entre hex, RGB, HSL, HWB e OKLch, com seletor visual e prévia ao vivo.
How it works
Hex e RGB descrevem a mesma coisa em duas notações: cada par de dígitos hex é um canal de 0 a 255, então #FF5733 é rgb(255, 87, 51). O HSL é um rearranjo cilíndrico desses mesmos números sRGB — matiz como ângulo na roda de cores, saturação e luminosidade como porcentagens —, o que facilita derivar tons claros e escuros mas não muda o espaço de cor. O OKLch é diferente em natureza: é um espaço perceptual, então passos iguais no canal de luminosidade parecem iguais aos olhos, e é por isso que uma rampa em OKLch produz uma paleta uniforme onde uma rampa em HSL se amontoa nos amarelos.
When to use it
- Transformar um valor hex de um arquivo de design na forma rgb() ou hsl() que uma folha de estilo ou uma API de canvas espera
- Montar uma escala de tons claros e escuros a partir de uma cor de marca, mantendo matiz e saturação e variando a luminosidade
- Ler uma cor de uma captura de tela ou de uma página renderizada e obter todas as notações dela de uma vez
- Comparar duas cores parecidas pelos números em vez de a olho
Watch out for
- Não há canal alfa aqui. Hex de oito dígitos (#RRGGBBAA), rgba() e hsla() não são interpretados, e a transparência é descartada em vez de repassada.
- A ida e volta pode deslocar o valor em uma unidade. A saída HSL é arredondada para graus inteiros e porcentagens inteiras, então hex → HSL → hex nem sempre devolve o byte de que você partiu.
- A luminosidade do HSL não é o brilho percebido. hsl(60, 100%, 50%) é um amarelo vivo e hsl(240, 100%, 50%) é um azul escuro, ainda que ambos declarem 50% de luminosidade — use OKLch quando a comparação precisa corresponder ao que o olho vê.
- Nomes de cores do CSS não são aceitos. Informe `#FF0000` em vez de `red`.
Frequently Asked Questions
Como converter hex para RGB?
Divida o código hex de 6 dígitos em três pares: #FF5733 → R=0xFF=255, G=0x57=87, B=0x33=51, resultando em rgb(255, 87, 51). Para hex abreviado como #F73, duplique cada dígito antes (#FF7733). Cole qualquer código hex aqui e os valores RGB, HSL e HWB aparecem na hora.
Como converter RGB para hex?
Converta cada canal (0–255) em dois dígitos hexadecimais: R=255 → FF, G=87 → 57, B=51 → 33, resultando em #FF5733. Em JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join(""). Cole valores rgb() aqui para obter o código hex automaticamente.
Qual é a diferença entre RGB e HSL?
O RGB define cores pela intensidade de luz vermelha, verde e azul (0–255 cada) — ele corresponde ao funcionamento das telas. O HSL usa matiz (0–360° na roda de cores), saturação (0–100% de vivacidade) e luminosidade (0–100%). O HSL é mais intuitivo para criar tons claros, tons escuros e escalas de cor de design systems.
How to Use Color Picker & Converter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.