Construtor de Códigos de Cores HTML

Definindo a cor de fundo de um elemento:

<div style="background-color: rgb(255, 165, 0);">
    Este elemento tem um fundo laranja.
</div>

Definindo a cor do texto de um elemento:

<p style="color: rgb(0, 128, 0);">
    Este texto é verde.
</p>

Usando o código de cor RGB no CSS:

.my-element {
    color: rgb(128, 0 ,128);
    background-color: rgb(255 ,255 ,0);
}

Ao ajustar os valores de vermelho, verde e azul, você pode criar uma ampla gama de cores usando o formato RGB. Lembre-se de que o valor máximo para cada componente é 255, e qualquer valor fora desse intervalo não produzirá cores válidas.

Exemplos de uso do código de cor HEX em HTML:

<div style="background-color: #FFA500;">
    Este elemento tem um fundo laranja.
</div>

<p style="color: #008000;">
    Este texto é verde.
</p>

.my-element {
    color: #800080;
    background-color: #FFFF00;
}

Os códigos de cor HEX não diferenciam maiúsculas de minúsculas, então você pode usar letras maiúsculas ou minúsculas. Quando uma cor tem valores idênticos para cada par de partes, você pode abreviar o código HEX para três dígitos. Por exemplo, #FF8800 pode ser escrito como #F80.

Os códigos de cor HEX oferecem muitas cores e são comumente usados em design web. Eles fornecem uma maneira concisa de representar cores em HTML e CSS.

Exemplos de uso do código de cor HSL em HTML:

Definindo a cor de fundo de um elemento

<div style="background-color: hsl(39,100%,50%);">
    Este elemento tem um fundo laranja.
</div>

Definindo a cor do texto de um elemento

<p style="color: hsl(120 ,100%,25%);">
    Este texto é verde escuro.
</p>

Usando o código de cor HSL em CSS

.my-element {
    color: hsl(300 ,100%,25%);
    background-color: hsl(60 ,100%,50%);
}

O modelo HSL é útil quando você quer ajustar cores com base no matiz ou brilho. Ao mudar esses valores, você pode criar diferentes tons facilmente.

Os códigos HSL oferecem uma maneira mais intuitiva de descrever cores em comparação com os códigos RGB ou HEX. Eles permitem que você crie esquemas harmoniosos ajustando o matiz enquanto mantém a saturação e a luminosidade consistentes.

Exemplos de uso de nomes de cores em HTML:

<div style="background-color: coral;">
    Este elemento tem um fundo coral.
</div>

<p style="color: navy;">
    Este texto é azul marinho.
</p>

.my-element {
    color: maroon;
    background-color: skyblue;
}

O uso de nomes de cores é uma maneira simples de aplicar cores em seu código HTML e CSS. Eles são fáceis de entender e lembrar, tornando seu código mais legível.

No entanto, se você precisar de um tom específico ou uma cor que não está disponível como um nome predefinido, será necessário usar códigos RGB, HEX ou HSL.

Os nomes de cores são ótimos para iniciantes que estão aprendendo HTML e CSS. Eles permitem que você aplique cores rapidamente sem se prender aos detalhes dos códigos.

Selecionando Cores

A Construção de Código de Cor fornece uma interface intuitiva de seleção de cor. Você pode selecionar uma cor usando a roda de cores clicando e arrastando o seletor para o tom e saturação desejados. Você também pode ajustar o brilho usando o controle deslizante à direita da roda de cores.

Alternativamente, você pode inserir valores específicos para códigos RGB, HEX ou HSL. A ferramenta atualizará a visualização em tempo real conforme você ajusta os valores.

A caixa de visualização mostra uma visão ao vivo da cor atualmente selecionada. Isso ajuda você a ver como ela ficará em sua página web.

Gerando Código de Cor

Depois de selecionar uma cor usando qualquer método, a Construção de Código de Cor exibirá seu código correspondente nos formatos RGB, HEX e HSL.

Você pode copiar facilmente este código para sua área de transferência clicando em "Copiar" ao lado de cada formato. Isso economiza tempo e elimina a cópia manual.

Para inserir isso diretamente no seu código HTML, clique em "Inserir no HTML". A ferramenta gerará um elemento HTML <div> com essa cor de fundo aplicada:

<div style="background-color: rgb(173, 216, 230);"></div>

Esta ferramenta simplifica a criação e o uso de cores em seus projetos HTML, eliminando a busca manual de códigos e fornecendo uma maneira visual de testar diferentes opções.

Ferramentas como esta ajudam a otimizar fluxos de trabalho ao criar websites bonitos!