Tabela de Cores HTML: Guia Prático para Aplicar Cores no Seu Site

Descubra como aplicar cores em HTML de forma eficiente. Exemplos: vermelho #FF0000 ou rgb(255, 0, 0), azul #0000FF ou rgb(0, 0, 255), e verde #00FF00 ou rgb(0, 255, 0). Use hexadecimais, RGB ou HSL para criar designs incríveis!
tabela-de-cores-html

Precisa aprender programação de uma vez por todas? Então conheça o curso mais completo do Brasil. Clique abaixo e saiba mais!

As cores são uma parte essencial do design de um site, influenciando diretamente a experiência do usuário e a percepção da marca. 

Saber aplicar cores de forma estratégica pode transformar uma página comum em um espaço visualmente atraente e profissional. Por isso, dominar o uso da tabela de cores HTML é fundamental para qualquer desenvolvedor ou designer que busca criar projetos mais impactantes.

Neste guia prático, você aprenderá como utilizar a tabela de cores HTML e CSS de forma eficiente, aplicando os principais formatos de cores e diferentes estilos em seus projetos. 

Seja para destacar elementos visuais ou criar um layout elegante, este conteúdo é seu ponto de partida para dominar as cores no desenvolvimento web.

Um curso,
uma nova experiência!
Conheça a #formaçãojava

Curso FULL STACK do básico ao avançado para você iniciante em Java Web e Spring Boot REST.

Um curso,
uma nova experiência!
Conheça a #formaçãojava

Curso FULL STACK do básico ao avançado para você iniciante em Java Web e Spring Boot REST.

NÃO desista de aprender programação ainda em 2024!

Aprenda a programar ainda em 2024 com o melhor curso de programação do mercado
com um MEGA DESCONTO.

O Que É a Tabela de Cores HTML e Como Utilizá-la

A tabela de cores HTML é uma referência indispensável para desenvolvedores e designers, pois fornece uma ampla gama de cores que podem ser usadas na criação de sites e aplicações web. 

Ela permite que os elementos visuais sejam estilizados com precisão, utilizando valores predefinidos ou personalizados em diferentes formatos, como nomes de cores, valores hexadecimais, RGB e HSL.

Com a tabela de cores HTML, é possível aplicar cores em textos, fundos, bordas, e até em detalhes como sombras e gradientes. Além disso, o uso dessa tabela garante compatibilidade com navegadores, evitando inconsistências na renderização das cores.

Exemplo de Tabela de Cores HTML

A tabela a seguir apresenta todas as cores nomeadas disponíveis no HTML e CSS, junto com seus valores correspondentes nos formatos hexadecimal e RGB. 

Essa lista de cores é uma referência completa e amplamente utilizada no desenvolvimento web.

Nome da Cor (Inglês)HexadecimalRGB
Preto (Black)#000000rgb(0, 0, 0)
Branco (White)#FFFFFFrgb(255, 255, 255)
Vermelho (Red)#FF0000rgb(255, 0, 0)
Lima (Lime)#00FF00rgb(0, 255, 0)
Azul (Blue)#0000FFrgb(0, 0, 255)
Amarelo (Yellow)#FFFF00rgb(255, 255, 0)
Ciano / Aqua (Cyan / Aqua)#00FFFFrgb(0, 255, 255)
Magenta / Fúcsia (Magenta / Fuchsia)#FF00FFrgb(255, 0, 255)
Prata (Silver)#C0C0C0rgb(192, 192, 192)
Cinza (Gray)#808080rgb(128, 128, 128)
Bordô (Maroon)#800000rgb(128, 0, 0)
Oliva (Olive)#808000rgb(128, 128, 0)
Verde (Green)#008000rgb(0, 128, 0)
Roxo (Purple)#800080rgb(128, 0, 128)
Verde-azulado (Teal)#008080rgb(0, 128, 128)
Azul-marinho (Navy)#000080rgb(0, 0, 128)
Vermelho escuro (DarkRed)#8B0000rgb(139, 0, 0)
Marrom (Brown)#A52A2Argb(165, 42, 42)
Tijolo refratário (FireBrick)#B22222rgb(178, 34, 34)
Carmim (Crimson)#DC143Crgb(220, 20, 60)
Tomate (Tomato)#FF6347rgb(255, 99, 71)
Coral (Coral)#FF7F50rgb(255, 127, 80)
Vermelho indiano (IndianRed)#CD5C5Crgb(205, 92, 92)
Coral claro (LightCoral)#F08080rgb(240, 128, 128)
Salmão escuro (DarkSalmon)#E9967Argb(233, 150, 122)
Salmão (Salmon)#FA8072rgb(250, 128, 114)
Salmão claro (LightSalmon)#FFA07Argb(255, 160, 122)
Laranja-avermelhado (OrangeRed)#FF4500rgb(255, 69, 0)
Laranja escuro (DarkOrange)#FF8C00rgb(255, 140, 0)
Laranja (Orange)#FFA500rgb(255, 165, 0)
Ouro (Gold)#FFD700rgb(255, 215, 0)
Ouro escuro (DarkGoldenRod)#B8860Brgb(184, 134, 11)
Ouro dourado (GoldenRod)#DAA520rgb(218, 165, 32)
Ouro pálido (PaleGoldenRod)#EEE8AArgb(238, 232, 170)
Caqui escuro (DarkKhaki)#BDB76Brgb(189, 183, 107)
Caqui (Khaki)#F0E68Crgb(240, 230, 140)
Verde-amarelado (YellowGreen)#9ACD32rgb(154, 205, 50)

