---
title: background-color
slug: Web/CSS/background-color
translation_of: Web/CSS/background-color
---
<div>{{CSSRef}}</div>

<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-color</code></strong> define a cor de fundo de um elemento.</p>

<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>



<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: css no-line-numbers notranslate">/* 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;</pre>

<p>A propriedade <code>background-color</code> recebe um único valor <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><a id="&lt;color>"></a>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>A cor uniforme de fundo. É renderizado atrás de qualquer {{cssxref("background-image")}} especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.</dd>
</dl>

<h2 id="Acessibilidade">Acessibilidade</h2>

<p>É 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.</p>

<p>A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo.  Para atender às atuais <a href="https://www.w3.org/WAI/intro/wcag">Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)</a>, 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.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Definição_formal">Definição formal</h2>

<p>{{cssinfo}}</p>

<h2 id="Sintaxe_formal">Sintaxe formal</h2>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div class="exampleone"&gt;
  Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;

&lt;div class="exampletwo"&gt;
  Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;

&lt;div class="exemplothree"&gt;
  Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[2,7,12]; notranslate">.exampleone {
  background-color: teal;
  color: white;
}

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

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples", 200, 150)}}</p>

<ul>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Comment</th>
   <th scope="col">Feedback</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
   <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("&lt;color&gt;")}}</td>
   <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
   <td>Initial definition</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("css.properties.background-color")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li>
 <li>The {{cssxref("&lt;color&gt;")}} data type</li>
 <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
 <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
</ul>