Cor - CSS-Tricks

Anonim

A colorpropriedade em CSS define a cor do texto e as decorações do texto.

p ( color: blue; )

Valores

A colorpropriedade pode aceitar qualquer valor de cor CSS.

  • Cores nomeadas: por exemplo, “aqua”.
  • Cores hexadecimais: por exemplo, # 00FFFF ou # 0FF.
  • Cores RGB e RGBa: por exemplo, rgb (0, 255, 255) e rgba (0, 255, 255, .5).
  • Cores HSL e HSLa: por exemplo, hsl (180, 100%, 50%) e hsla (180, 100%, 50%, 0,5).

Cores Nomeadas

p ( color: aqua; )

As cores nomeadas também são conhecidas como cores de palavras-chave, cores X11 ou cores SVG. Todas as cores nomeadas são opacas por padrão transparent, exceto , que é totalmente transparente ou “claro”. Consulte nosso snippet de cores nomeadas e equivalentes hexadecimais para obter uma lista das cores nomeadas.

Cores hexadecimais

As cores hexadecimais, ou cores hexadecimais, são especificadas com valores alfanuméricos. O primeiro par de caracteres representa o valor vermelho, o segundo par representa o valor verde e o terceiro par representa o valor azul, todos em um intervalo de 00 a FF.

p ( color: #00FFFF; )

Se os pares de valores de vermelho, azul e verde forem todos duplos, você pode abreviar o valor hexadecimal para uma abreviação de 3 caracteres - por exemplo, # 00FFFF pode ser abreviado para # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Cores RGB e RGBa

As cores RGB são especificadas com uma lista separada por vírgulas de três valores numéricos (variando de 0 a 255) ou valores percentuais (variando de 0% a 100%). O primeiro valor representa o valor vermelho, o segundo representa o valor verde e o terceiro representa o valor azul. As cores RGB são opacas por padrão.

p ( color: rgb(0, 255, 255); )

RGBa adiciona um quarto valor para o canal alfa, que define a opacidade da cor. O valor alfa é um número dentro de um intervalo de 0,0 (totalmente transparente) a 1 (totalmente opaco).

p ( color: rgba(0, 255, 255, .5); )

Cores HSL e HSLa

As cores HSL são especificadas com uma lista separada por vírgulas de três valores: o grau de matiz (um número variando de 0 a 360), uma porcentagem de saturação (variando de 0% a 100%) e uma porcentagem de luminosidade (variando de 0% a 100%). As cores HSL são opacas por padrão.

p ( color: hsl(180, 100%, 50%); )

HSLa adiciona um quarto valor para o canal alfa para controlar a opacidade da cor. O valor alfa é um número dentro de um intervalo de 0,0 (totalmente transparente) a 1 (totalmente opaco).

p ( color: hsla(180, 100%, 50%, .5); )

Demo

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

Notas de Uso

As colorcascatas de propriedade. Se você definir no corpo, todos os elementos descendentes herdarão essa cor, a menos que tenham sua própria cor definida na folha de estilo do agente do usuário.

As bordas são herdadas, a colormenos que um valor de cor seja especificado na borderdeclaração.

A colorpropriedade se aplica a text-decorationlinhas. Em navegadores que suportam a text-decoration-colorpropriedade, você pode especificar cores diferentes para o texto e suas linhas de decoração.

colortambém se aplica a marcadores de item de lista (como marcadores e números). Você não pode definir uma cor separada para um marcador de item de lista, mas pode substituí-lo por uma imagem com a list-stylepropriedade.

Embora as cores nomeadas e hexadecimais não tenham canais alfa, você pode definir sua opacidade com a opacitypropriedade em todos os navegadores atuais e no IE9 +.

Relacionado

  • font
  • text-decoration-color
  • opacity

Mais Informações

  • color na especificação W3C
  • color em MDN
  • Artigo CSS-Tricks Yay para HSLa

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum Nenhum Nenhum Nenhum Nenhum * Nenhum Nenhum

* HSL, HSLa e RGBa são suportados no IE9 +.