Krypton Solid

Una sencilla guía de colores para desarrolladores web

Una sencilla guía de colores para desarrolladores web

En este artículo, Laura Elizabeth comparte un flujo de trabajo de color simple que puede usar en su próximo proyecto web.

Nunca he sido fanático de la teoría del color. Creo que es porque siempre he sido un poco desesperado en eso. Me encantaría poder sentarme allí, rueda de colores en mano, y elegir esquemas de colores complementarios, complementarios divididos y tríadas, impresionando a todos mis amigos, familiares y clientes en el proceso.

Pero la teoría siempre me ha eludido y, sinceramente, nunca la he encontrado útil cuando intento utilizar el color en mis proyectos. Irónicamente, he descubierto que cuanto mejor escojo y uso el color, mejor me vuelvo en la teoría que lo respalda.

Por supuesto, eso realmente no ayuda cuando recién está comenzando, ¿verdad? Por eso, en este artículo, no verá una sola rueda de color. En cambio, voy a mostrarte un flujo de trabajo de color simple que puede utilizar en su próximo proyecto web.

Por supuesto, subconscientemente aprenderá la teoría a lo largo del camino. Entonces, solo por diversión (sí, dije “divertidas”), recomiendo volver en unos meses y darle otra oportunidad a la teoría.

Entonces todo tendrá mucho más sentido, lo juro.

Elegir un color base

Podemos ver algo ridículo como 10 millones de colores en cualquier momento dado. Piense en eso por un segundo. 10 millones.

Y de esos, debemos elegir uno, solo un color, para que sea la base de nuestro sitio web, para nuestra marca.

Todo se derivará de este color, por lo que es algo importante. Pero no te preocupes: no puedes equivocarte.

Cómo elegir un color inicial

Ahora, elegir un color del azul (juego de palabras intencional) sería bastante fácil, pero no lo haremos. Para cualquier proyecto en el que esté tratando con clientes, realmente debería intentar justificar la mayor cantidad de opciones que pueda. Si no lo hace, será un caso de su color favorito frente a su color favorito. Son el cliente. Te están pagando. Ganarán.

No lo pienses demasiado. Solo asegúrese de tener algún tipo de razonamiento detrás de su elección de color (y cada elección, para el caso). Te hará lucir bien.

Consejos para elegir un color inicial

  • Usa lo que tienes.
    Si el cliente tiene un logo con un color establecido, ese será normalmente su color inicial.
  • Elimina los colores de tus competidores. Si uno de sus principales competidores tiene un color de marca fuerte, no lo copie si puede evitarlo. Encuentre los colores de sus competidores para eliminarlos de sus propios esquemas de color.
  • Piense en su público objetivo.
    Los colores de un sitio web para una funeraria probablemente serían muy diferentes de los colores de un club infantil. Piense en quién usará el sitio web y cómo quiere que se sienta (emocionado, serio, cuidado, etc.).
  • Pero no por defecto a los estereotipos.
    Si está diseñando un sitio web para chicas jóvenes, no tiene que usar rosa. Evite los clichés para ganar credibilidad.
  • Juega un juego de palabras.
    Si tiene dificultades, escriba las palabras que asocie con el negocio del cliente. Esta lista debería darle algunas ideas para los colores. Si está realmente luchando, visite cualquier sitio web sobre el significado de los colores y vea cuál le queda mejor.

Ahora debería tener en mente un color base para el diseño. Debe ser algo simple como rojo, verde, azul, amarillo o rosa. A continuación, llegaremos al tono exacto.

Digamos que eliges el azul. (¡Gran elección, por cierto!)

Elegir un color base (agradable)

En lugar de jugar con el selector de color de Photoshop para encontrar un bonito tono de azul, robaremos como un artista y usaremos las opciones de diseño de otras personas para ayudarnos.

Primero, ve a Regate y Diseño de inspiración y haga clic en el enlace «Colores» en ambos.

Estos deberían presentarle pantallas similares:

Utilice sitios web de inspiración para encontrar el color adecuado para su diseño. (Ver versión grande)

Puede usar esto como el siguiente paso para encontrar el tono correcto de azul.

Para una marca fresca y enérgica, opte por uno de los azules más claros y brillantes (una de las cinco opciones principales). Para algo un poco más corporativo y serio, los cinco últimos deberían encajar mejor.

Blues más claros para una sensación enérgica, más oscuro para una sensación corporativa.
Los diferentes tonos de azul tienen diferentes características. ¡Elegir sabiamente! (Ver versión grande)

Elija un tono de cada sitio web para ver diseños reales que usan ese color. A continuación, puede utilizar cualquiera de Técnicas de selección de color de CSS-Tricks para tomar los colores exactos directamente en el navegador.

Resultados de la guía de colores de Dribbble
¡Tanto azul! Tu trabajo es elegir el que creas que se adapta mejor a tu marca. ¡Pan comido! (Ver versión grande)

No solo verá diferentes versiones de su color base, sino que verá fácilmente los colores que combinan.

Crear una paleta de colores coherente

Muy bien, ahora debería tener un valor HEX para su color. El mio es #30c9e8. Ahora vamos a hacer una paleta con ese color. Y es más fácil de lo que piensas.

Cuando piensa en el proceso de creación de un esquema de color, puede imaginar cosas como esta:

Paletas de COLOURlovers
Los tipos de paletas que probablemente estés acostumbrado a ver. (Credito de imagen: ColourLovers paletas por gato chino de la suerte y ¡azúcar! ) (Ver versión grande)

El problema con este tipo de paleta de colores es que aplicarla a un diseño real no es muy práctico. La mayoría de las paletas tienen muchos más colores de los que necesitaría, especialmente considerando que necesitamos agregar un promedio de tres colores neutros a cada esquema:

  • blanco,
  • gris oscuro,
  • gris claro (opcional).

