Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Color

Read Time: 9 mins
This post is part of a series called Web Design for Kids.
Web Design for Kids: Typography
Web Design for Kids: Wrap Up

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Bienvenidos a la décima lección de nuestra serie Diseño Web para Niños, todo sobre el color.

En éste tutorial nos adentraremos en la teoría del color, las diferentes formas de usar colores en nuestro CSS, en el significado de ciertos colores, y revisaremos cómo seleccionar los colores perfectos para nuestros sitios. Finalizaremos con algunos consejos para usar color en la web.

¡No olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de ésta página!

Teoría del Color

La Teoría del Color involucra muchas cosas, pero el foco principal es ver cómo los colores se comportan con respecto a otros en un diseño. Llamamos Paleta de Colores a un grupo de colores elegidos para ser usados juntos. Una paleta de colores bien diseñada tendrá colores que se complementan  y tendrán contraste e intensidad. Hablaremos sobre lo que significan éstas palabras en un momento.

Elegir los colores adecuados y saber por qué ciertos colores funcionan y otros no puede determinar si nuestro diseño funcionará o no. Una pobre elección de color hará que nuestro sitio sea difícil de usar, o nuestro texto imposible de leer y el usuario abandonará nuestro sitio web.

Algo de Terminología

Antes de ir lejos en nuestro tutorial hablemos sobre alguna terminología básica del color que mencionaremos mucho. Utilizaremos éstos términos para ayudarnos a entender mejor lo que hace tan único a cada color.

Tonos

Un tono es (más o menos) el color de un objeto. Cuando nos referimos a cosas como "rojo" o "amarillo" estamos hablando de su tono.

Saturación

Saturación de color se refiere a que tan vivo, o fuerte es un color. Una baja saturación crea un color que aparece apagado, mientras que una alta saturación produce un color muy vivo.

Brillantez o Luminosidad

La brillantez se refiere a la claridad u oscuridad de un color. Ésta va de negro (sin brillantez) a blanco (brillantez total).

El círculo cromático

El círculo cromático está basado en rojo, amarillo, y azul y es bien conocido entre los artistas. Como diseñadores, entender cómo se crean los colores nos ayuda a tener una mejor idea de que colores complementan a otros y por qué.

La rueda izquierda del auto de abajo muestra los tres colores primarios. Con éstos tres colores podemos crear los demás colores.

La rueda de la derecha en el auto de abajo muestra también los colores secundarios: colores que fueron creados mezclando los colores primarios. Por ejemplo, el azul y el amarillo forman el verde, mientras que el azul y el rojo forman el púrpura.

La rueda izquierda de colores del auto de abajo muestra una capa más: los colores terciarios. Éstos son colores creados al mezclar un color primario y uno secundario. Por ejemplo, mezclando el azul y el púrpura crea un púrpura azulado oscuro.

Sistemas de Color en la Web

Hay una gran número de sistemas de color (formas de describir colores) pero solamente ciertos sistemas son adecuados para la web.

RGB

RGB significa "Rojo Verde Azul" y describe cómo vemos los colores en pantallas electrónicas. Éstos tres colores pueden combinarse para producir muchos otros colores. Los tres valores son listados en orden y cada uno tiene un rango de 0 a 255.

El CSS de arriba 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 usado un valor hexadecimal de color hasta ahora en ésta serie, pero podemos usar un color en nuestro CSS de muchas maneras.

Visita éste sitio para una rápida lista de valores Hex y RGB para 500 colores específicos.

HSL

HSL significa "Tono Saturación Luminosidad" 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.

El primer valor aquí, 43, representa un ángulo en un círculo de color. Ésto es lo que nos da el tono. Rojo es 0 o 360 grados, mientras que 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% aquí siendo saturación completa.

El valor final, luminosidad, determina que tan clara u oscura es la saturación. 100% es blanco, 0% es negro, y cualquier valor intermedio establecerá una combinación de los dos.

Que valor utilizaremos en nuestro CSS queda a nuestra decisión, pero los valores HSL son más sencillos de adivinar al seleccionar un valor de angulo que se mueve en sentido contrario a las manecillas del reloj desde rojo (0) y luego agregando el porcentaje de saturación y luminosidad que queramos.

Nombres del Color

Hay un número limitado de colores que tienen nombres que podemos usar en nuestro CSS, no se requieren números.

Una completa lista de éstos nombres de colores se puede encontrar aquí.

Nota Rápida sobre Herramientas de Conversión

Si tenemos alguna vez un valor Hex y necesitamos el valor RGB o HSL de ese color (o viceversa) hay algunas herramientas útiles que harán este trabajo por nosotros, como rgb.to y Colorrrs.

El Significado de los Colores

Los colores lleva mucho significado. Dependiendo del país en el que vivas, un cierto color puede ser usado para significar peligro, amor, felicidad, o maldad. Los colores pueden hacer que los usuarios reaccionen con ciertos sentimientos, así que comprender ésto es importante para comunicar nuestro mensaje al ususario.

Observa ésta gráfica que muestra como diferentes colores significan diferentes cosas en varias culturas.

Discutamos brevemente algunos significados detrás de los colores primarios: amarillo, rojo y azul.

Amarillo

El amarillo atrae la atención de un usuario más que cualquier otro color y generalmente representa felicidad y sol. Por otro lado, el amarillo puede también significar "precaución", como se muestra en muchas señales de tránsito.

