Paletas de colores para sitios web: 32 paletas con códigos hex (y qué convierte)

32 paletas de colores para sitios web con códigos hex, tomadas de los diseños de plantilla de We.Inc, y cómo construir una paleta que convierta: una base tranquila con un único acento reservado para las acciones, ejemplos por sector y verificaciones de accesibilidad.

Preguntas frecuentes

¿Qué color de botón convierte más?

Ningún color gana en todas partes. El mejor color de botón es uno que contrasta mucho con tu página y no se usa para nada más, así la vista va directa a él.

¿Cuántos colores debe usar una web?

Un enfoque habitual es una base neutra (blanco o blanco roto y un color de texto oscuro), un color principal de marca y un acento para las llamadas a la acción, más colores semánticos para los mensajes de éxito y error. Más de eso suele debilitar la jerarquía visual.

¿La psicología del color afecta de verdad a las conversiones?

Las asociaciones de color existen, pero varían según la cultura, el sector y el contexto, y muchas afirmaciones populares están exageradas. Lo que afecta de forma fiable a las conversiones es el contraste, la legibilidad y que la acción que buscas sea visualmente evidente.

¿Qué colores funcionan mejor para fabricantes y empresas industriales?

Los compradores industriales valoran la claridad y la confianza. El azul marino, el gris carbón y los grises acero con un único acento fuerte, a menudo naranja de seguridad, amarillo o un azul brillante, encajan con la categoría. Asegúrate de que las fichas técnicas, los botones de presupuesto y los teléfonos usen el acento para que sean fáciles de encontrar.

¿Cómo compruebo si mis colores son accesibles?

Usa un verificador de contraste como el de WebAIM. El nivel AA de WCAG 2.2 exige al menos un contraste de 4.5:1 para el texto normal y de 3:1 para el texto grande y para los elementos clave de la interfaz, como los bordes de los botones y los campos de formulario.

No existe un color que convierta más que todos. Lo que importa es cuánto destaca un botón frente a su página. Las paletas de colores que convierten son las que tienen una base tranquila y coherente y un único acento de alto contraste reservado solo para las acciones que quieres que haga la gente.

Así que en lugar de preguntar "¿qué color?", pregunta "¿mi botón más importante se parece a cualquier otra cosa de la página?". Esta guía muestra cómo construir una paleta en torno a esa idea.

32 paletas de colores para sitios web de los diseños de plantilla de We.Inc

Estas paletas están tomadas de los diseños de plantilla propios de We.Inc (los cuatro colores más usados en la vista previa de cada diseño, excluyendo los grises neutros del marco). Son diseños de plantilla, no sitios de clientes, y no hacemos ninguna afirmación sobre cómo convierte ninguno de ellos. Copia un código hex en el selector de color hex para verlo y obtener valores RGB/HSL, y comprueba cualquier par texto-fondo en el verificador de contraste de color antes de usarlo.

