background-color

A propriedade CSS background-color define a cor de fundo de um elemento.

/* Valores em chaves */
background-color: red;
background-color: indigo;

/* Valores em Hexadecimais */
background-color: #bbff00;    /* Totalmente opaco */
background-color: #bf0;       /* Forma abreviada totalmente opaco */
background-color: #11ffee00;  /* Totalmente transparente */
background-color: #1fe0;      /* Forma abreviada totalmente transparente */
background-color: #11ffeeff;  /* Totalmente opaco */
background-color: #1fef;      /* Forma abreviada totalmente opaco */

/* Valores em RGB */
background-color: rgb(255, 255, 128);        /* Totalmente opaco */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparente */

/* Valores em HSL */
background-color: hsl(50, 33%, 25%);         /* Totalmente opaco */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparente */

/* Valores em chaves especiais */
background-color: currentcolor;
background-color: transparent;

/* Valores globais */
background-color: inherit;
background-color: initial;
background-color: unset;

A propriedade background-color recebe um único valor <color>.

<color>

A cor uniforme de fundo. É renderizado atrás de qualquer background-image (en-US) especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.

É importante assegurar que o contraste entre a cor de fundo e a cor do texto colocado sobre ele é alta o suficiente para pessoas com condições de baixa visão possam ler o conteúdo da página.

A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo.  Para atender às atuais Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), uma proporção de 4.5:1 é necessária para conteúdo de texto e 3:1 para textos maiores como títulos. Texto grande é definido como 18.66px e negrito ou maior, ou 24px ou maior.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0

<color>
where 
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
where 
<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
where 
<alpha-value> = <number> | (en-US) <percentage> (en-US)
<hue> = <number> | (en-US) <angle> (en-US)

<div class="exampleone">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exampletwo">
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div class="exemplothree">
  Lorem ipsum dolor sit amet, consectetuer
</div>

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

• Multiple backgrounds
• The <color> data type
• Other color-related properties: color, border-color (en-US), outline-color (en-US), text-decoration-color (en-US), text-emphasis-color (en-US), text-shadow, caret-color (en-US), and column-rule-color (en-US)
• Applying color to HTML elements using CSS