path: root/files/pt-pt/learn/css/building_blocks/values_and_units/index.html

---
title: Cor
slug: Web/CSS/Como_começar/Cor
tags:
  - 'CSS:Como_começar'
translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
translation_of_original: Web/Guide/CSS/Getting_started/Color
---
<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>

<p>Esta página explica mais sobre como você pode especificar cores no CSS.</p>

<p>Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.</p>

<h2 id="Informa.C3.A7.C3.A3o:_Cor" name="Informa.C3.A7.C3.A3o:_Cor">Informação: Cor</h2>

<p>Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:</p>

<table style="border: 0px; margin-left: 2em; text-align: right;">
 <tbody>
  <tr>
   <td> </td>
   <td>black</td>
   <td style="width: 2em; height: 2em; background-color: black;"> </td>
   <td>gray</td>
   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
   <td>silver</td>
   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
   <td>white</td>
   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
  </tr>
  <tr>
   <td>primárias</td>
   <td>red</td>
   <td style="width: 2em; height: 2em; background-color: red;"> </td>
   <td>lime</td>
   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
   <td>blue</td>
   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
  </tr>
  <tr>
   <td>secundárias</td>
   <td>yellow</td>
   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
   <td>aqua</td>
   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
   <td>fuchsia</td>
   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
  </tr>
  <tr>
   <td> </td>
   <td>maroon</td>
   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
   <td>orange</td>
   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
   <td>olive</td>
   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
   <td>purple</td>
   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
   <td>green</td>
   <td style="width: 2em; height: 2em; background-color: green;"> </td>
   <td>navy</td>
   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
   <td>teal</td>
   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
  </tr>
 </tbody>
</table>

<p> </p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Seu navegador pode suportar muitas cores nomeadas, como:
    <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
     <tbody>
      <tr>
       <td>dodgerblue</td>
       <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
       <td>peachpuff</td>
       <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
       <td>tan</td>
       <td style="width: 2em; height: 2em; background-color: tan;"> </td>
       <td>firebrick</td>
       <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
       <td>aquamarine</td>
       <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
      </tr>
     </tbody>
    </table>

    <p>Para detalhes sobre esta lista extendida, veja: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><br>
 Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos <em>hexadecimais</em> na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:</p>

<table style="border: 0px; margin-left: 2em;">
 <tbody>
  <tr>
   <td>black</td>
   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
   <td><code>#000</code></td>
  </tr>
  <tr>
   <td>pure red</td>
   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
   <td><code>#f00</code></td>
  </tr>
  <tr>
   <td>pure green</td>
   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
   <td><code>#0f0</code></td>
  </tr>
  <tr>
   <td>pure blue</td>
   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
   <td><code>#00f</code></td>
  </tr>
  <tr>
   <td>white</td>
   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
   <td><code>#fff</code></td>
  </tr>
 </tbody>
</table>

<p><br>
 Para a paleta total, especifique dois digitos hexadecimais por cada componente:</p>

<table style="border: 0px; margin-left: 2em;">
 <tbody>
  <tr>
   <td>black</td>
   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
   <td><code>#000000</code></td>
  </tr>
  <tr>
   <td>pure red</td>
   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
   <td><code>#ff0000</code></td>
  </tr>
  <tr>
   <td>pure green</td>
   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
   <td><code>#00ff00</code></td>
  </tr>
  <tr>
   <td>pure blue</td>
   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
   <td><code>#0000ff</code></td>
  </tr>
  <tr>
   <td>white</td>
   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
   <td><code>#ffffff</code></td>
  </tr>
 </tbody>
</table>

<p>Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
 <caption>Exemplos</caption>
 <tbody>
  <tr>
   <td>Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
     <tbody>
      <tr>
       <td>Começe com vermelho puro:</td>
       <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
       <td><code>#f00</code></td>
      </tr>
      <tr>
       <td>Para tornar isto mais pálido, adicione um pouco de verde e azul:</td>
       <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
       <td><code>#f77</code></td>
      </tr>
      <tr>
       <td>Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:</td>
       <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
       <td><code>#fa7</code></td>
      </tr>
      <tr>
       <td>Para tornar isto mais escuro, reduza todos os componentes:</td>
       <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
       <td><code>#c74</code></td>
      </tr>
      <tr>
       <td>Para reduzir a saturação, faça os componentes mais parecidos:</td>
       <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
       <td><code>#c98</code></td>
      </tr>
      <tr>
       <td>Se você quiser deixar todos os componentes iguais, você obterá cinza:</td>
       <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
       <td><code>#ccc</code></td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
  <tr>
   <td>Para uma sombra pastel como azul pálido:
    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
     <tbody>
      <tr>
       <td>Começe com branco puro:</td>
       <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
       <td><code>#fff</code></td>
      </tr>
      <tr>
       <td>Reduza um pouco os outros componentes:</td>
       <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
       <td><code>#eef</code></td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.
    <p>Por exemplo, este marrom (vermelho escuro):</p>

    <div style="width: 24em;">
    <pre>
rgb(128, 0, 0)
</pre>
    </div>

    <p><br>
     Para maiores detalhes sobre como especificar cores, veja: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> na CSS Specification.</p>

    <p>Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> na CSS Specification.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Propriedades_de_cor" name="Propriedades_de_cor">Propriedades de cor</h3>

<p>Você já usou a propriedade <code>color</code> para textos.</p>

<p>Você também já usou a propriedade <code>background-color</code> para mudar elementos de fundo.</p>

<p>Fundos podem ser configurados para <code>transparent</code> para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>As caixas de <strong>Exemplo</strong> neste tutorial usam este fundo amarelo pálido:
    <div style="width: 24em;">
    <pre>
background-color: #fffff4;
</pre>
    </div>

    <p>As caixas de <strong>Mais detalhes</strong> usam esta paleta cinza:</p>

    <div style="width: 24em;">
    <pre>
background-color: #f4f4f4;
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor" name="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor">Ação: Usando códigos de cor</h2>

<p>Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)</p>

<div style="width: 32em;">
<pre class="eval">/*** CSS Tutorial: Página de Cor ***/

/* Fonte da Página */
body {font: 16px "Comic Sans MS", cursive;}

/* Parágrafos */
p {color: blue;}
#first {font-style: italic;}

/* Letras Iniciais */
strong {
  color: red;
  <strong>background-color: #ddf;</strong>
  font: 200% serif;
  }

.carrot {color: red;}
.spinach {color: green;}
</pre>
</div>

<p>Atualize seu navegador para ver o resultado:</p>

<table>
 <tbody>
  <tr>
   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
  </tr>
  <tr>
   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
 <caption>Desafio</caption>
 <tbody>
  <tr>
   <td>No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.
    <p>(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>

<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cor" title="Talk:pt/CSS/Como_começar/Cor">Discussão</a>.</p>

<p>Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.</p>

<p>A próxima página explica como você pode fazer exceções para separar rigorosamente: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong></p>

<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>