Diseño de plantilla de We.Inc	Estilo	Colores (hex)	Paleta
Atlas Builders	Construcción / oficios	`#101d2c` `#0b1521` `#f2a614` `#d18f0a`	Base azul marino profundo, acento ámbar
Summit Trades	Oficios	`#0e2436` `#e4671e` `#16222e` `#f6eeec`	Azul marino con naranja de seguridad
Ironpeak Roofing	Tejados	`#e4671e` `#0e2436` `#17415f` `#16222e`	Naranja principal, estructura en marino
Ridgewater Plumbing	Fontanería	`#b08544` `#d8401f` `#f2ede3` `#c9a063`	Latón y rojo sobre crema cálida
Sunward Solar	Solar	`#0b1f3a` `#f5a524` `#d98a0b` `#fff6e6`	Azul medianoche y dorado solar
Hookline Towing	Grúas	`#0e0e0e` `#ffc400` `#f4f1ea` `#161616`	Negro y amarillo de alta visibilidad
Redline Auto Group	Concesionario	`#e3262e` `#0e0f11` `#eeeeee` `#17191c`	Rojo carreras sobre casi negro
Maple Street Motors	Talleres	`#1f4d3a` `#1b1b1b` `#f2b134` `#e6efe9`	Verde bosque con mostaza
Freshpile Carpet Cleaning	Limpieza	`#ffd23f` `#0d1b52` `#1d3fd8` `#dbe2ff`	Amarillo brillante sobre azul marino real
Tideline Pressure Washing	Limpieza exterior	`#0b1b2b` `#3fd0c9` `#f3f6f5` `#020617`	Marino oscuro con aguamarina
Mowline Lawn Care	Jardinería	`#eef3e6` `#c6f24e` `#0f1410` `#1a2a17`	Base verde pálido, acento lima
Fairway Lawn Co.	Paisajismo	`#f6f1e7` `#1d2b1f` `#e8c872` `#2f5d3a`	Crema, verde intenso, dorado suave
Brightside Dental	Dental	`#10312e` `#3f605c` `#0e5f57` `#0a4841`	Verdes azulados tranquilos
Meadowpaw Veterinary	Veterinaria	`#2f6e6a` `#e9f0ef` `#c9d7d4` `#f7f9f8`	Verde azulado apagado sobre menta pálida
Vibrant Wellness	Clínica de bienestar	`#25382c` `#eef2e6` `#7c9a7e` `#3f6b4a`	Salvia y bosque
Kinfolk Home Care	Cuidado en el hogar	`#0f3d2e` `#f4c542` `#fffdf6` `#0a2e22`	Verde pino con amarillo cálido
Lumora	Salud	`#c8a97e` `#182c41` `#0b1220` `#0e1a26`	Marino medianoche con dorado arena
Sterling & Vance LLP	Bufete de abogados	`#8a93a2` `#b08a4f` `#0b0e14` `#f6eeec`	Pizarra, bronce y tinta
Harborview Wealth Partners	Asesoría financiera	`#102a43` `#b08d57` `#d9bf8f` `#faf8f4`	Marino y dorado sobre marfil
Harborline Insurance Agency	Seguros	`#0f2742` `#5fd3c9` `#17a398` `#0b1e33`	Marino con verde azulado
Larkfield Partners	Consultoría	`#1f4d3f` `#f4f1ea` `#14181c` `#4a5560`	Verde botella sobre papel
Keystone Realty	Inmobiliaria	`#f6eeec` `#7a2e2a` `#59606b` `#e9f0ef`	Base empolvada con burdeos
Lucia Trattoria	Restaurante	`#e9c9a8` `#f7f1e6` `#efe6d4` `#23301f`	Arena cálida con negro oliva
Ember & Roast	Cafetería / restaurante	`#ede6dc` `#c9642f` `#14100d` `#f6eeec`	Avena, naranja quemado, espresso
Kilnhouse Coffee	Cafetería	`#2b1d16` `#c65d3b` `#f3ebe0` `#fff8ef`	Marrón tostado y terracota
Parcel No. 9 Wines	Bodega	`#3a0a15` `#fbe9e3` `#b8324b` `#f4a7a0`	Clarete con rosa
Petalry Florist	Floristería	`#3e1f2b` `#b4546c` `#fbf5f2` `#f3e3dd`	Ciruela y rosa empolvado
Hollow Oak Farm Shop	Tienda de granja	`#24301f` `#f6f1e4` `#5e7f3a` `#e3a33b`	Musgo, crema y miel
Suds & Scruff	Peluquería canina	`#3b1740` `#ffd84d` `#ff8fab` `#fff8e7`	Berenjena, amarillo y rosa
Datacore SaaS Hero	SaaS	`#7b39fc` `#a484d7` `#6a2ce0` `#f87b52`	Violeta con coral
Mast Security	Seguridad	`#1e2628` `#34e0a1` `#e7ede9` `#8d9a97`	Grafito con menta
Afterglow Sound	Eventos / música	`#efeaff` `#f472b6` `#ec4899` `#8b5cf6`	Lavanda, rosa y morado

