Los colores en CSS

Aquí, vamos a aprender acerca de los colores en CSS (Cascading Style Sheet) , cómo configurar el color del texto, color de fondo, etc usando CSS.

Con CSS se puede establecer el color de un elemento , de fondo o de texto. El color de fondo se cambia utilizando el atributo background-color. El color del elemento se cambia utilizando el atributo de color .

Colores en CSS pueden ser especificados por el siguiente método,

  1. colores hexadecimales
  2. RGB / colores RGBA
  3. HSL / colores HSLA
  4. predefinidas nombres de colores

1) colores hexadecimales

código hexadecimal se utiliza para denotar RGB (Red Green Blue) componentes de un color en base 16 de la notación hexadecimal. Si ambos valores en cada uno de los tres emparejamientos RGB ( R, G, y B ) son los mismos, entonces el código de color se puede acortar en tres caracteres (el primer dígito de cada conexión).

Ejemplo:

body { 
background-color: #de1205;
}

2) RGB / RGBA colores

RGB también se conoce como RGBA soportes class Rojo, Verde, y Azul, y requiere tres valores independientes entre 0 y 255, puso entre corchetes, que se corresponden con los valores de color decimales class respectivamente rojo, verde y azul.

RGBA le permite añadir un alfa parámetro entre 0,0 y 1,0 para definir la opacidad .

Ejemplo:

div { 
background-color: rgb(0, 0, 0);
color : rgba(255, 0, 0, 0.5);
}

3) HSL / HSLA Colors

Es una forma de declarar un color es utilizar HSL o HSLA y es similar a RGB y RGBA . HSL se encuentra class matiz, saturación y luminosidad .

Hue es una medida de la rueda de color (de 0 a 360). Saturación es un porcentaje entre 0% y 100%. levedad es también un porcentaje entre 0% y 100%.

HSLA le permite añadir un parámetro alfa adicional entre 0,0 y 1,0 para definir la opacidad.

Ejemplo:

#r1 
{
background-color: hsla(120, 90%, 70%, .3);
}

4) colores predefinidos

140 nombres de colores están predefinidos en la especificación de color HTML y CSS.

el ejemplo de algunos de los colores con los códigos hexadecimales son los siguientes,

Colors in CSS - 4


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *