Bitácora Parcial 3
Colores en páginas web
Ideas principales
- En la web se utiliza el modelo RGB, que trabaja añadiendo luz. Cada color es representado por una combinación de los tres colores: rojo, verde y azul, con valores de 0 a 255.
- El canal alfa puede añadir transparencia (de 0 a 1).
- Hexadecimal: Los colores se representan mediante un código de 6 caracteres en base 16. Cada par de caracteres representa un color: rojo, verde y azul.
- Htsl: Utiliza el círculo cromático para definir colores:
- Hue (Matiz) de 0° a 360° (Rojo = 0°, Verde = 120°, Azul = 240°).
- Saturation (Saturación) de 0% a 100% (0% = gris, 100% = máximo color).
- Lightness (Luminosidad) de 0% a 100% (0% = negro, 100% = blanco).
- Los colores transmiten sensaciones y emociones (tranquilidad, seguridad, confianza, pasión, etc.), y estas pueden influir en la percepción del sitio web.
- Es importante elegir colores que se alineen con el mensaje y el público objetivo de la página web.
- Generalmente, se recomienda usar 2 o 3 colores principales y trabajar con diferentes tonalidades o variaciones de estos.
- El contraste se crea combinando colores no relacionados para resaltar textos o imágenes.
- La paleta de colores seleccionada debe aplicarse uniformemente en todo el sitio web para dar cohesión y unidad.
Apuntes de la clase
Se trabajará con el modelo rgb o standard rgb, aquí se agrega la luz y en cmyk se va quitando la luz. El color no existe sin la luz, ya que es el reflejo de la luz. En una pantalla siempre se maneja en rgb. En la web hay 7 formas de representar colores
Hexadecimal
con el # trabaja en base de 16 caracteres (0123456789ABCDEF) se va combinando para formar un color. El cero representa que no hay color (000000- negro), el f muestra el máximo del tono del color que se utilice. Los 6 caracteres están divididos de 2 en 2 los primero dos representan el color rojo (#ff0000), los siguientes 2 representan el verde (#00ff00- verde) y los últimos dos representan el azul (#0000ff).
Rgb
Son tres colores; red(0-255), green (0-255), blue (0-255) cada uno nos da 256 valores. (256x256x256) Nos da en total 16,777,216 de colores El canal alfa, se agrega de 0 al 1 siendo el 0 totalmente transparente, teniendo diferentes variaciones hasta el 1, siendo el color sólido. Entre más transparencia el 1 va bajando
El color rojo seria rgb(255,0,0), el verde rgb(0,255,0) y el azul rgb(0,0,255)
Hsl y hsla
En base al círculo cromático, justo en el centro está un gris al 50%, en las orillas tiene la máxima intensidad, del centro a la orilla se maneja la saturación y hacia arriba y abajo la luminosidad. La luminosidad arriba tiende al color blanco y se le agrega la luminosidad al color y hacia abajo tiende al color negro quitándole la luminosidad.
Se escribe en grados ya que es un círculo, el hue representado del 0 a 360grados, el rojo está en el 0, el verde en 120 y el azul en 240. La saturación está representada del 0 al 100%, donde encontramos el cero en el centro, pero no es el color negro ya que depende de la luminosidad.
COLOR Y PAGINA WEB
Los colores en un sitio web pueden ser una herramienta muy eficaz para lograr que los visitantes se sientas cómodos e interactúen con el sitio web, pero, también una paleta de colores errónea puede hacer que el visitante no permanezca en el sitio ni siquiera unos segundos. A pesar de que no somos muy conscientes de esto cuando visitamos un sitio web, los colores- juntos al contenido y los otros elementos visuales- son los que determinan si nos quedamos o nos vamos.
Identificar el público objetivo de tu página web, la mayoría de los colores están asociados a determinados grupos. La página tiene ante todo que atraer y convencer a la visita, por lo que hay que seleccionar colores con los que la visita se sienta identificada.
-colores de la misma gama cromática: es decir, diferentes tonos de un mismo color.
-colores complementarios: aquellos situados próximos en la gama cromática
-colores opuestos: son aquellos situados justo en el lado opuesto de la gama cromática y que ayudan al contraste.
El contraste de color se produce al combinar dos colores que no están relacionados. Esto permite, por ejemplo, resaltar textos o imágenes. Combina colores claros y colores oscuros para lograr este efecto visual.
Se debe elegir una paleta de colores y usarla en todo el sitio de esta manera se le da uniformidad y sentido de unidad al sitio web. No se debe usar demasiados colores diferentes, con dos o tres es suficiente. Todo el resto debería estar en la gama de estos colores principales.
Resumen
RGB-Se utiliza en pantallas web, con valores de 0 a 255 para cada color.Se puede agregar un canal alfa para ajustar la transparencia.
Hexadecimal: Usa 6 caracteres (base 16) para representar colores, con 2 caracteres para cada color primario (rojo, verde y azul).
HSL (Tono, Saturación, Luminosidad): Basado en el círculo cromático, con valores para: Tono (0°-360°), Saturación (0%-100%) y Luminosidad (0%-100%).
Los colores transmiten emociones y sensaciones (tranquilidad, confianza, pasión, etc.) y deben ser elegidos según el mensaje y el público objetivo de la página web. Armonía de colores: Utilizar colores de la misma gama, colores complementarios o colores opuestos para crear contrastes y efectos visuales. Uso moderado de colores: Limitar el uso de colores a 2 o 3 principales para mantener coherencia y no sobrecargar la página.