Cómo elegir colores para la página web de un negocio

Si tienes una cuadrilla de techado, un taller de aire acondicionado, un estudio de masajes o cualquier negocio local, seguramente te has quedado mirando un selector de color sin saber qué hacer. Hay millones de tonos, cada guía dice algo distinto, y tú solo quieres un sitio que se vea profesional y haga sonar el teléfono. Esta guía te muestra cómo elegir colores para la página web de un negocio usando un pequeño conjunto de reglas que puedes aplicar en una tarde, aunque nunca hayas abierto una herramienta de diseño en tu vida.

La meta aquí no es una captura de pantalla bonita. La meta es un sitio en el que un desconocido confíe en los primeros segundos, que pueda leer sin entrecerrar los ojos, y sobre el que pueda actuar. El color hace mucho de ese trabajo silencioso. Estudios citados en distintos blogs de diseño sugieren que la gente forma una primera impresión de una página web en menos de un segundo, y buena parte de esa impresión es el color y el contraste antes de que alguien lea una sola palabra.

Empieza con tres colores, no con treinta

El error más común que cometen los dueños de pequeños negocios es elegir demasiados colores. Una paleta recargada se ve amateur y jala el ojo a todas partes a la vez. La solución es una estructura simple que usan los diseñadores profesionales, a menudo llamada la regla 60-30-10.

Un color dominante para cerca del 60 por ciento de la página. Suele ser un fondo claro y tranquilo, como blanco, blanco roto o un gris muy suave. Ocupa la mayor parte de la superficie.
Un color secundario para cerca del 30 por ciento. Este es tu color de marca principal, usado en encabezados, fondos de sección y bloques más grandes.
Un color de acento para cerca del 10 por ciento. Este es el llamativo, reservado para los botones y enlaces en los que quieres que la gente haga clic.

Piensa que es como vestirte. El 60 por ciento es tu camisa y tu pantalón, el 30 por ciento es tu chaqueta, y el 10 por ciento es el cinturón o el reloj que remata el look. Si todo es llamativo, nada resalta. El color de acento tiene una sola tarea en el sitio de un negocio: hacer que el botón de "Llama ahora" o "Pide una cotización" sea imposible de pasar por alto.

Si no recuerdas nada más de este artículo, recuerda esto. Elige un neutro dominante, un color de marca y un color de acento. Puedes agregar un cuarto tono de apoyo más adelante, pero tres es una paleta completa y funcional.

Deja que la psicología del color guíe el ánimo, no que mande

Los colores cargan asociaciones emocionales aproximadas. No son ciencia exacta, y cambian según la cultura, pero son un punto de partida útil cuando estás eligiendo una dirección para tu negocio.

El azul se lee como confiable, tranquilo y profesional. Por eso los bancos, los plomeros y los consultorios médicos se apoyan en él. Para servicios para el hogar, el azul dice "esta gente va a llegar y lo va a hacer bien".
El verde sugiere salud, crecimiento, seguridad y dinero. Encaja con jardineros, estudios de bienestar, servicios de limpieza y cualquier cosa con conciencia ecológica.
El naranja y el amarillo se sienten enérgicos, amistosos y urgentes. Son excelentes colores de acento para botones porque atrapan la atención, pero pueden verse baratos si se usan en toda una página.
El rojo es atrevido y urgente. Funciona para restauración, servicios de emergencia y cualquier cosa donde la rapidez importe, pero también puede leerse como alarmante, así que úsalo en dosis pequeñas.
El negro, el carbón y el azul marino profundo se sienten premium y serios. Le quedan a contratistas de gama alta, despachos de abogados y marcas de bienestar de lujo.
El morado tira hacia lo creativo y lo relajante, lo que encaja con salones, spas y servicios de belleza.