Exemplo Prático no HTML

Como Utilizar a Tabela de Cores HTML

Para aplicar uma cor da tabela no HTML, basta usar o atributo style em elementos específicos ou estilizar o conteúdo por meio de CSS. 

Veja exemplos práticos de como isso pode ser feito:

Aplicando cores diretamente no HTML:

Aplicando cores via CSS:

Esses exemplos mostram como a tabela de cores HTML pode ser utilizada de forma prática para estilizar elementos em um site, garantindo uma aplicação precisa e consistente.

Principais Formatos de Cores no HTML e CSS

No HTML e CSS, as cores podem ser representadas de diferentes maneiras para estilizar elementos de uma página. 

Cada formato possui suas vantagens e aplicações específicas, permitindo flexibilidade para os desenvolvedores ajustarem as cores conforme suas necessidades.

Os três principais formatos são: Hexadecimal, RGB/RGBA e HSL/HSLA.

 Vamos explorar cada um em detalhes com exemplos práticos.

Hexadecimal

O formato hexadecimal é amplamente utilizado por sua simplicidade e compatibilidade com navegadores. Ele usa seis caracteres combinados entre números (0-9) e letras (A-F) para representar os níveis de vermelho, verde e azul (RGB). É precedido pelo caractere #.

  • Exemplo de Cor Hexadecimal:
    • Vermelho: #FF0000
    • Verde: #00FF00
    • Azul: #0000FF

Exemplo de uso no HTML:

Vantagens:

  • Fácil de usar para quem trabalha com paletas de cores predefinidas.
  • Compatível com todos os navegadores.

RGB e RGBA

O formato RGB define cores com valores numéricos para vermelho, verde e azul, variando de 0 a 255. A variante RGBA inclui um canal alfa, que controla a opacidade, com valores de 0 (totalmente transparente) a 1 (completamente opaco).

  • Exemplo de Cor RGB e RGBA:
    • Vermelho: rgb(255, 0, 0)
    • Azul Transparente: rgba(0, 0, 255, 0.5)

Exemplo de uso no HTML:

Vantagens:

  • Controle preciso de opacidade com RGBA.
  • Fácil para ajustar cores de maneira incremental.

HSL e HSLA

O formato HSL é baseado no matiz (hue), saturação (saturation) e luminosidade (lightness), permitindo uma maneira intuitiva de ajustar cores. O HSLA adiciona o canal alfa para transparência, assim como o RGBA.

  • Componentes:
    • Hue (Matiz): Valor em graus (0 a 360) que define a cor base.
      • 0 = Vermelho, 120 = Verde, 240 = Azul.
    • Saturation (Saturação): Percentual (0% a 100%) que define a intensidade da cor.
    • Lightness (Luminosidade): Percentual (0% a 100%) que define a claridade da cor.

Exemplo de Cor HSL e HSLA: – Verde: hsl(120, 100%, 50%) – Verde Semi-Transparente: hsla(120, 100%, 50%, 0.7)

Exemplo de uso no HTML:

Vantagens:

  • Intuitivo para criar combinações harmônicas.
  • Fácil ajuste de saturação e luminosidade.

Qual Formato Usar?

  • Hexadecimal: Ideal para paletas predefinidas ou quando precisa de simplicidade.
  • RGB/RGBA: Ótimo para controle preciso de tons e opacidade.
  • HSL/HSLA: Perfeito para criar variações harmônicas e efeitos mais naturais.

Cada formato é útil em diferentes cenários. Escolher o melhor depende das necessidades do projeto e do nível de controle que você deseja sobre as cores.

Aplicando Cores no HTML e CSS

Aplicar cores no HTML e CSS é uma tarefa essencial no desenvolvimento de sites. As cores podem ser utilizadas para destacar textos, ajustar fundos, estilizar bordas ou criar elementos interativos. 

Existem duas maneiras principais de aplicar cores: estilo inline diretamente no HTML e uso de arquivos CSS externos.

Cada abordagem possui suas vantagens, e o uso depende da complexidade e organização do projeto.

Estilo Inline nas Tags HTML

O estilo inline é aplicado diretamente no elemento HTML, usando o atributo style. É ideal para testes rápidos ou pequenas personalizações, mas não é recomendado para projetos maiores, pois pode dificultar a manutenção do código.

Exemplo Prático de Estilo Inline:

<!DOCTYPE html>

<html>

<head>

    <title>Exemplo de Estilo Inline</title>

</head>

<body>

    <h1 style=”color: #FF4500;”>Título em Vermelho Alaranjado</h1>

    <p style=”background-color: #ADD8E6; color: #000080;”>Texto com Fundo Azul Claro e Cor Azul Escuro</p>

</body>

</html>

Vantagens:

  • Simples e rápido para aplicar.
  • Útil para ajustes pontuais.

Desvantagens:

  • Difícil de manter em projetos grandes.
  • Repetição de código, o que reduz a eficiência

Uso de CSS Externo para Estilização

O uso de CSS externo é a prática mais recomendada, especialmente em projetos maiores. Ele separa o conteúdo HTML do design, permitindo maior organização, reutilização de estilos e facilidade de manutenção.

Exemplo Prático com CSS Externo:

Arquivo HTML:

Arquivo CSS (styles.css):

Vantagens:

  • Facilita a reutilização de estilos em várias páginas.
  • Organização superior do código.
  • Melhor manutenção e escalabilidade em projetos complexos.

Desvantagens:

  • Necessidade de mais arquivos.
  • Curva de aprendizado inicial para iniciantes.

Melhor Prática: CSS Externo com Inline para Ajustes

Embora o CSS externo seja a melhor abordagem para a maior parte do projeto, o estilo inline pode ser útil em testes rápidos ou para ajustes específicos. Combine ambas as abordagens para aproveitar o melhor dos dois mundos:

Exemplo:

<p class=”fundo-azul” style=”border: 2px solid #FF4500;”>Texto com Fundo Azul e Borda Vermelha</p>

Tabela de Cores HTML Organizada por Tons

A tabela de cores HTML é uma ferramenta indispensável para desenvolvedores web, oferecendo flexibilidade e precisão na aplicação de cores. 

Organizar a tabela de cores por tons facilita a escolha de combinações harmoniosas para o design do site. 

Veja uma tabela prática:

Tons de VermelhoHexadecimalRGB
Light Coral#F08080rgb(240, 128, 128)
Crimson#DC143Crgb(220, 20, 60)
Firebrick#B22222rgb(178, 34, 34)
Tons de VerdeHexadecimalRGB
Pale Green#98FB98rgb(152, 251, 152)
Lime Green#32CD32rgb(50, 205, 50)
Forest Green#228B22rgb(34, 139, 34)
Tons de AzulHexadecimalRGB
Sky Blue#87CEEBrgb(135, 206, 235)
Royal Blue#4169E1rgb(65, 105, 225)
Navy#000080rgb(0, 0, 128)

Exemplo de Aplicação no HTML

<h1 style=”color: #F08080;”>Texto em Light Coral</h1>

<p style=”color: #32CD32;”>Texto em Lime Green</p>

<p style=”background-color: #87CEEB; color: #000080;”>Texto com Fundo Sky Blue e Cor Navy</p>

Ao entender os formatos de cores e suas aplicações, você pode criar sites mais atraentes e funcionais. 

Use este guia como referência para escolher, combinar e implementar cores com eficiência em seus projetos.

Esse artigo foi útil para você? 🤔
Deixe seu comentário!

Pedro Galvão

Estudo e trabalho com programação/ tecnologia há mais de 5 anos. Iniciei na carreira de programação como Front-end e migrei para a área de SEO com foco na parte técnica, cuidando da estrutura do site, performance e afins.

Compartilhe

Conheça os melhores
cursos de programação!

Conheça os melhores cursos de programação do mercado e de um up na carreira.

Você também pode gostar

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima
logo

NÃO desista de aprender programação ainda em 2024!

Aprenda a programar ainda em 2024 com o melhor curso de programação do mercado com um MEGA DESCONTO.