Elegir los colores de una marca a ojo suele terminar en un sitio que no se ve bien y que además cuesta leer. El generador de NEUBOX parte de un color y arma la paleta completa, con las variantes claras y oscuras, y te la exporta lista para pegar en tu código.
Herramienta: Generador de paletas de color
Paso 1. Parte de un color y elige la armonía
Si tu marca ya tiene un color, ese es el punto de partida. Si no, elige el que vaya con el ánimo del negocio y ajusta después.
Las armonías, en corto:
- Complementaria: el color opuesto. Máximo contraste, buena para un botón que tiene que destacar.
- Análoga: los vecinos. Da un resultado tranquilo y armónico.
- Monocromática: el mismo color en distintas intensidades. Es la más difícil de arruinar.
- Tríada y tétrada: más colores, más riesgo de que se vea desordenado.
Para un sitio de negocio, monocromática o análoga con un solo color de acento suele dar el mejor resultado.
Lo que de verdad hay que revisar: el contraste
Una paleta bonita que no se lee es una paleta mala. Y esto no es cuestión de gusto: hay un número.
El estándar de accesibilidad pide una relación de contraste de al menos 4.5 a 1 entre el texto y su fondo, para texto de tamaño normal. Para texto grande basta con 3 a 1.
Los que más fallan, y se ven en todos lados:
- Texto gris claro sobre fondo blanco. Se ve elegante en el monitor del diseñador y es ilegible al sol, en un celular.
- Botones con texto blanco sobre un color claro, como amarillo o naranja.
La regla práctica: revisa tu sitio en el celular, en la calle. Ahí se cae todo lo que no contrasta.
Paso 2. Exporta la paleta
Puedes llevártela como variables CSS, como configuración de Tailwind, como SCSS o como JSON.
La forma que más problemas evita es usar variables y nombrarlas por función, no por color. Es decir --color-primario en vez de --azul. Si algún día la marca cambia a verde, cambias el valor en un lugar y no acabas con una variable que se llama azul y contiene verde.
Cuántos colores necesitas de verdad
Menos de los que la herramienta te ofrece. Para un sitio completo casi siempre bastan:
- Un color de marca, para lo importante y los botones.
- Una escala de grises, para textos, bordes y fondos. Es lo que más se usa y lo que menos se piensa.
- Verde y rojo, para confirmar y para avisar de un error.
Un sitio con tres colores de marca acaba viéndose disperso. Uno bueno, bien usado, se ve mejor.
Herramientas que se usan junto con esta
- Generador de favicon, para llevar el color a la pestaña.
- Generador de CSS, para sombras y degradados con esos colores.
En la página de la herramienta está la guía completa, con los seis esquemas de armonía y la accesibilidad explicada.