Herramienta de color práctica

Generador de esquemas de color web

Crea un esquema de color web con colores primarios, neutros y acentos para hero, botones, cards y formularios.

Abrir en la herramienta principalVolver a la herramienta
EnglishItalianoEspañolFrançaisDeutsch

Qué ofrece esta página

  • Convierte un color de marca en una paleta completa para sitio web.
  • Equilibra CTAs, superficies tranquilas y texto legible.
  • Usa la escala de tonos para fondos, bordes, hover y cards.

Bueno para

  • Landing pages
  • Sitios marketing
  • Home SaaS

Cómo usarlo

Generador de paletasCrea paletas accesibles, comprueba contraste WCAG, extrae colores de imágenes y exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.Checker WCAGComprueba el contraste entre texto y fondo según WCAG AA y AAA, prueba pares reales y elige combinaciones legibles.Extractor de imágenesExtrae colores dominantes de imágenes PNG, JPG o WebP en el navegador y conviértelos en paletas y tokens exportables.
¿Puedo usarlo con el generador principal?

Sí. Empieza aquí, abre la herramienta principal de Chromoforge con el mismo color base y exporta la paleta.

¿Cuántos colores necesita el esquema de una web?

Un primario, un acento, una escala neutra para superficies, bordes y texto, y cuatro colores semánticos para éxito, aviso, error e información. Con eso se cubre cualquier estado que vayan a mostrar una web corporativa o una aplicación.

¿Qué es la regla 60-30-10?

Reparte el diseño por superficie: en torno al 60% para un neutro dominante, 30% para una superficie secundaria o color de apoyo y 10% para el acento que sostiene las llamadas a la acción. Es una guía de proporción, no una regla de accesibilidad: cada par de texto sigue necesitando su comprobación WCAG.