Aquí está la parte que la mayoría de las guías se salta. No elijas un color solo porque una tabla dice que significa "confianza". Elige un color que encaje con lo que tus clientes ya esperan de tu oficio, y luego úsalo de forma consistente. Un techador pintado de pies a cabeza de lavanda suave va a confundir a la gente, sin importar lo que diga la tabla de psicología. Ajusta el ánimo al dinero. Si tus mejores clientes son dueños de casa que te contratan para un trabajo serio y caro, un marino firme o un verde bosque casi siempre rendirá mejor que un pastel de moda.

El contraste es la regla que no puedes saltarte

Aquí es donde la mayoría de los sitios de pequeños negocios fallan en silencio, y donde puedes ganarle a la competencia casi sin esfuerzo. El contraste es la diferencia de luminosidad entre tu texto y el fondo detrás. El contraste bajo, como texto gris sobre fondo blanco o texto blanco sobre un botón azul pálido, es difícil de leer para todos e imposible para muchos visitantes mayores o con baja visión. Tus clientes de servicios para el hogar tienden a ser mayores y a menudo navegan desde el teléfono bajo el sol fuerte. Si no pueden leer tu número, pierdes el trabajo.

Existe un estándar real para esto. Las Pautas de Accesibilidad para el Contenido Web recomiendan una relación de contraste de al menos 4.5 a 1 entre el texto normal y su fondo. No necesitas hacer las cuentas a mano. Pega tus dos colores en una herramienta gratuita como el WebAIM Contrast Checker y te dice al instante si pasa o falla.

Unas cuantas reglas sencillas que te mantienen a salvo:

El texto del cuerpo debe ser muy oscuro sobre un fondo muy claro, o muy claro sobre un fondo muy oscuro. Gris oscuro sobre blanco está bien. Gris medio sobre blanco no.
Nunca pongas texto sobre una foto recargada sin una capa sólida o semisólida detrás.
Tu color de botón de acento necesita suficiente contraste para que la etiqueta del botón sea fácil de leer. Un botón brillante con texto pálido falla seguido.

Si un visitante tiene que entrecerrar los ojos, acercarse o inclinar la pantalla para leer tu oferta, la elección de color ya te costó la llamada.

Pasar el contraste no se trata de complacer una regla. Se trata de que el cliente de 68 años del techador lea el botón de presupuesto al primer intento.

Cómo elegir colores para la página web de un negocio en cinco pasos

Aquí está todo el flujo, de principio a fin, sin jerga de diseño.

Elige tu neutro dominante. Elige blanco o un blanco roto suave para la mayor parte de la página. Es la opción segura y limpia, y hace que todo lo demás resalte.
Elige tu color de marca. Elige un color que encaje con tu oficio y, si ya tienes un logo o una rotulación en la camioneta, que combine con eso. La consistencia entre tu camioneta, tus tarjetas y tu sitio genera reconocimiento.
Elige tu color de acento. Elige un color de alta energía que contraste fuerte con tu color de marca, y úsalo solo para botones y enlaces clave. El naranja, el verde brillante y el amarillo cálido funcionan bien como acentos contra el azul o el marino.
Revisa el contraste de cada par de texto y fondo. Pásalos por un verificador de contraste gratuito y arregla lo que falle.
Pruébalo en el mundo real. Mira el sitio en tu propio teléfono, al aire libre, y pregunta a dos personas que no sean de tu familia si el botón principal es obvio y el texto es fácil de leer.

Eso es todo. No necesitas un título en color. Necesitas disciplina para mantener la paleta pequeña y el contraste alto.

Ajusta tu paleta a tu oficio

Las guías de color genéricas hablan de marcas en abstracto. Tú tienes un tipo específico de negocio, así que aquí hay puntos de partida concretos que puedes adaptar.

