Colores para SaaS: cómo repartirlos y 6 paletas listas para usar

Los colores de un SaaS no se eligen como los de un póster. La mayor parte de la pantalla son fondos, tarjetas, bordes y texto, así que una paleta útil para un producto tiene pocos colores llamativos y bastantes grises bien escalonados. En esta guía tienes los cuatro grupos que necesita cualquier interfaz y seis paletas de diez colores, cada una con la función de cada tono ya decidida y el contraste del texto revisado.

Cómo se reparten los colores en un SaaS

Piensa en funciones, no en colores sueltos. Si sabes para qué sirve cada tono, aplicarlo en un formulario, una tabla o un modal deja de ser una decisión nueva cada vez.

Neutros (la mitad de la paleta). Fondo de la aplicación, superficie de tarjetas y modales, bordes, texto principal y texto secundario. Son cinco valores y cubren casi todo lo que el usuario ve. Teñirlos un poco hacia el color principal, en vez de usar grises puros, es lo que más cambia la personalidad de una interfaz sin cansar la vista.

Primario y su estado hover. Es el color de la acción principal: el botón de guardar, el enlace activo del menú, el interruptor encendido. Funciona mientras sea escaso. Si pintas con él los iconos, los títulos y los fondos de sección, el botón importante deja de destacar. Para obtener sus variantes más claras y oscuras puedes partir de una escala monocromática de tu color principal .

Acento. Un segundo color para insignias de «nuevo», etiquetas, destacados en gráficos o un aviso secundario. Se usa menos que el primario y no compite con él en los botones.

Estados: éxito y error. Mensajes de validación, notificaciones y cambios de estado. Si tu primario es rojo, coral o naranja, el color de error se confunde con él: oscurécelo, desplázalo hacia el carmesí y acompáñalo siempre de un icono o un texto que diga qué falló.

Con esos diez valores puedes montar un panel completo. Los avisos y la información suelen resolverse con el acento o con una versión clara del primario, sin añadir más colores.

Contraste: la parte que sí puedes comprobar

El criterio de contraste mínimo de las pautas WCAG 2.2 pide una relación de al menos 4.5:1 entre el texto normal y su fondo, y de 3:1 para el texto grande. En un SaaS esto afecta sobre todo a tres puntos que suelen fallar:

• El texto secundario. Las fechas, los subtítulos y las celdas de una tabla en gris claro quedan elegantes en una captura y se leen mal en un portátil con el brillo bajo.
• El texto blanco sobre el primario. Muchos verdes, naranjas y turquesas medios no llegan a 4.5:1 con blanco. O oscureces el primario o pones el texto oscuro encima.
• Los mensajes de éxito. El verde brillante sobre fondo blanco casi nunca cumple. Para texto necesitas un verde bastante más oscuro que el que usarías en un icono.

Los bordes de las tarjetas pueden ser muy suaves porque solo separan zonas. Los de los campos de un formulario no: si el borde de un input apenas se distingue del fondo, el usuario no sabe dónde escribir. Para ellos usa un gris más oscuro, cercano al del texto secundario.

Cuando cambies cualquier valor de las paletas de abajo, compruébalo en el comprobador de contraste de WebAIM: introduces los dos códigos HEX y te indica si cumple el nivel AA para texto normal y grande.

Modo oscuro: redefine los colores, no los inviertas

Invertir una paleta clara da fondos negros puros, textos blancos que deslumbran y un primario saturado que vibra sobre el negro. Funciona mejor tratar el modo oscuro como una paleta aparte con las mismas funciones:

• Fondo en un gris muy oscuro con un poco de tinte, y superficies un escalón más claras. En la oscuridad, la profundidad se marca aclarando, no con sombras.
• Texto principal en un blanco roto y texto secundario en un gris medio, comprobando de nuevo el contraste.
• Un primario más claro y algo menos saturado que en el modo claro, con texto oscuro encima si el blanco no alcanza el contraste.

La paleta «Noche» de más abajo está construida así.

Por qué tantos SaaS hechos con IA se ven iguales

