Generador de paletas de colores para tu página web

Cómo usar el generador

1. Genera. Cada clic (o la barra espaciadora en computador) crea 5 colores que combinan según la armonía elegida.
2. Fija lo que te gusta. Con "Fijar" ese color se queda y solo cambian los demás. Con "Editar" eliges un color exacto, por ejemplo el de tu logo.
3. Parte de tu color de marca. En "Partir de mi color" elige tu color principal y la paleta se arma alrededor de él.
4. Revisa el contraste. Cada color indica si el texto se lee mejor en blanco o en negro y la relación de contraste. El ✓ marca 4.5:1 o más.
5. Copia y comparte. Copia los códigos HEX, las variables CSS para tu sitio o el enlace: la paleta queda guardada en la dirección de la página.

La herramienta funciona completa en tu navegador. No pide registro, no usa cookies y no envía tus colores a ningún servidor.

Qué es una paleta de colores

Una paleta de colores es el grupo reducido de colores que usa una marca o un diseño de forma constante: en su página web, su logo, sus redes y sus documentos. Lo habitual en una web son 3 a 5 colores con funciones distintas: uno para el texto, uno de fondo, un color principal de marca, un acento para los botones y uno suave para fondos de secciones o tarjetas.

Usar siempre los mismos colores hace que la marca se reconozca y que la página se vea ordenada. Cuando cada sección usa colores distintos, el sitio se ve improvisado aunque el contenido sea bueno.

Tipos de armonía en el círculo cromático

• Análoga Colores vecinos en el círculo cromático, por ejemplo azules y verdes. Da un resultado tranquilo y coherente; conviene sumar un acento con más contraste para los botones.
• Complementaria Un color y su opuesto, como azul y naranjo. Es la combinación con más contraste: sirve para que el botón principal destaque.
• Triádica Tres colores repartidos a la misma distancia en el círculo. Es más vibrante; funciona mejor si uno domina y los otros dos se usan poco.
• Complementaria dividida Un color base y los dos vecinos de su opuesto. Tiene contraste pero es menos agresiva que la complementaria.
• Monocromática Un solo tono en distintas luminosidades. Elegante y fácil de aplicar, aunque necesita algún acento para que las llamadas a la acción no se pierdan.

Cómo elegir los colores de una página web

Empieza por el logo. Si tu marca ya tiene un color, ese es el principal. Usa "Partir de mi color" para armar el resto alrededor de él.

Reparte con la regla 60-30-10. Es una regla práctica de diseño: alrededor del 60% de la superficie en un color neutro de fondo, 30% en el color secundario y 10% en el acento. Ese 10% es el que debe llevar los botones de contacto.

Prioriza que se lea. Las pautas de accesibilidad WCAG piden un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. Un color puede ser lindo como fondo y aun así hacer ilegible el texto encima: la herramienta te lo marca en cada color.

Pruébalo en una página, no en cuadros sueltos. Cinco colores lado a lado engañan; la vista previa muestra cómo se comportan en un menú, un titular, botones y tarjetas.

Si después quieres llevar la paleta a un sitio completo, en diseño de páginas web está qué incluye cada plan, y en qué incluye un diseño web profesional cómo se definen colores, tipografías y estructura.

Paletas de ejemplo según el rubro

Puntos de partida para negocios comunes. Cárgalas en el generador y ajústalas a tu marca.

• Abogados y consultoras. Azul profundo y dorado sobrio: seriedad sin verse anticuado. Web para abogados.

  Usar paleta abogados
• Clínicas y salud. Verdes azulados limpios, con fondo muy claro. Web para clínicas.

  Usar paleta clínicas
• Dentistas. Azules claros y blanco, asociados a limpieza. Web para dentistas.

  Usar paleta dentistas
• Psicólogos y terapeutas. Lilas suaves y fondos cálidos, que no se sienten clínicos. Web para psicólogos.

  Usar paleta psicólogos
• Inmobiliarias. Verdes naturales y neutros que dejan protagonismo a las fotos. Web para inmobiliarias.

  Usar paleta inmobiliarias
• Restaurantes y comida. Rojos y naranjos cálidos que abren el apetito. Web para restaurantes.

  Usar paleta restaurantes
• Tecnología y empresas B2B. Azul oscuro con acentos eléctricos. Web para empresas B2B.

  Usar paleta tecnología
• Tiendas de moda. Neutros con un acento terracota: el producto es el que pone el color. Tiendas Shopify.

  Usar paleta moda