Un patrón que verás en ellas: la mayoría combina una base oscura o pálida con un único acento saturado (ámbar, naranja, amarillo, lima o coral). Es la misma estructura de «base tranquila, un color de acción» que se describe más adelante.

Por qué el contraste gana a la psicología del color

Los artículos de psicología del color suelen afirmar que el azul significa confianza, el rojo urgencia y el verde crecimiento. Hay algo de verdad en las asociaciones generales, pero dependen mucho de la cultura, el sector y el contexto. El rojo es una advertencia en un entorno y una celebración en otro. El verde puede significar "adelante", "ecológico" o "dinero".

Lo que sí está bien respaldado es el efecto de aislamiento, también llamado efecto Von Restorff: un elemento que se diferencia de su entorno tiene más probabilidades de ser visto y recordado. Un botón con el único naranja de una página azul y blanca se ve. El mismo naranja en una página llena de naranja, no.

Eso te da dos reglas que valen en todos los sectores:

Elige un color de acento que contraste con tu paleta base.
Úsalo solo para las llamadas a la acción. No para encabezados, iconos ni formas decorativas.

La estructura 60-30-10

Los interioristas usan un reparto 60-30-10, y se traslada bien a las webs:

Proporción	Función	Elección habitual
~60%	Fondo y base	Blanco, blanco roto, gris muy claro o un oscuro profundo para temas oscuros
~30%	Marca y estructura	Color principal de marca para cabeceras, navegación y fondos de sección
~10%	Acento / acción	Botones, enlaces clave, lo único en lo que quieres que hagan clic

Añade un color de texto oscuro (es habitual un casi negro o un gris oscuro en lugar de negro puro) y colores semánticos: verde para éxito, rojo para errores, ámbar para advertencias. Mantén esos colores semánticos lejos de tus botones principales para que un botón de "Comprar ahora" no se confunda con un error.

Crear una paleta en cinco pasos

1. Parte de tu color de marca

Si tienes logo, toma su color principal como primario. Si no, elige uno que encaje con tu categoría (mira la tabla de abajo) y que te guste lo suficiente para convivir con él.

2. Elige el acento por contraste, no por sensaciones

Mira el círculo cromático. Los colores complementarios (opuestos entre sí) crean el mayor impacto: azul y naranja, morado y amarillo, verde azulado y coral. Si tu marca es azul, un acento naranja o amarillo cálido destacará mucho más que un segundo tono de azul.

3. Fija los neutros

Elige un fondo, un color de superficie para las tarjetas, un gris para los bordes y un color de texto. Hacen la mayor parte del trabajo y deben ser discretos.

4. Comprueba la accesibilidad

Pasa cada combinación de texto y botón por un verificador de contraste (el de WebAIM es gratuito). El nivel AA de WCAG 2.2 exige:

4.5:1 para el texto normal,
3:1 para el texto grande (aproximadamente 24px normal o 18.66px en negrita en adelante),
3:1 para los componentes de la interfaz, como los contornos de los botones y los bordes de los campos de formulario.

El texto gris de poco contraste sobre blanco es uno de los problemas de legibilidad más comunes de la web. Si a la gente le cuesta leer tu oferta, el color del botón apenas importa.

5. Prueba en pantallas reales

Revisa tu paleta en un teléfono al aire libre, en la pantalla de un portátil barato y en modo oscuro si tu sitio lo admite. Los colores que se ven refinados en el monitor de un diseñador pueden quedar apagados en otros sitios.

Paletas por sector

Son puntos de partida razonables, no reglas. Cada una usa una base tranquila y un único acento que contrasta.

