Sistema de COLORES en CSS

En CSS, hay varios sistemas de colores con los que puedes trabajar para definir los colores de tus elementos. Algunos de los sistemas de colores más comunes en CSS son:

Vamos a representar el color VERDE en los diferentes SISTEMAS DE COLOR

Para no aburrirles solo pondré el CSS

1. RGB (Red, Green, Blue): El sistema RGB define los colores mediante la combinación de los componentes de rojo, verde y azul en una escala de 0 a 255. Por ejemplo, rgb(255, 0, 0) representa el color rojo puro, mientras que rgb(0, 255, 0) representa el verde puro y rgb(0, 0, 255) representa el azul puro. Puedes utilizar también la notación abreviada de tres dígitos, como #F00 para el rojo.

div {
width: 100px;
height: 100px;
background-color: rgb(0, 128, 0);
}

1. HEX (Hexadecimal): El sistema hexadecimal también se basa en la combinación de los componentes rojo, verde y azul, pero utiliza una notación de valores hexadecimales. Los valores hexadecimales van de 00 a FF, lo que representa los valores de 0 a 255 en decimal. Por ejemplo, #FF0000 representa el rojo puro, #00FF00 representa el verde puro y #0000FF representa el azul puro.

div {
width: 100px;
height: 100px;
background-color: #008000;
}

1. HSL (Hue, Saturation, Lightness): El sistema HSL representa los colores mediante el matiz (Hue), la saturación (Saturation) y la luminosidad (Lightness). El matiz se define en grados, la saturación y la luminosidad se representan en porcentajes. Por ejemplo, hsl(0, 100%, 50%) representa el rojo puro, hsl(120, 100%, 50%) representa el verde puro y hsl(240, 100%, 50%) representa el azul puro.

div {
width: 100px;
height: 100px;
background-color: hsl(120, 100%, 25%);
}

1. RGBA (Red, Green, Blue, Alpha): Es similar al sistema RGB, pero incluye un componente adicional llamado alfa (Alpha) que representa la transparencia del color. El valor del alfa va de 0 a 1, donde 0 es completamente transparente y 1 es completamente opaco. Por ejemplo, rgba(255, 0, 0, 0.5) representa el rojo semi-transparente.

div {
width: 100px;
height: 100px;
background-color: rgba(0, 128, 0, 1);
}

1. HSLA (Hue, Saturation, Lightness, Alpha): Es similar al sistema HSL, pero también incluye un componente alfa para la transparencia. Por ejemplo, hsla(0, 100%, 50%, 0.5) representa el rojo semi-transparente.

div {
width: 100px;
height: 100px;
background-color: hsla(120, 100%, 25%, 1);
}

1. Named Colors (Colores nombrados): CSS proporciona una serie de colores predefinidos con nombres, como “red”, “green”, “blue”, etc. Puedes utilizar estos nombres directamente para asignar colores a tus elementos.

div{
width: 100px;
height: 100px;
background-color: green;
}