# Tutorial: Como usar cores HTML Em HTML, as cores são usadas para personalizar planos de fundo, textos e bordas, permitindo um design mais atrativo e uma melhor legibilidade. Existem três formas principais para definir cores no código: nomes de cores, códigos hexadecimais e valores RGB. ## O que são cores HTML? Cores HTML são usadas para definir a coloração aplicada a determinados elementos em um documento HTML. Por meio de configurações simples no [corpo do documento](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-body/) usando a tag style, você consegue personalizar o [plano de fundo](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-backgrounds/), as bordas e os textos em documentos HTML como quiser. ## Quais métodos existem para definir cores HTML? Existem três métodos diferentes para definir uma cor HTML. Nas seções a seguir, conheceremos o que distingue essas variantes. ### Nomes de cores O HTML suporta **140 nomes de cores** reconhecidos pelos navegadores, que podem ser armazenados pelo próprio código. Além de valores padrão, como “blue” (para azul), “gray” (cinza), “red” (vermelho), “orange” (amarelo), “black” (preto) e “White” (branco), variantes mais específicas, como “Chocolate” (tom de marrom), “Cornsilk” (tom de amarelo) e “DarkSeaGreen” (tom de verde), também estão disponíveis. Dica Neste [artigo da w3schools](https://www.w3schools.com/colors/colors_names.asp "w3schools.com: Nomes de cores HTML"), você encontra uma tabela de cores HTML e seus respectivos nomes. ### Códigos hexadecimais de cores Os códigos hexadecimais de cores são compostos por um **valor hexadecimal de seis dígitos** precedido pelo símbolo `#`. Os números variam de 0 a 9 e as letras de A a F. Esses valores representam os níveis de vermelho, verde e azul em pares, sendo `00` o valor mais baixo e `FF` o mais alto. Por exemplo, a cor azul é representada pelo código hexadecimal `#0000FF`, enquanto o rosa escuro (“DeepPink”) tem o valor `#FF1493`. Nas extremidades do espectro, é possível encontrar o preto (`#000000`) e o branco (`#FFFFFF`). ### Valores RGB Além dos códigos hexadecimais, é possível usar os valores de cores RGB na marcação de cores para HTML. Eles também são definidos por proporções de vermelho, verde e azul, sendo que a intensidade dos componentes varia **entre 0 a 255**. Por exemplo, a cor azul é definida pelo código `rgb(0, 0, 255)`, ciano por `rgb(0, 255, 255)` e rosa escuro por `rgb(255, 20, 147)`. ## Como definir as cores HTML: Sintaxe e exemplos Agora, conheça a sintaxe e as funcionalidades de definição de cores HTML por meio de alguns exemplos práticos que elaboramos. ### Trocar a cor do plano de fundo Se você quer alterar as cores do seu plano de fundo em HTML, precisará usar o atributo `style` e a propriedade *inline* `background-color` em CSS. Sua sintaxe é a seguinte: ```html ``` No exemplo abaixo, vamos usar **nomes de cores** para definir as cores de plano de fundo do título e de dois elementos de parágrafo. Vamos atribuir a cor “SteelBlue” (tom de azul) ao título `

`. Em seguida, mudaremos a cor do plano de fundo do primeiro parágrafo para “SpringGreen” (tom de verde) e do segundo para “Yellow” (amarelo): ```html

Cores para HTML

Isso é um parágrafo e sua cor de fundo é SpringGreen.

Isso é outro parágrafo e sua cor de fundo é yellow.

``` [![Imagem: Cores HTML: Exemplo de plano de fundo](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/7/8/csm_exemplo-cores-fundo-html_7beaab3fa1.webp "Cores HTML: Exemplo de plano de fundo")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemplo-cores-fundo-html.png) No navegador, observamos que as cores do plano de fundo dos três elementos são diferentes ### Especificar cores de texto Um método similar é usado para alterar a cor do texto. No entanto, nesse caso, você precisará modificar a propriedade `color`. Sua sintaxe é a seguinte: ```html ``` Neste exemplo, usaremos **valores hexadecimais** e definiremos a tonalidade de vermelho “Orange Red” (`#FF4500`) como a cor da fonte do título. Na primeira seção, aplicaremos o tom de azul “Midnight Blue” (`#191970`) e, na segunda, a cor “Indigo” (`#4B0082`): ```html

Este título tem a cor Orange Red.

A cor da fonte deste parágrafo é Midnight Blue.

A cor da fonte deste parágrafo é Indigo.

``` [![Imagem: Cores HTML: Exemplo de texto com diferentes cores](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/3/9/csm_exemplo-cores-letras-html_2daa794e46.webp "Cores HTML: Exemplo de texto com diferentes cores")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemplo-cores-letras-html.png) Após executar o código, observamos os três elementos de texto com cores diferentes ### Especificar as cores das bordas Você também pode personalizar as bordas de um texto usando cores HTML. você pode especificar a espessura, o estilo (sólido, tracejado, pontilhado) e a cor da borda. Sua sintaxe é a seguinte: ```html ``` No exemplo abaixo, usaremos o terceiro método de definição de cores HTML: os **valores RGB**. Vamos atribuir o valor `rgb(178, 34, 34)` (“fire red”, um tom de vermelho escuro) à borda do título. Os dois parágrafos terão bordas nas cores `rgb(32, 178, 170)` (“light green”, um tom de verde claro) e `rgb(205, 133, 63)` (“Peru”, um tom de marrom). ```html

A borda do título é fire red

Esta borda é light green.

Esta borda tem a cor chamada Peru.

``` [![Imagem: Cores HTML: Exemplos de borda com diferentes cores](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/4/c/csm_exemplo-bordas-html_9f0795398b.webp "Cores HTML: Exemplos de borda com diferentes cores")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemplo-bordas-html.png) Além das diferentes cores HTML, as bordas também têm estilos distintos This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/cores-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/cores-html/) for AI/LLM consumption.