Cor de fundo - CSS-Tricks | CSS Almanac 2025

A propriedade background-color em CSS aplica cores sólidas como fundo em um elemento. Aqui está um exemplo:

html ( background-color: #82a43a; )

O exemplo usado acima ( #82a43a) é chamado de código hexadecimal e é uma das várias maneiras que o CSS usa para representar uma única cor. Existem várias maneiras de encontrar os códigos hexadecimais corretos. Qualquer pessoa que tenha usado uma ferramenta de design viu um seletor de cores semelhante a este:

Observe o código hexadecimal no meio inferior.

Os códigos hexadecimais são uma forma de declarar uma cor em CSS. Também há um monte de nomes que você pode usar, por exemplo:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Essas cores não são muito flexíveis, mas podem ser úteis em caso de problemas. Eles são mais fáceis de lembrar do que os códigos hexadecimais, e há uma tonelada deles.

Outra maneira de declarar uma cor é usar RGB, RGBa, HSL ou HSLa:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Ao contrário dos códigos hexadecimais, esses valores permitem transparência (alfa), que pode ser muito útil. Saiba mais sobre RGBa ou HSLa.

Demo

Veja a cor de fundo da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Relacionado

anexo de fundo
clipe de fundo
imagem de fundo
origem do fundo
posição de fundo
fundo de repetição
tamanho do fundo

Mais recursos

Especificação CSS3
MDN

Suporte para navegador

Os códigos hexadecimais e a maioria dos nomes de cores funcionam em qualquer lugar. RGBa e HSLa têm seus próprios conjuntos de suporte de navegador: RGBa e HSLa.