---
title: Propriedade color do CSS
slug: Web/CSS/color
tags:
  - CSS
  - HTML
  - Layout
  - Web
  - color
translation_of: Web/CSS/color
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">A propriedade <strong><code>color</code></strong> do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da {{cssxref("currentcolor")}}, no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade {{cssxref("border-color")}}.</span></p>

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

<p class="hidden"> </p>

<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, acesse <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma sugestão.</p>

<p>Para uma visão geral de como usar a propriedade color e semelhantes no HTML, veja <a href="/en-US/docs/Web/CSS/Como_começar/Cor">Cor - CSS, como começar</a>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css no-line-numbers">/* Valores com Palavras-chave */
color: white; /* Aqui será definida a cor atual*/

/* Valores com Palavras-chave */
/* color define a cor do texto no elemento*/
color: red;    /* Define como 'vermelho'*/
color: blue;   /* Define como 'laranja'*/
color: cyan;   /* Define como 'verde-água'*/

/* Obs: Utilizando "light" antes da cor, ela ficará clara.
   ex: lightblue;
   E utilizando "dark", ela ficará mais escura.
   ex: darkblue;
*/

/* Cores com valores Hexa-decimais,
ou seja de 1 à 15, sendo de 0 à 9 normais,mas de 10 à 15
são as letras do alfabeto , logo de "a" à "f". */

color: #090;
color: #0099fg;
color: #090a;
color: #0099bcaa;

/* Valores "rgb" ou "rgba",
ou seja, o primeiro é vermelho, o segundo é verde e
o terceiro é azul, o "a" é o nível de transparência da cor,
e vai de 0 à 1;
Ex: preto meio transparênte = rgba(255,255,255,0.5); */

color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* Valores "hsl()", sendo
hsl(<em>num da cor"1-369"</em>, <em>saturação"0-100"</em>, <em>luminosidade"<em>0-100")</em></em>*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Valores globais, pega algun valor já definido,
para todo o &lt;body&gt;, por exemplo. */
color: inherit;
color: initial;
color: unset;
</pre>

<p>A propriedade <code>color</code> é especificada somente com o valor {{cssxref("&lt;color&gt;")}} .</p>

<p>Note que o valor sempre será uniforme para {{cssxref("color")}}. Não podendo ter  {{cssxref("&lt;gradient&gt;")}}(gradiente), que é atualmente um tipo para {{cssxref("&lt;image&gt;")}}.</p>

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

<dl>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd> Define a cor dos caracteres presentes no elemento a ser estilizado.</dd>
</dl>

<h3 id="Syntaxe_formal">Syntaxe formal</h3>

<pre class="syntaxbox">p { color: gray; }</pre>

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

<p>A seguir, você verá várias maneira de tornar a cor de um texto num parágrafo vermelha:</p>

<pre class="brush: css">p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

/* 50% translúcido(transparênte) */
p { color: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }
</pre>

<h2 id="Preocupações_com_acessibilidade">Preocupações com acessibilidade</h2>

<p>É extremamente crucial que todo site, contenha um contraste de cores adequado, para que pessoas com níveis baixos de visão tenha um aboa experiência ao utilizar o site.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
   <td>{{Spec2('CSS4 Colors')}}</td>
   <td>Adiciona syntaxes sem emendas para as funções <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> e <code>hsla()</code> . Permite valores alpha em <code>rgb()</code> e <code>hsl()</code>, dirando <code>rgba()</code> e <code>hsla()</code> em (descontinuada).<br>
    Adiciona a palavra-chave <code>rebeccapurple</code>.<br>
    Adiciona valores de cores hexa-decimais de 4 à 8 dígitos, where the last digit(s) represents the alpha value.<br>
    Adiona as funcões <code>hwb()</code>, <code>device-cmyk()</code> e <code>color()</code> .</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Define <code>color</code> como animável.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Deprecia as cores do Sistema. Adiciona cores <a href="/en-US/docs/Web/SVG">SVG</a>. Adicionando as funções <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adiciona a cor laranja <code>orange</code> color e o Sistema de Cores.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição Inicial</td>
  </tr>
 </tbody>
</table>

<div>{{cssinfo}}</div>

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

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

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

<ul>
 <li><a href="/en-US/docs/Web/CSS/color_value">Tipo de dado &lt;color&gt; no CSS.</a></li>
</ul>