Como usar valores de cores nos CSS3

CSS3 suporta um número de sistemas de valores de cor. A única exigência é que o navegador também suporta o sistema de cores. Aqui estão os sistemas de cores que a maioria dos navegadores suportam:

  • Vermelho Verde Azul (RGB): Use o rgb () método quando descrevendo este valor cor que usa três números entre 0 e 255 para especificar a quantidade de vermelho, verde e azul para usar.

  • canal Vermelho Verde Azul Alpha (RGBA): Use o rgba () ao descrever este método de valor de cor. Os três primeiros números são simplesmente vermelho, verde e azul. O quarto número, canal alfa (Transparência relativa), é um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Você deve ter IE9 +, Firefox 3+, Chrome, Safari ou Opera 10+ para usar este esquema de valor de cor.

  • Hue Saturation Lightness (HSL): Use o hsl () método quando descrevendo este valor cor que consiste em três números.

    Matiz é um valor entre 0 e 360 ​​que descreve a posição de uma cor na roda de cores: vermelho é 0 (ou 360), o verde é 120, e azul é de 240. Saturação (A intensidade da cor ou a escuridão) é um valor percentual entre 0 (escala de cinza) e 100 (cor pleno). Leveza é uma percentagem entre 0 (preto) e 100 (branco).

  • canal de Hue Saturation Lightness Alpha (HSLA): Use o HSLA () método quando descrevendo este valor cores que usa os mesmos três primeiros números como um valor HSL. O quarto número, canal alfa, é um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Você deve ter IE9 +, Firefox 3+, Chrome, Safari ou Opera 10+ para usar este esquema de valor de cor.

Tentando entender como valores de cor interagem pode ser difícil. o HTML Color Mixer ajuda a ver como as várias opções de cores interagem, tornando-o mais fácil de escolher boas combinações de cores.

menu