Colores CSS
Los colores en CSS pueden ser especificados por los métodos siguientes:
- colores hexadecimales
- Los colores RGB
- colores RGBA
- colores HSL
- colores HSLA
- nombres de colores predefinidos / Cross-browser
Colores hexadecimales
valores de color hexadecimales son compatibles con todos los navegadores.
Un color hexadecimal se especifica con: #RRGGBB, donde el RR (red) , GG (green) y BB (blue) números enteros hexadecimales especificar los componentes del color. Todos los valores deben estar entre 00 y FF.
Por ejemplo, el valor # 0000ff se representa como azul, debido a que el componente azul se establece en su valor más alto (ff) y los otros se establece en 00.
Ejemplo
Definir diferentes colores HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Inténtalo tú mismo " Colores RGB
valores de color RGB son compatibles con todos los navegadores.
Un valor de color RGB se especifica con: rgb(red, green, blue) . Cada parámetro (rojo, verde, y azul) define la intensidad del color y puede ser un número entero entre 0 y 255 o un valor de porcentaje (from 0% to 100%) .
Por ejemplo, el rgb(0,0,255) valor se representa como azul, azul porque el parámetro se establece en su valor más alto (255) y los otros se establece en 0.
Además, los siguientes valores definen igual de color: rgb(0,0,255) y rgb(0%,0%,100%) .
Ejemplo
Definir diferentes colores 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 */
Inténtalo tú mismo " RGBA Colores
valores de color RGBA se admiten en IE9 +, Firefox 3, Chrome, Safari y Opera en 10+.
valores de color RGBA son una extensión de los valores de color RGB con un canal alfa - que especifica la opacidad del objeto.
Un valor de color RGBA se especifica con: rgba(red, green, blue, alpha) . El parámetro alfa es un número entre 0,0 (fully transparent) y 1.0 (fully opaque) .
Ejemplo
Definir diferentes colores RGB con la opacidad:
#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 */
Inténtalo tú mismo " HSL Colores
valores de color HSL se admiten en IE9 +, Firefox, Chrome, Safari y Opera en 10+.
HSL significa matiz, saturación y luminosidad - y representa una representación cilíndrica coordenada de colores.
Un valor de color HSL se especifica con: hsl(hue, saturation, lightness) .
Hue es una medida de la rueda de color (from 0 to 360) - 0 (or 360) es de color rojo, verde es 120, 240 es azul. La saturación es un valor porcentual; 0% significa un tono de gris y el 100% es el color. La ligereza es también un porcentaje; 0% es negro, el 100% es de color blanco.
Ejemplo
Definir diferentes colores 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 */
Inténtalo tú mismo " HSLA Colores
valores de color HSLA se admiten en IE9 +, Firefox 3, Chrome, Safari y Opera en 10+.
valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del objeto.
Un valor de color HSLA se especifica con: hsla(hue, saturation, lightness, alpha) , donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0,0 (fully transparent) y 1.0 (fully opaque) .
Ejemplo
Definir diferentes colores HSL con la opacidad:
#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 */
Inténtalo tú mismo " Predefinida / Cross-browser nombres de colores
140 nombres de colores están predefinidos en la especificación de color HTML y CSS.
Mire la tabla de nombres de colores predefinidos .