Texto de exemplo
Seletor de Cores — HEX, RGB e HSL
Escolha uma cor visualmente ou digite o valor em HEX, RGB ou HSL — os outros formatos são preenchidos automaticamente. Útil para pegar o código exato de uma cor para usar em CSS, design ou qualquer projeto.
#6D5BF6
Combinações de cores
Selecione uma amostra para copiar o código HEX.
Complementar
Análoga
Tríade
Tetrádica
Tons claros e escuros
Compare texto e formas
A cor escolhida aparece como texto e como forma sobre fundos diferentes.
Texto de exemplo
Texto de exemplo
Veja a cor nas paisagens
Compare como texto e formas aparecem sobre cada foto.
Texto sobre a paisagem
Texto sobre a paisagem
Texto sobre a paisagem
Texto sobre a paisagem
Como funciona
HEX, RGB e HSL são três formas de representar a mesma cor — HEX usa base 16 (#RRGGBB), RGB usa intensidade de vermelho/verde/azul (0-255), HSL usa matiz/saturação/luminosidade.
Como usar
Escolha uma cor no seletor visual ou digite o valor direto em qualquer um dos três campos — os outros dois são preenchidos automaticamente.
Exemplo
#FF5733 em RGB é rgb(255, 87, 51), e em HSL é hsl(11°, 100%, 60%).