HTML Color Codes

Selecionador de Cores HTML para formatos RGB HEX HSL

Obtenha facilmente os códigos de cores HTML CSS para o seu site usando o selecionador de cores, converta o formato de cor entre HEX, RGB, HSL, HSV.

Escolha uma Cor

Digite o valor da cor

Ou use o selecionador HTML5

Cor Selecionada

Vermelho: 0
Verde: 255
Azul: 255
HUE (Grau): 180
Brilho: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Grupo de Cores: Cyan
Compartilhar:
Exemplo de cor CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Estilos mais escuros e claros

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Obter cores de uma imagem

get pixel color from pic

Escolha uma cor e crie uma paleta

select color and create palette

O que é um Código de Cor HTML?

Os códigos de cores HTML são uma maneira de especificar cores no design de web. Esses códigos são usados em HTML e CSS para definir as cores de elementos como texto, fundos, bordas e muito mais. Entender os códigos de cores HTML é essencial para criar páginas web visualmente atraentes e consistentes.

Por exemplo, a cor vermelha pode ser identificada usando os seguintes formatos:

Tipos de Códigos de Cor HTML


Códigos de Cor Hexadecimal:
  • A maneira mais comum de especificar cores em HTML e CSS é usando códigos de cores hexadecimais (hex). Um código de cor hex é uma combinação de seis dígitos de números e letras definidos pela sua mistura de componentes vermelho, verde e azul (RGB).
  • Formato: #RRGGBB
  • Exemplo: #FF5733 representa um tom de laranja.
  • Cada par de dígitos corresponde à intensidade de vermelho, verde e azul, respectivamente, em uma escala de 00 (sem intensidade) a FF (intensidade total).
Códigos de Cor RGB:
  • Os códigos de cor RGB definem cores com base em seus componentes vermelho, verde e azul.
  • Formato: rgb(vermelho, verde, azul)
  • Exemplo: rgb(255, 87, 51) é o equivalente RGB de #FF5733.
  • Cada componente (vermelho, verde e azul) é especificado como um número entre 0 e 255
Códigos de Cor RGBA:
  • Semelhante ao RGB, mas inclui um componente alfa para opacidade.
  • Formato: rgba(vermelho, verde, azul, alfa)
  • Exemplo: rgba(255, 87, 51, 0.5) especifica a mesma cor com 50% de opacidade.
Códigos de Cor HSL:
  • HSL significa Hue (Matiz), Saturation (Saturação) e Lightness (Luminosidade).
  • Formato: hsl(matiz, saturação%, luminosidade%)
  • Exemplo: hsl(9, 100%, 60%) é outra maneira de representar a cor #FF5733
  • Matiz é um grau na roda de cores (de 0 a 360), saturação é uma porcentagem (0% é escala de cinza, 100% é cor total), e luminosidade também é uma porcentagem (0% é preto, 100% é branco).
Códigos de Cor HSLA:
  • Semelhante ao HSL, mas inclui um componente alfa para opacidade.
  • Formato: hsla(matiz, saturação%, luminosidade%, alfa)
  • Exemplo: hsla(9, 100%, 60%, 0.5) especifica a mesma cor com 50% de opacidade.
Usando Códigos de Cores HTML:

Os códigos de cores HTML podem ser usados em várias propriedades CSS para estilizar elementos da web. Por exemplo:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

Neste exemplo, o texto, o fundo e a borda são estilizados usando diferentes tipos de códigos de cores HTML, todos representando o mesmo tom de laranja.

Os códigos de cores HTML são um aspecto fundamental do design de web, permitindo que os desenvolvedores definam e manipulem cores com precisão. Ao entender os códigos de cores hexadecimais, RGB, RGBA, HSL e HSLA, você pode criar páginas web visualmente coesas e atraentes que melhoram a experiência do usuário.