La paleta de colores de CSS contiene una amplia lista de nombres
que pueden seleccionarse de manera fácil con identificaciones que
soportan todos los navegadores modernos. El color red está considerado
en las diferentes notaciones de la paleta de colores: en |rgb(255,0,0) (Red, Green, Blue)|,
#ff0000 en la Hexadecimal|, en la| hsl (0, 100%, 50%), (Hue, Saturation, Lightness)| y
en la |hwb(0 0% 0%), (Hue, Whiteness, Blackness)|.
Estas diferentes notaciones permiten flexibilidad y precisión al especificar colores en CSS, cada una
con sus propias ventajas dependiendo del contexto y la necesidad de diseño.
Los valores hexadecimales son uno de los métodos más comunes para especificar colores en CSS, utilizando una combinación de dígitos y letras.
El modelo de color RGB define colores en términos de los niveles de rojo, verde y azul.
Funcionalidad:
Es flexible. Facilita el ajuste fino de los colores mediante la manipulación
de sus componentes individuales.
Transparencia: Permite incluir la opacidad con RGBA.
En este ejemplo empleamos una combinación de colores rgb(255, 87, 51, 0.5); con una opacidad de 0.5
El modelo HSL define colores en términos de matiz (hue), saturación (saturation) y luminosidad (lightness).
Funcionalidad:
Intuitivo: Más intuitivo para seleccionar colores basados en la rueda de colores.
Transparencia: También permite incluir la opacidad con HSLA.
En el ejemplo la combinación hsl(9, 100%, 60% , 0.7) le asiganmos una opacidad de 0.7
CSS permite la creación de gradientes de color, que son transiciones suaves entre dos o más colores.
Funcionalidad:
Diseños Avanzados: Ideal para fondos y efectos visuales complejos.
Flexibilidad: Soporta gradientes lineales y radiales.
Este es un ejemplo de Gradientes Lineales
Este es un ejemplo de Gradientes Radiales en un botón
This is an example with a button using CSS variables.
© 2024 My Website
Las variables CSS permiten definir valores reutilizables que se pueden aplicar en todo el documento.
Funcionalidad:
Mantenimiento: Facilita la gestión y el mantenimiento de los esquemas de color.
Consistencia: Asegura la consistencia de los colores en todo el sitio web.
This is an example using CurrentColor.
La palabra clave currentColor permite usar el valor actual de la propiedad color de un
elemento en otras propiedades.
Funcionalidad:
Reutilización: Útil para mantener la coherencia del color sin duplicar valores.
Flexibilidad: Se adapta automáticamente si la propiedad color cambia.