HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.
View in English Always switch to English
Este artigo é uma cartilha que apresenta cada uma das maneiras pelas quais as cores CSS podem ser usadas em HTML.
O uso da cor é uma forma fundamental de expressão humana. As crianças experimentam a cor antes mesmo de terem a destreza manual para desenhar. Talvez seja por isso que a cor é uma das primeiras coisas que as pessoas muitas vezes querem experimentar quando aprendem a desenvolver sites. Com CSS, há várias maneiras de adicionar cor aos seus elementos HTML para criar exatamente a aparência desejada.
Vamos abordar a maior parte do que você precisa saber ao usar cores, incluindo uma lista do que você pode colorir e quais propriedades CSS estão envolvidas, como você descreve as cores, e como realmente usar cores em folhas de estilo e em scripts. Também veremos como deixar o usuário escolher uma cor.
Em seguida, encerraremos as coisas com uma breve discussão sobre como usar cores com sabedoria: como selecionar cores apropriadas, tendo em mente as necessidades de pessoas com diferentes capacidades visuais.
No nível dos elementos, tudo em HTML pode ter cores aplicadas. Em vez disso, vamos ver as coisas em termos dos tipos de coisas que são desenhadas nos elementos, como texto e bordas e assim por diante. Para cada um, veremos uma lista das propriedades CSS que aplicam cores a eles.
Em um nível fundamental, a propriedade color define a cor de primeiro plano do conteúdo de um elemento HTML e a propriedade background-color define a cor de fundo do elemento. Estes podem ser usados em praticamente qualquer elemento.
Sempre que um elemento é renderizado, essas propriedades são usadas para determinar a cor do texto, seu plano de fundo e quaisquer decorações no texto.
A cor a ser usada ao desenhar o texto e quaisquer decorações de texto (como a adição de sublinhados ou sublinhados, linhas tachadas, e assim por diante.
A cor de fundo do texto.
Configura um efeito de sombra aplicado ao texto. Entre as opções para os aspectos da sombra, está a cor base da sombra (que será então desfocada e mesclada com o plano de fundo, com base nos outros parâmetros). Veja Sombras projetadas em texto para descobrir mais.
Por padrão, as decorações de texto (como sublinhados, tachados, etc.) usam a propriedade color como suas cores. No entanto, você pode substituir esse comportamento e usar uma cor diferente para eles com a propriedade text-decoration-color.
A cor a ser usada ao desenhar símbolos de ênfase adjacentes a cada caractere no texto. Isso é usado principalmente ao desenhar texto para idiomas do Leste Asiático.
A cor a ser usada ao desenhar o caret (às vezes chamado de cursor de entrada de texto) dentro do elemento. Isso só é útil em elementos que são editáveis, como <input> e <textarea> ou elementos cujo atributo HTML contenteditable está definido.
Cada elemento é uma caixa com algum tipo de conteúdo e tem um fundo e uma borda além de qualquer conteúdo que a caixa possa ter.
Consulte a seção Borders para obter uma lista das propriedades CSS que você pode usar para definir as cores das bordas de uma caixa.
A cor de fundo a ser usada em áreas do elemento que não possuem conteúdo de primeiro plano.
A cor a ser usada ao desenhar a linha que separa as colunas do texto.
A cor a ser usada ao desenhar um contorno ao redor da parte externa do elemento. Esse contorno é diferente da borda, pois não recebe espaço reservado para ele no documento (portanto, pode se sobrepor a outro conteúdo). Geralmente é usado como indicador de foco, para mostrar qual elemento receberá eventos de entrada.
Qualquer elemento pode ter uma borda desenhada em torno dele. Uma borda de elemento básico é uma linha desenhada ao redor das bordas do conteúdo do elemento. Consulte Propriedades do Box para saber mais sobre a relação entre elementos e suas bordas, e o artigo Estilizando bordas usando CSS para saber mais sobre como aplicar estilos a bordas.
Você pode usar a propriedade abreviada border, que permite configurar tudo sobre o borda de uma só vez (incluindo recursos não coloridos de bordas, como sua largura, estilo (sólido, tracejado, etc.), e assim por diante.
Especifica uma única cor a ser usada para cada lado da borda do elemento.
Permite definir a cor do lado correspondente da borda do elemento.
Com estes, você pode definir a cor usada para desenhar as bordas que estão mais próximas do início e do fim do bloco que a borda circunda. Em um modo de escrita da esquerda para a direita (como a forma como o inglês é escrito), a borda inicial do bloco é a borda superior e o final do bloco é a parte inferior. Isso difere do início e do fim embutidos, que são as bordas esquerda e direita (correspondendo a onde cada linha de texto na caixa começa e termina).
Permitem colorir as bordas da borda mais próximas ao início e ao final do início das linhas de texto dentro da caixa. De que lado isso está irá variar dependendo das propriedades writing-mode, direction e text-orientation, que são normalmente (mas nem sempre) usado para ajustar a direcionalidade do texto com base no idioma exibido. Por exemplo, se o texto da caixa estiver sendo renderizado da direita para a esquerda, a cor da borda em linha será aplicada ao lado direito da borda.
CSS não é a única tecnologia da web que suporta cores. Existem tecnologias gráficas disponíveis na web que também suportam cores.
Permite desenhar gráficos de bitmap 2D em um elemento <canvas>. Veja nosso tutorial do Canvas para saber mais.
permite desenhar imagens usando comandos que desenham formas, padrões e linhas específicos para produzir uma imagem. Os comandos SVG são formatados como XML e podem ser incorporados diretamente em uma página da Web ou podem ser colocados na página usando o elemento <img>, como qualquer o