Share
Bienvenido a la décima lección de nuestra serie Diseño web para niños, todo sobre el color.
En este tutorial nos adentraremos en la teoría del color, diferentes formas de usar colores en nuestro CSS, el significado de ciertos colores y revisaremos cómo seleccionar los colores perfectos para nuestros sitios. Terminaremos con algunos consejos para usar el color en la web..
No olvide hacer cualquier pregunta en la sección de comentarios al final de esta página.!
Teoria del color implica muchas cosas, pero el enfoque principal es observar cómo se comportan los colores entre sí en un diseño. Llamamos a un grupo de colores elegidos para ser usados juntos un Paleta de color. Una paleta de colores bien diseñada tendrá colores que complemento unos a otros y que tengan buena contraste y vitalidad. Hablaremos de lo que significan estas palabras en un momento..
Elegir los colores correctos y saber por qué ciertos colores funcionan y otros no pueden determinar si nuestro diseño funcionará o no. La mala elección del color puede hacer que nuestro sitio sea difícil de usar, o que nuestro texto sea imposible de leer y el usuario abandonará nuestro sitio web.
Antes de adentrarnos demasiado en nuestro tutorial, hablemos sobre algunos términos básicos de color que mencionaremos mucho. Usaremos estos términos para ayudarnos a comprender mejor qué hace que cada color sea tan único.
UNA matiz es(más o menos) el color de un objeto. Cuando nos referimos a las cosas como "rojo" o "amarillo" estamos hablando de su tono.
Color saturación se refiere a lo vívido o fuerte que es un color. Una saturación baja crea un color que aparece lavado, mientras que una saturación alta produce un color muy vivo..
Brillo se refiere a la claridad u oscuridad de un color. Esto va de negro (sin brillo) a blanco (brillo completo).
La rueda de colores está basada en rojo, amarillo y azul y es bastante conocida entre los artistas. Como diseñadores, entender cómo se crean los colores nos ayuda a tener una mejor idea de qué colores complemento entre sí y por qué.
La rueda izquierda en el coche de abajo muestra los tres colores primarios. Con estos tres colores podemos crear todos los demás colores..
El volante a la derecha en el coche de arriba muestra colores secundarios también: colores que fueron creados mezclando los colores primarios. Por ejemplo, azul y amarillo hacen verde, mientras que azul y rojo hacen púrpura.
La rueda de color izquierda en el carro de abajo muestra una capa más: colores terciarios. Estos son colores creados mezclando un primario y secundario color. Por ejemplo, mezclar azul con púrpura crea un púrpura azulado oscuro.
Hay varios sistemas de color (formas de describir los colores) pero solo ciertos sistemas son adecuados para la web.
RGB significa "rojo verde azul" y describe cómo vemos los colores en las pantallas electrónicas. Estos tres colores se pueden combinar para producir muchos otros colores. Los tres valores se enumeran en orden y cada rango va de 0 a 255..
cuerpo fondo: rgb (138,138,226);
El CSS anterior produce un fondo amarillo-naranja en una página. Dentro de los paréntesis puedes ver varios valores de rojo, verde y azul.
Solo hemos utilizado un color hexadecimal Valoramos hasta ahora en esta serie, pero podemos usar un color en nuestro CSS de muchas maneras diferentes.
Visite este sitio para obtener una lista rápida de valores Hex y RGB para 500 colores específicos.
HSL significa "luminosidad de saturación de tono" y el valor se compone de tres números en ese orden.
Podemos declarar el mismo amarillo-naranja en el cuerpo de una página usando un valor HSL en lugar de los valores Hex o RGB del color:
cuerpo fondo: hsl (43,100%, 57%);
El primer valor aquí, 43, representa un ángulo en un círculo de color. Esto es lo que nos da la matiz. El rojo es 0 o 360 grados, mientras que el verde es 120 grados y el azul es 240 grados.
El segundo valor nos da un porcentaje de saturación para el color, con 100% de saturación completa..
El valor final, ligereza, determina qué tan claro u oscuro es el tono. El 100% es blanco, el 0% es negro y cualquier elemento intermedio establecerá una combinación de los dos..
El valor que utilicemos en nuestro CSS depende totalmente de nosotros, pero los valores HSL son más fáciles de adivinar seleccionando un valor de ángulo que se mueve en sentido contrario a las agujas del reloj desde rojo (0) y luego agrega el porcentaje de saturación y luminosidad que deseamos.
Hay un número limitado de colores que tienen nombres que podemos usar en nuestro CSS, no se requieren números.
cuerpo fondo: verde;
Una lista completa de estos nombres de colores se puede encontrar aquí.
Si alguna vez tenemos un valor Hex y necesitamos el valor RGB o HSL de ese color (o viceversa), hay algunas herramientas ingeniosas que harán este trabajo por nosotros, como rgb.to y Colorrrs..
Los colores tienen mucho significado. Dependiendo del país en el que vivas, un cierto color puede usarse para significar peligro, amor, felicidad o maldad. Los colores pueden hacer que los usuarios reaccionen con ciertos sentimientos, por lo que comprender esto es importante para poder comunicar nuestro mensaje al usuario..
Eche un vistazo a esta tabla que muestra cómo los diferentes colores significan diferentes cosas en varias culturas.
Analicemos brevemente algunos significados detrás de los tres colores primarios: amarillo, rojo y azul.
El amarillo atrae la atención de un usuario más que cualquier otro color y generalmente Representa la felicidad y el sol. Por otro lado, el amarillo también puede significar "precaución", como se muestra con muchas señales de tráfico..
El uso de amarillo en la web puede ser muy llamativo, por lo que es mejor no abusar de él y asegurarse de que estamos destacando solo información importante..
Dependiendo del país en el que vivas, el rojo puede significar cualquier cosa, desde peligro, ira, energía, amor y felicidad. Independientemente de lo que pueda significar, el rojo siempre se utiliza para representar un extremo sentimiento o acción.
En diseño web, el rojo se utiliza a menudo para comunicar la eliminación o errores. Es un color intenso que atrae la atención del usuario para que funcione bien como color de acento. Demasiado rojo en un sitio puede ser abrumador y puede ser difícil saber qué es especialmente importante.
El azul representa calma y tristeza en su mayor parte y es un color muy popular en la web..
La sensación creada al utilizar azul en los diseños dependerá en gran medida de la sombra y el tono que seleccionemos. Mientras que un azul oscuro comunicará fuerza y confiabilidad, un azul más claro será más divertido y amigable.
La mayoría de los sitios tendrán una serie de colores que funcionan para dar jerarquía y establecer la sensación de un diseño. Nuestra selección de colores puede ser tan importante como todas las demás decisiones de diseño que hemos tenido que tomar hasta ahora, por lo que debemos tener una buena idea de qué colores funcionan juntos, independientemente de si hemos logrado un buen contraste en toda la página, y Si los colores tienen la misma sensación o significado que nuestro contenido..
Aquí hay otra mirada a la paleta de colores principal utilizada en la serie de tutoriales Tuts + Town:
Los colores más claros se usan como fondos mientras que los colores más oscuros se usan para texto o para resaltar ciertas secciones.
En términos generales, los colores existentes. a través de Los unos de los otros en la rueda de colores se consideran agradables a la vista. Estos son complementario Colores: cuando se combinan producen un tono de gris. Es posible que los colores que se encuentran uno al lado del otro en la rueda de colores funcionen bien juntos, pero puede requerir un poco de ajuste de la saturación y el brillo para obtener la combinación correcta.
También tocamos un poco en contraste en el tutorial anterior sobre conceptos básicos de diseño, pero veamos brevemente otra mirada.
El contraste adecuado reduce la fatiga visual y aclara la jerarquía visual. El mejor ejemplo de contrato bueno contra malo se puede ver comparando ciertas combinaciones de color de fondo y de texto.
La imagen de arriba muestra un contraste pobre a la izquierda y un mejor contraste a la derecha. El texto con poco contraste es difícil de leer y nos duele la vista, creando un efecto borroso.
Hay herramientas que nos proporcionan listas de preciosas paletas de colores para elegir, que pueden ser un verdadero ahorro de tiempo y servir como una gran inspiración..
Coolors.co es uno de los selectores de color más fáciles de usar disponibles en este momento.
Nos proporciona hermosas paletas de colores que podemos personalizar y cambiar presionando la barra espaciadora.
Adobe Color es otra herramienta de selección de colores que hace un gran uso de la increíble rueda de colores de la que hablamos anteriormente..
Podemos realizar cambios en la rueda de colores, determinar nuestra paleta y luego realizar ajustes adicionales en cada color individual..
Adobe Color también nos permite guardar nuestras paletas favoritas y explorar las populares, preseleccionadas.
Al elegir colores para la web y aplicarlos a los elementos de la página, es importante tener en cuenta algunas cosas para asegurarse de que estos colores mejoren la experiencia del usuario..
El contraste es tan importante que, en caso de duda, opte por la opción más segura; Incluso si parece un poco "aburrido"! Algunas de las tareas más importantes que tenemos como diseñadores son garantizar que las cosas sean funcionales, fáciles de usar y fáciles de leer. Un contraste deficiente evitará que nuestros usuarios puedan leer nuestro maravilloso contenido.
Entonces, si bien está bien ser aventurero con sus opciones de color, estas opciones nunca deben alejarse del funcionamiento general del sitio o distraerse del contenido..
Las herramientas de selección de la paleta de colores, como Coolors, a menudo nos proporcionan cinco colores. Cinco colores nos permiten tener uno o dos colores dominantes y unos pocos colores menos dominantes para cosas como botones y enlaces.
Tener más de cinco colores diferentes pone a nuestros diseños en riesgo de ser inconsistentes y difíciles de seguir; aunque el blanco, el negro y los grises no deben contarse aquí.
Es realmente importante no desviarse del uso del color que generalmente es aceptable para muchas personas. Por ejemplo, la mayoría de las personas están acostumbradas a verde que significa "agregar" y rojo que significa "eliminar". Revertir esto en nuestro sitio web sería una mala decisión de diseño porque no es lo que se espera y probablemente confundirá a los usuarios.
En este tutorial, discutimos las teorías y reglas de color y cómo seleccionarlas y usarlas correctamente en la web. Cada color lleva su propio mensaje. Debemos asegurarnos de que este mensaje coincida con el de nuestro contenido a través de opciones de paleta cuidadosamente pensadas.
A continuación, terminaremos nuestra serie con algunos pensamientos finales y diferentes maneras en que podemos compartir nuestro trabajo duro con amigos y familiares en línea..
Te veo por la ciudad!
Accentsconagua