Techado y contratación general: azul marino profundo o carbón como color de marca, fondo blanco, un naranja cálido o amarillo de seguridad de acento para los botones de cotización. Se lee sólido y honesto.
Aire acondicionado y plomería: un azul limpio de marca combinado con un acento rojo o naranja. La combinación azul-rojo también evoca calor y frío, que los clientes leen al instante.
Restauración y servicios de emergencia: una base fuerte y seria como carbón o azul profundo con un acento rojo que señala urgencia y respuesta rápida.
Jardinería y cuidado del césped: verde bosque u oliva como color de marca, fondo crema o blanco, y un acento amarillo solar.
Bienestar, masajes y spa: salvia suave, verde azulado apagado o morado polvoriento con mucho espacio en blanco y un acento gentil. La calma es el producto, así que la paleta debe sentirse como una respiración profunda.
Servicios de limpieza: azules y verdes brillantes y frescos que sugieran brillo e higiene, mantenidos claros y ligeros.

Adapta, no copies. La idea es partir de una dirección que encaje con las expectativas de tu cliente en lugar de una muestra en blanco.

Errores de color comunes que les cuestan llamadas a los negocios locales

Aun con una buena paleta, los pequeños errores se acumulan. Cuidado con estos.

Usar tu color de marca para el texto del cuerpo. El texto de párrafo con color casi siempre falla el contraste y cansa la vista. Mantén el texto largo casi negro.
Hacer cada botón de un color distinto. Si tres botones compiten, ninguno gana. Un color de acento para la acción principal, en todas partes.
Copiar los colores exactos de una gran marca nacional. Su paleta fue construida para su mercado, no para el tuyo, y puede hacerte ver como una imitación.
Perseguir modas. Un color que se ve cool este año puede envejecer tu sitio rápido. Los colores estables y adecuados al oficio envejecen mejor y cuestan menos de mantener.
Olvidar la pantalla del teléfono. La mayoría de las búsquedas locales pasan en el móvil. Los colores pueden verse distintos en una pantalla pequeña y brillante, así que revisa siempre ahí.
Ignorar los estados de hover y de enlace visitado. Los enlaces y botones deben reaccionar de forma visible al tocarlos o pasar el cursor para que la gente sepa que el sitio funciona.

Dónde conseguir colores y probarlos gratis

No necesitas software de pago. Unas cuantas herramientas gratuitas cubren todo lo de esta guía.

Coolors y Adobe Color te ayudan a armar y previsualizar una paleta y a encontrar colores que funcionen juntos.
El WebAIM Contrast Checker confirma que tu texto sea legible y cumpla el estándar de accesibilidad.
Tu propio teléfono, sostenido al aire libre a la luz del día, es la prueba más honesta que tienes. Si se lee claro ahí, se lee claro en cualquier parte.

Guarda tus colores finales como una lista corta de códigos exactos, los valores hexadecimales de seis caracteres, para usar siempre los mismos en tu sitio, tus facturas y tus perfiles sociales. Esa repetición es lo que convierte un color en una marca.

Cuando prefieres no elegir nada

A algunos dueños les gusta esto. Muchos solo quieren un sitio terminado que ya se vea bien. Aquí es donde ayuda una herramienta como Saynovo. Lee lo que tu negocio ya es y aplica una paleta de colores ajustada a tu oficio, para que arranques desde un punto de partida profesional en lugar de una rueda de color vacía. Si un tono se siente fuera de lugar, dices lo que quieres en palabras sencillas y el sitio se ajusta, lo que mantiene la disciplina de paleta pequeña y contraste fuerte sin que tengas que administrar códigos hexadecimales a mano. Es un camino entre varios, y los principios de este artículo se sostienen sin importar con qué lo construyas.

La versión corta

Aprender cómo elegir colores para la página web de un negocio se reduce a un puñado de hábitos duraderos. Mantén la paleta en tres o cuatro colores. Usa un neutro claro para la mayor parte de la página, un color de marca que encaje con tu oficio, y un acento llamativo reservado para los botones que te dan dinero. Confirma que cada pieza de texto supere el estándar de contraste 4.5 a 1, y luego prueba todo en un teléfono real a la luz del día real. Haz eso, y tu sitio se verá más profesional que el de la mayoría de tus competidores locales, y hará el trabajo silencioso de convertir a un desconocido en una llamada telefónica.