Si has generado una interfaz con v0, Lovable, Bolt o Cursor, es probable que te haya salido un botón índigo, un degradado violeta en el hero y grises fríos de Tailwind. Adam Wathan, creador de Tailwind CSS, se disculpó medio en broma en agosto de 2025 por haber usado bg-indigo-500 en todos los botones de Tailwind UI años atrás. Esos ejemplos se copiaron en miles de plantillas y tutoriales, y la explicación más extendida es que los modelos aprendieron de ese código que una interfaz moderna lleva botones índigo.

El índigo no tiene nada de malo. El problema es que, cuando un producto se parece a todos los que salen de la misma herramienta, el usuario no lo distingue de la competencia ni de un prototipo de fin de semana. Para salir de ese aspecto no hace falta un diseñador:

• Elige el primario fuera del rango índigo-violeta, salvo que tu marca ya lo use. Un verde azulado, un terracota o incluso un negro cambian la primera impresión.
• Tiñe los neutros. Unos grises con un punto cálido o verdoso alejan la interfaz de la paleta por defecto más que cambiar el color del botón.
• Quita los degradados del hero si no aportan nada. Un fondo plano con buena tipografía envejece mejor.
• Dale la paleta a la IA antes de que elija ella. Pega la tabla de roles y códigos en el prompt y pide que use esos valores en toda la interfaz. Si ya tienes logo, puedes sacar la paleta de colores de una imagen y construir los roles a partir de ella.

6 paletas de colores para SaaS por estilo

Cada paleta tiene diez colores con su función asignada. En todas, el texto principal y el secundario superan 4.5:1 sobre el fondo y la superficie, y el texto de los botones supera 4.5:1 sobre el primario y su hover. Los bordes son deliberadamente suaves y solo sirven para separar tarjetas.

Grafito y verde azulado: sobria y profesional

Para CRM, ERP, facturación, gestión de proyectos y herramientas internas, donde la gente pasa horas delante de tablas. El verde azulado se distingue del azul corporativo habitual sin parecer una apuesta arriesgada. Texto de los botones: blanco.

Arcilla: cálida y cercana

Para apps de notas, productividad personal, comunidades, reservas o herramientas para creadores, donde interesa una sensación más humana que corporativa. Los neutros crema y el texto marrón oscuro sustituyen a los grises fríos. Texto de los botones: blanco.

Noche: oscura para herramientas técnicas

Para herramientas de desarrollo, monitorización, logs, APIs o cualquier producto que se usa muchas horas y en el que los usuarios esperan un tema oscuro. El primario es un verde claro con texto oscuro encima, porque el blanco no tendría contraste suficiente. Texto de los botones: #0D1015.

Mandarina: vibrante sin perder legibilidad

Para herramientas de marketing, redes sociales, newsletters, comercio electrónico o productos de consumo que necesitan energía. El naranja es lo bastante oscuro para llevar texto blanco. Como queda cerca del rojo, el color de error va más hacia el carmesí y necesita siempre un icono. Texto de los botones: blanco.

Clínica: limpia y tranquila

Para software de salud, citas médicas, bienestar, educación o recursos humanos, donde conviene transmitir orden y calma. El azul petróleo es más oscuro de lo que parece para que el texto blanco cumpla, y el acento rosa frambuesa evita que todo quede frío. Texto de los botones: blanco.

Monocromo con acento amarillo: minimalista

Para productos de IA, analítica, finanzas personales o herramientas para equipos de producto, donde el contenido debe destacar más que la interfaz. El primario es casi negro y el amarillo se reserva para destacados, siempre con texto oscuro encima, porque como color de texto sobre fondo claro no se lee. Texto de los botones: blanco.

Si quieres más ideas en este registro, en las paletas de colores minimalistas encontrarás combinaciones de neutros que puedes adaptar a estos roles.

Cómo adaptar una paleta a tu producto

No hace falta usar los códigos tal cual. Conserva la estructura (cinco neutros, primario con hover, acento y dos estados) y cambia lo que identifique a tu marca:

1. Sustituye el primario por tu color y genera su hover oscureciéndolo un escalón.
2. Tiñe los neutros con un poco de ese mismo tono.
3. Comprueba de nuevo el texto sobre el primario y el texto secundario sobre el fondo.
4. Si tu primario se parece al rojo o al verde, revisa que no se confunda con el error o el éxito.

Si todavía no tienes claro qué color principal quieres, prueba combinaciones en el generador de paletas de colores hasta dar con un tono que te convenza y luego reparte sus valores entre estos diez roles.