Valores CSS Cor Legal

Cores CSS

Cores em CSS pode ser especificado pelos seguintes métodos:

cores hexadecimais
cores RGB
cores RGBA
cores HSL
cores HSLA
nomes de cores pré-definidas / Cross-browser

hexadecimais Cores

valores de cor hexadecimais são suportados em todos os principais navegadores.

Uma cor hexadecimal é especificado com: #RRGGBB, onde o RR (red) , GG (green) e BB (blue) inteiros hexadecimais especificar os componentes da cor. Todos os valores devem estar entre 00 e FF.

Por exemplo, o valor # 0000ff é processado como azul, porque o componente azul está definido para seu valor mais alto (ff) e os outros estão definidas para 00.

Exemplo

Definir diferentes cores HEX:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Tente você mesmo "

cores RGB

valores de cor RGB são suportados em todos os principais navegadores.

Um valor de cor RGB é especificado com: rgb(red, green, blue) . Cada parâmetro (vermelho, verde e azul) define a intensidade da cor e pode ser um número inteiro entre 0 e 255 ou um valor de percentagem (from 0% to 100%) .

Por exemplo, o rgb(0,0,255) valor é processado como azul, porque o parâmetro azul está definido para seu valor mais alto (255) e os outros são definidos como 0.

Além disso, os seguintes valores definem igual cor: rgb(0,0,255) e rgb(0%,0%,100%) .

Exemplo

Definir diferentes cores RGB:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Tente você mesmo "

Cores RGBA

valores de cor RGBA são suportados no IE9 +, Firefox 3+, Chrome, Safari e Opera em 10+.

valores de cor RGBA são uma extensão dos valores de cores RGB com um canal alfa - que especifica a opacidade do objeto.

Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha) . O parâmetro alfa é um número entre 0,0 (fully transparent) e 1,0 (fully opaque) .

Exemplo

Definir diferentes cores RGB com opacidade:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Tente você mesmo "

HSL Cores

valores de cor HSL são suportados no IE9 +, Firefox, Chrome, Safari e Opera em 10+.

HSL significa matiz, saturação e leveza - e representa uma representação cilíndrica coordenada de cores.

Um valor de cor HSL é especificado com: hsl(hue, saturation, lightness) .

Hue é um grau na roda de cores (from 0 to 360) - 0 (or 360) é vermelho, 120 é verde, 240 é azul. A saturação é um valor percentual; 0% significa um tom de cinza e 100% é a cor completa. Leveza é também uma percentagem; 0% é preto, 100% é branco.

Exemplo

Definir diferentes cores HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

Tente você mesmo "

HSLA Cores

valores de cor HSLA são suportados no IE9 +, Firefox 3+, Chrome, Safari e Opera em 10+.

valores de cor HSLA são uma extensão de valores de cor HSL com um canal alfa - que especifica a opacidade do objecto.

Um valor de cor HSLA é especificado com: hsla(hue, saturation, lightness, alpha) , em que o parâmetro alfa define a opacidade. O parâmetro alfa é um número entre 0,0 (fully transparent) e 1,0 (fully opaque) .

Exemplo

Definir diferentes cores HSL com opacidade:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Tente você mesmo "