Si intentara agregar cinco o seis colores a los neutros, sería un desastre. Todo lo que necesitas son dos colores:

  • un color base (en nuestro caso, #30c9e8),
  • un color de acento (llegaremos a esto en un santiamén).

Si puede crear un sitio web usando solo estos cinco colores, obtendrá un resultado mucho mejor que si se exagerara con complementarios, complementarios divididos, tríadas y el resto.

Los sitios web de TedTodd y ThoughtBox tienen paletas de colores muy simples
Como Thoughtbot y TedTodd, no necesita una combinación de colores compleja para tener un sitio web atractivo. (Ver versión grande)

Encontrar tu acento

Su color de acento se utilizará en cantidades muy pequeñas en su sitio web, generalmente como una llamada a la acción. Entonces, debe destacarse.

Tu siguiente paso es ir a Paletton y escriba su código HEX en el cuadro de color:

Captura de pantalla del color base de configuración de Paletton
Ingrese su código de color base en Paletton. (Ver versión grande)

Desde aquí, puede encontrar su acento de dos maneras.

Primero, puede hacer clic en el botón «Agregar complementario» y wham! ¿Esa naranja de ahí? Ese es tu acento.

Captura de pantalla de color complementario en Paletton
Paletton genera automáticamente un buen color de acento para usted. (Ver versión grande)

Alternativamente, si no le gusta el color que ha generado, puede hacer clic alrededor de los iconos en la parte superior para encontrar algo más adecuado.

Captura de pantalla de esquemas de color en Paletton
Haga clic para encontrar un esquema de color que le guste. (Ver versión grande)

Personalmente, me gusta bastante el rojo que aparece debajo del ícono de la tríada, así que lo usaré para nuestro esquema. Por supuesto, hay ciencia y otras cosas detrás de lo que está haciendo Paletton; pero, por ahora, pongámosle un alfiler. Aprenderás la teoría un poco más tarde y todo se aclarará.

Entonces, a continuación se muestra nuestro esquema de color como está ahora. Tenemos un bonito color base y un toque de acento. Agreguemos blanco a la mezcla, porque el blanco siempre es bueno.

Nuestra paleta de colores hasta ahora.  Azul, rojo y blanco.
Nuestra paleta de colores hasta ahora, ya está tomando forma. (Ver versión grande)

Todo lo que falta ahora son algunos grises.

Añadiendo el gris

Para la mayoría de mis proyectos web, encuentro que tener dos tonos de gris es infinitamente útil: uno oscuro y otro claro. Los usarás mucho.

La oscuridad se usa generalmente para el texto y la luz para cuando necesita una diferenciación sutil contra todo ese blanco (generalmente para fondos).

Puede elegir sus grises de dos formas:

  • Podrías usar Regate y Diseño de inspiración nuevamente para encontrar un gris agradable de sus resultados anteriores que coincida con su color base. Pero normalmente es más fácil escribir blue website en la barra de búsqueda, que mostrará más grises en los resultados.
  • Si tiene Photoshop o similar, puede usar La técnica de Erica Schoonmaker para armonizar tus grises con el color base.

Creando grises armoniosos

Para obtener nuestros nuevos grises armoniosos y brillantes usando el método de Erica, comenzaremos por elegir dos grises predeterminados de un sombrero. Luego, sigue estos pasos:

  1. Crea dos formas y rellénalas con #424242 y #fafafa.
  2. Inserta una capa de relleno de color sobre tus dos formas.
  3. Cambie ese relleno a su color base (#30c9e8).
  4. Establezca el modo de fusión en superposición y reduzca la opacidad entre el 5 y el 40% (en el ejemplo siguiente, se establece en el 40%).
  5. Utilice el selector de color y copie sus nuevos valores.

Debo señalar que este método funciona excepcionalmente bien cuando el color de la superposición es azul. Para cualquier otro color, querrá reducir la opacidad al 5% o 10% o seguir con los grises originales.

Antes y después de grises más armoniosos
Elegir grises que armonicen con el color base es un pequeño detalle que marca una gran diferencia. (Ver versión grande)

¡Voila! ¡Lo hicimos!

Nuestro esquema de colores está completo. Espero que se sienta orgulloso, porque seguro que lo hago. Aquí está, en todo su esplendor:

Paleta de 5 colores acabada: azul, rojo, blanco, gris oscuro, gris claro
Nuestro maravilloso esquema de colores, listo para ser aplicado. (Ver versión grande)

Aplicar su esquema de color

Ahora que tenemos nuestro esquema de color, es hora de aplicarlo. Este es un artículo completamente diferente en sí mismo. Pero para darte una idea, aquí tienes una maqueta de un diseño de página en escala de grises y con los colores aplicados.

Consejo: Si tiene problemas con el color, un buen truco es crear primero el diseño de su sitio web en escala de grises. Averigüe la jerarquía y luego experimente con el color más tarde.

Imagen en escala de grises del diseño del sitio web
Diseñar su sitio web en escala de grises le ayudará a aplicar la combinación de colores. (Ver versión grande)
Paleta de colores aplicada al diseño de un sitio web
Nuestro esquema de color en acción. (Ver versión grande)

Como se puede ver, azul es el color destacado aquí. Se usa en áreas grandes y también en los íconos.

Nuestro acento rojo, destaca maravillosamente contra el color base. Se utiliza en áreas muy pequeñas, para botones y en los iconos. La menos usas este color, más será destacar.

La gris oscuro se utiliza para los contornos del texto, el logotipo y los iconos. (No omita poner los colores en sus íconos. Es un pequeño detalle pero hace una gran diferencia).

La blanco y gris claro forman el fondo. El gris claro no tiene que estar aquí en absoluto, pero creo que es otro pequeño detalle que realmente hace que un sitio web se vea pulido.

Es importante tener en cuenta que, al usar color y texto, debe asegurarse de que haya suficiente contraste entre el fondo y la copia. Esto ayudará a las personas con daltonismo o baja visión a leer el texto de su sitio web. Hay muchas herramientas que puede utilizar para encontrar colores que cumplan con las Directrices WCAG. Dos populares son los Comprobador de contraste de color WebAim y Relación de contraste por Lea Verou.

Nota final de la guía de colores

Como puede ver, realmente no necesitamos mucho más que la paleta que hemos creado hoy. Pero eso no significa que esté limitado a estos colores, ¡oh no!

Versión ampliada de nuestra paleta de colores
Usando las técnicas anteriores, puede extender su paleta de colores para contener más colores cuando los necesite. (Ver versión grande)

Mientras diseña, puede decidir que es apropiado introducir algunos colores más en su paleta. ¡Eso está totalmente bien! Mientras esté atento, puede seguir los pasos anteriores para encontrar más colores que funcionen con su esquema.

La belleza de esto es que cuanto más lo hagas, mejor te volverás a la hora de elegir colores. Sabrá qué funciona en conjunto y qué no. A veces, el método anterior producirá resultados que no son deseables, así que siéntase libre de modificar las cosas. Juega y diviértete aprendiendo la teoría del color, ¡sin la teoría!

Otras lecturas en SmashingMag:

Deja un comentario