Conteudo
Seletor de Cores Interativo
Escolha uma cor e veja e copie seus códigos nos formatos HEX, RGB e HSL
Escolha sua Cor
Como Usar
Clique no círculo colorido para abrir o seletor de cores do navegador e escolha a cor desejada.
Os códigos HEX, RGB e HSL serão atualizados automaticamente conforme você escolhe diferentes cores.
Use os botões “Copiar” para adicionar qualquer código à sua área de transferência e usar em seus projetos.
💡 Dica Profissional
Use HEX para CSS, RGB para manipulação programática de cores, e HSL quando precisar de controle sobre saturação e luminosidade.
Sobre o Aplicativo
Este aplicativo permite escolher qualquer cor e obter seus códigos nos principais formatos utilizados em desenvolvimento web e design. Entenda como cada formato funciona:
HEX (Hexadecimal)
O padrão de cores HEX é uma forma de representar cores em sistemas digitais, usando um código de seis dígitos para especificar a mistura de vermelho, verde e azul.
Formato:
Um código HEX começa com # seguido por seis caracteres alfanuméricos (0-9 e A-F).
Divisão:
Os seis caracteres são divididos em três pares:
- RR: Intensidade do vermelho (Red)
- GG: Intensidade do verde (Green)
- BB: Intensidade do azul (Blue)
Valores:
Cada par representa um valor de 00 a FF, onde 00 é ausência da cor e FF é intensidade máxima.
RGB (Red, Green, Blue)
O modelo RGB é usado em dispositivos eletrônicos para criar cores combinando diferentes intensidades de luz vermelha, verde e azul.
Cores Primárias:
Utiliza três cores primárias: vermelho, verde e azul.
Intensidade:
Cada cor tem intensidade de 0 a 255, onde 0 é ausência e 255 é intensidade máxima.
Mistura Aditiva:
Combina diferentes intensidades para criar uma variedade de cores.
Preto e Branco:
Ausência de todas as cores resulta em preto; intensidade máxima das três produz branco.
HSL (Hue, Saturation, Lightness)
O modelo HSL utiliza três parâmetros para definir uma cor: matiz, saturação e luminosidade.
Matiz (Hue):
Representa a cor pura, medida em graus (0-360°). Ex: 0° vermelho, 120° verde, 240° azul.
Saturação (Saturation):
Intensidade da cor. 100% = cor vibrante, 0% = tons de cinza.
Luminosidade (Lightness):
Brilho da cor. 0% = preto, 100% = branco, 50% = cor normal.