Sector	Base y primario	Acento para acciones	Por qué funciona
Fabricación / industria	Azul marino, gris carbón, gris acero	Naranja de seguridad o amarillo	Serio y fiable, con un "Solicitar presupuesto" visible
Salud / clínicas dentales	Blanco, azul suave o verde azulado	Coral cálido o verde	Limpio y tranquilo, el botón de cita destaca
Legal / finanzas	Azul marino oscuro o verde bosque, crema	Dorado o azul brillante	Señales clásicas de confianza con una acción de contacto clara
Restaurantes / alimentación	Neutros cálidos, rojo oscuro u oliva	Amarillo o naranja brillante	Apetecible, con un "Pedir" o "Reservar" evidente
SaaS / tecnología	Blanco o casi negro, índigo o azul	Verde, naranja o rosa vivos	Nítido, con un "Empieza gratis" de alto contraste
Belleza / bienestar	Rosa empolvado, salvia, crema	Ciruela oscuro o negro	Marca suave, botón de reserva con aplomo
Servicios del hogar (fontanería, climatización, tejados)	Blanco, azul oscuro	Rojo o naranja	Botón de llamada con sensación de urgencia para emergencias
Comercio electrónico / moda	Sobre todo blanco y negro	Un acento de marca	Deja que las fotos de producto aporten el color

En el caso concreto de los fabricantes: los compradores suelen llegar a una página de producto o de capacidades y quieren una ficha técnica o un presupuesto. Haz que "Solicitar presupuesto", "Descargar ficha técnica" y el teléfono sean los únicos elementos con el color de acento en esas páginas.

Ejemplo práctico: arreglar una página donde nada destaca

Imagina la web de una empresa de jardinería con logo verde, encabezados verdes, iconos verdes, fondo de portada verde y un botón verde de "Pide un presupuesto gratis". Todo es coherente con la marca, y el botón desaparece.

La solución:

Mantén el verde, pero llévalo a la estructura: la cabecera, los separadores de sección, los iconos.
Cambia los encabezados a texto gris oscuro.
Haz que el fondo de la portada sea una foto con una capa oscura, o blanco roto.
Cambia el botón a un naranja cálido, que está enfrente del verde azulado en el círculo cromático, con texto blanco con el contraste comprobado.
No uses ese naranja en ningún otro lugar de la página.

No ha cambiado nada de la marca, pero la acción es ahora lo más visible de la pantalla.

Cómo probar bien tus colores

Si tienes suficiente tráfico, haz una prueba A/B con el color del botón o del acento, pero cambia una sola cosa cada vez y déjala el tiempo suficiente para que sea significativa. Los sitios con poco tráfico a menudo no pueden llegar a un resultado fiable; para ellos funcionan comprobaciones más sencillas:

La prueba de entrecerrar los ojos: desenfoca la vista o la captura de pantalla. La llamada a la acción debería seguir siendo la forma más evidente.
La prueba de los cinco segundos: enseña la página a alguien durante cinco segundos y pregúntale qué se suponía que tenía que hacer.
Mapas de calor y datos de clics de tu herramienta de analítica para ver si la gente hace clic en el botón o en otra cosa.

Errores comunes

Usar el color de acento como decoración, de modo que deja de indicar "haz clic aquí".
Demasiados colores compitiendo por la atención.
Texto gris claro o texto de ejemplo por debajo de un contraste de 4.5:1.
Depender solo del color para mostrar errores o estados (añade también iconos o texto; algunos visitantes son daltónicos).
Copiar la paleta de una marca famosa sin el reconocimiento de marca que la respalde.

Lista de verificación rápida

[ ] Una base, un primario, un acento
[ ] Acento usado solo en las llamadas a la acción
[ ] Todo el texto cumple 4.5:1 (3:1 para el texto grande)
[ ] Botones y bordes de formulario cumplen 3:1
[ ] Los estados de error y éxito usan texto o iconos además del color
[ ] Revisado en móvil, al aire libre y en modo oscuro

El color es una parte de lo que hace que una página convierta; nuestro análisis de ejemplos de landing pages que convierten cubre el resto. Con We.Inc puedes describir en el chat el aspecto que quieres, como "azul marino y gris con un botón de presupuesto naranja", explorar las plantillas y después ajustar los colores visualmente o en código.

Empieza gratis

Empieza gratis · Sin tarjeta de crédito

Umair Ali Sadaqat

Fundador de We.Inc

Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.

¿Listo para crear algo grande?

Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.