¿Puedo usar los colores comercialmente?

Sí. Los colores generados son libres de regalías y se pueden usar en cualquier proyecto personal o comercial.

¿En qué formatos puedo copiar?

La herramienta entrega valores en HEX, RGB y HSL, listos para CSS, diseño o código.

¿Las paletas cumplen criterios de accesibilidad?

Para comprobar el contraste y la conformidad WCAG entre colores, usa el Verificador de Contraste.

Design Tools

Tailwind Palette Master Master

Pulsa Espacio para generar. Bloquea las que te gusten. Exporta una config lista para tu proyecto con validación de accesibilidad.

NEGROAA (5.7)

NEGROAA (5.0)

NEGROAAA (8.3)

NEGROAAA (9.8)

NEGROAA (5.6)

UI Simulation (Vista Previa en Vivo)

Brand UI

Ingresos Totales

R$ 12.450

Nuevos Usuarios

+450

Usuario Ejemplo

Actividad reciente

Activo

Tipografía y Estados

Heading 1

Heading 2 (Secondary)

Este é um parágrafo de exemplo para testar a legibilidade da cor mais clara sobre fundo escuro.Link style example.

Elementos de Formulario

Estado de foco del input

Patrocinado

Exportar para Devs

Nossa inteligência ordena automaticamente suas cores da mais clara para a mais escura e gera o objeto de configuração do Tailwind.

Como usar

Copie o código ao lado.
Cole no seu arquivo tailwind.config.js.
Use as classes: bg-brand-500, text-brand-900.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {          100: '#F59E0B',
          300: '#10B981',
          500: '#3B82F6', Main Brand Color
          700: '#EF4444',
          900: '#8B5CF6',
        }
      }
    }
  }
}

Design Systems

Sua marca precisa de mais consistência?

Geradores automáticos são ótimos para começar, mas um Design System robusto exige engenharia visual. A Abstract cria sistemas de design escaláveis para grandes produtos.

¿Cómo crear una paleta de colores que combine?

Una paleta armónica parte de un color base y usa relaciones del círculo cromático: análogas (vecinas, suaves), complementarias (opuestas, contraste fuerte) o tríadas (equilibradas). Para interfaces, elige 1 color primario, 1 de acento y tonos neutros, y asegura suficiente contraste para el texto. Esta herramienta genera paletas y exporta los códigos HEX.

Reglas rápidas de paleta

Análogas: colores vecinos, aspecto suave
Complementarias: opuestas, contraste fuerte
Regla 60-30-10: primario, secundario, acento
Siempre prueba el contraste del texto sobre el color

AbstractOS

Gostou da paleta? Use num site real.

Crie o site no Prisma Studio aplicando suas cores com IA, sem código.

Criar app com IA

¿Te resultó útil esta herramienta?

Sé el primero en valorar

Cómo generar una paleta de colores

1
Elige un color base
Define el color principal o genera una paleta aleatoria para empezar.
2
Ajusta la armonía
Explora variaciones análogas, complementarias y tonales para componer la paleta ideal.
3
Copia los códigos
Copia los valores HEX, RGB o HSL y úsalos directo en tu proyecto o diseño.

Preguntas frecuentes

¿Puedo usar los colores comercialmente?: Sí. Los colores generados son libres de regalías y se pueden usar en cualquier proyecto personal o comercial.
¿En qué formatos puedo copiar?: La herramienta entrega valores en HEX, RGB y HSL, listos para CSS, diseño o código.
¿Las paletas cumplen criterios de accesibilidad?: Para comprobar el contraste y la conformidad WCAG entre colores, usa el Verificador de Contraste.

Compare com alternativas

vs Coolors