Usar el amarillo en la web puede ser muy llamativo, así que es mejor no usarlo demasiado y asegurarnos que estamos resaltando solo información importante.

Rojo

Dependiendo del pais en el que vivas, el rojo puede significar cualquier cosa desde peligro,  indignación, energía, amor y felicidad. Cualquiera que pudiera ser su significado, el rojo siempre es usado para representar una sensación o acción extrema.

En el diseño web el rojo es con frecuencia usado para comunicar eliminación o errores. Es un color que llama la atención del usuario así que puede funcionar bien como un color de acento. Demasiado rojo en un sitio puede ser abrumador y puede ser difícil de transmitir lo que es especialmente importante.

Azul

El azul representa calma y tristeza para la mayoría y es un color muy popular en la web.

La sensación creada al usar el azul en diseños dependerá principalmente del matiz y el tono que seleccionemos. Mientras que un azul oscuro comunicará fuerza y confiabilidad, un azul más claro será más divertido y amistoso.

Seleccionar una Paleta de Colores

La mayoría de los sitios tendrán una serie de colores que funcionan para dar jerarquía y establecer el sentimiento de un diseño. Nuestra selección de color puede ser tan importante como las demás decisiones del diseño que hemos tenido que hacer hasta ahora, así que necesitamos tener buen ojo para determinar que colores funcionan juntos, si logramos o no tener un buen contraste en toda la página, y si los colores llevan la misma sensación o significado que nuestro contenido.

Aquí otro aspecto de la paleta de colores principales utilizada en la serie de tutoriales de Tuts+ Town:

Los colores más claros son usados como fondos mientras que los colores más oscuros son usados para el texto o para resaltar ciertas secciones.

Colores Complementarios & Contrastantes

Generalmente hablando, los colores que están opuestos en el círculo cromático se consideran agradables al ojo. Éstos son colores complementarios-cuando se combinan producen un matiz de gris. Es posible que los colores que están adyacentes en el círculo cromático funcionen bien juntos, pero tal vez se tendría que realizar un poco de  ajuste en la saturación y brillantez para que funcionen adecuadamente.

También abordamos un poco el contraste en el tutorial previo de bases del diseño, pero veámoslo ligeramente de nuevo.

Un contraste adecuado reduce la fatiga visual y clarifica la jerarquía visual. El mejor ejemplo de lo bueno contra la malo puede verse al comparar ciertas combinaciones de color de fondo y texto.

La imagen de arriba muestra un pobre contraste en la izquierda con un mejor contraste en la derecha. El texto con pobre contraste es difícil de leer y molesta a nuestros ojos, creando un efecto borroso.

Herramientas de Paleta de Colores

Hay herramientas que nos proporcionan listas de paletas de color magníficas para elegir, las cuales pueden ahorrarnos mucho tiempo y servir de gran inspiración.

Coolors

Coolors.co es una de las más fáciles para usar selectores de color que existen en éste momento.

Nos proporciona bellas paletas de colores que podemos personalizar y cambiar presionando la barra espaciadora.

Adobe Color

Adobe Color es otra herramienta de selección de color que hace un extraordinario uso de ese sorprendente círculo cromático del que hablamos previamente.

Podemos realizar cambios al círculo cromático, determinando nuestra paleta, y luego efectuar más ajustes a cada color individual.

Adobe Color también nos dejar guardar nuestras paletas favoritas y navegar entre las más populares, y las preseleccionadas.

Consejos Generales

Cuando se eligen los colores para la web, y se aplican a elementos de la página, es importante mantener algunas cosas en mente para asegurarnos que éstos colores mejoren la experiencia del usuario.

Contraste

El contraste es tan importante que, cuando tengas duda, ve con la opción más segura, ¡aún si parece un poco "aburrida"! Algunos de los deberes más importantes que tenemos como diseñadores es hacer que las cosas sean funcionales, fáciles de usar, y fáciles de leer. Un contraste pobre impedirá que nuestros usuarios puedan leer nuestro maravilloso contenido.

Así que mientras está bien ser aventurero con nuestras elecciones de color, éstas elecciones nunca deben afectar la operación general del sitio o ser una distracción para el contenido.

Número de Colores

Herramientas de la selección de la paleta de colores, como Coolors, con frecuencia nos proporcionarán cinco colores. Cinco colores nos permiten tener uno o dos colores dominantes y colores un poco menos dominantes para cosas como botones y enlaces.

Tener mucho más de cinco colores diferentes pone en riesgo a nuestros diseños de ser inconsistentes y dífíciles de seguir; aunque blanco, negro y gris no deberían de contarse aquí.

Patrones Comunes

Es realmente importante no perderse en el uso del color que es generalmente aceptable por mucha gente. Por ejemplo, la mayoría de las personas están acostumbradas a que el verde significa "añadir" y que el rojo significa "borrar". Revertir ésto en nuestro sitio web sería una mala decisión de diseño porque no es lo que se esperaba y probablemente confundirá a los usuarios.

Conclusión

En éste tutorial discutimos las teorías y reglas del color y cómo seleccionar y utilizarlos adecuadamente en la web. Cada color lleva su propio mensaje. Necesitamos asegurar que éste mensaje coincida con nuestro contenido a través de una cuidadosa selección de la paleta.

Próximamente finalizaremos nuestra serie con algunas consideraciones finales y diferentes formas que podemos compartir online nuestro arduo trabajo con amigos y familiares.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.