Generador de paletas de colores
Crea paletas de colores con reglas de armonía o a partir de una foto. Mira tonos, contraste y degradados, y exporta a CSS, SCSS, Tailwind, JSON, Swift, Android o Figma.
Cargando Generador de paletas de colores…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de paletas de colores
- 1
Abre Generador de paletas de colores en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Este generador de paletas de colores crea combinaciones armoniosas para webs, apps, marcas e ilustraciones. Empieza con un color base y una regla de armonía, o sube una foto y extrae sus colores principales. Cada color incluye sus tonos, sus valores HEX, RGB y HSL y una comprobación de contraste, y toda la paleta se exporta directamente a tu código o herramienta de diseño.
Cómo crear una paleta
- Elige un color base, o sube una imagen para extraer una paleta.
- Elige una regla de armonía (ver abajo) o empieza con un ajuste predefinido.
- Ajusta los colores y haz clic en cualquier color o tono para copiar su valor.
- Revisa los resultados de contraste WCAG antes de usar colores para texto.
- Exporta la paleta en el formato que necesites.
Reglas de armonía de color
- Complementaria: dos colores opuestos en el círculo cromático, para un contraste fuerte.
- Análoga: colores vecinos en el círculo, tranquilos y naturales.
- Triádica: tres colores a la misma distancia, vivos pero equilibrados.
- Tetrádica y doble complementaria dividida: cuatro colores para esquemas ricos; deja que uno domine.
- Complementaria dividida: un color base y los dos vecinos de su complementario, más suave que la complementaria.
- Monocromática: tintes y sombras de un solo tono, elegante y segura.
- Personalizada: elige tú cada color.
Formatos de exportación
Copia o descarga la paleta como propiedades personalizadas CSS, variables SCSS, configuración de colores de Tailwind, JSON, Swift (iOS), colores XML de Android o una lista lista para Figma. El creador de degradados genera degradados lineales, radiales o cónicos con tus colores y copia el CSS.
Consejos para una paleta que funcione
- Usa la regla 60/30/10: un color dominante para la mayor parte del espacio, un color secundario y un acento para botones y elementos destacados.
- Comprueba el contraste del texto. WCAG AA pide al menos 4,5:1 para texto normal, y AAA 7:1.
- Añade neutros. La mayoría de las interfaces necesitan una escala de grises además de los colores de marca.
- Prueba en modo oscuro si tu producto lo tiene; los colores saturados pueden brillar demasiado sobre fondos oscuros.
¿Solo necesitas un degradado? Prueba el generador de degradados CSS. Para revisar en detalle un par de colores, usa el comprobador de contraste.
Preguntas frecuentes
¿Puedo obtener una paleta de colores de una imagen?
Sí. Sube una foto y la herramienta extrae sus colores dominantes en una paleta que puedes editar y exportar.
¿Qué es una armonía de colores?
Una regla para elegir colores que combinan bien según su posición en el círculo cromático, como la complementaria, la análoga o la triádica.
¿Puedo exportar la paleta a Tailwind CSS?
Sí. Elige la exportación Tailwind para obtener una configuración de colores que puedes pegar en tu proyecto. También hay formatos CSS, SCSS, JSON, Swift, Android y Figma.
¿Cómo sé si el texto será legible sobre un color?
La paleta muestra una comprobación de contraste WCAG. Apunta a al menos 4,5:1 para texto normal (AA) o 7:1 para el nivel más estricto AAA.
¿Cómo copio un código de color?
Haz clic en cualquier color o tono y se copia su valor. Para cada color se muestran los valores HEX, RGB y HSL.
¿Puedo crear un degradado con mi paleta?
Sí. El creador de degradados genera degradados lineales, radiales o cónicos con tus colores y copia el CSS.