Skip to content
Diseno · Color

Generador de paletas de color

Introduce un color HEX, RGB o HSL y genera instantáneamente paletas armónicas usando las reglas de la teoría del color. Exporta como variables CSS o config Tailwind — todo se ejecuta en tu navegador.

In-browser only HSL color model WCAG 2.2 contrast
Armonía
Paleta — Complementario · 2 muestras
  • #3C83F6rgb(60, 131, 246)hsl(217, 91%, 60%)
  • #F6AF3Crgb(246, 175, 60)hsl(37, 91%, 60%)
Formato de copia:
Vista previa de daltonismo:

Primeros pasos

Cómo generar una paleta de color

  1. 1
    Introduce tu color base

    Escribe un código hex (ej. #E85D04), un valor RGB o HSL. O haz clic en la muestra de color para abrir el selector nativo.

  2. 2
    Elige una regla de armonía

    Haz clic en uno de los seis botones de armonía. La paleta se actualiza instantáneamente.

  3. 3
    Revisa tu paleta

    Cada muestra muestra sus valores HEX, RGB y HSL. Activa el panel de contraste para ver las valoraciones de accesibilidad WCAG, o habilita la vista previa de daltonismo.

  4. 4
    Copia o exporta

    Haz clic en cualquier muestra para copiar su código en el formato preferido. Usa Exportar para copiar la paleta completa como variables CSS, config Tailwind o texto plano.

  5. 5
    Compara todas las armonías

    Haz clic en «Comparar todo» para ver las seis armonías a la vez. Haz clic en «Usar esta» en cualquier fila para cambiar a esa armonía.

  6. 6
    Comparte tu paleta

    Haz clic en «Compartir» para copiar una URL que restaura la paleta exacta.

Teoría del color

Referencia de reglas de armonía

Referencia de reglas de armonía
ReglaColoresDesplazamientos de tonoIdeal para
Complementario20°, 180°Contraste máximo; diseños energéticos
Análogo5−60° a +60°Paletas armónicas; escenas naturales
Triádico30°, 120°, 240°Diseños vibrantes y equilibrados
Tetrádico40°, 60°, 180°, 240°Diseños ricos; requiere buen equilibrio
Split-complementario30°, 150°, 210°Alto contraste con menos tensión
Monocromático5Mismo tono, luminosidad variadaPaletas sutiles y cohesivas

Accesibilidad

Diseñar paletas de color accesibles

  • Comprueba los ratios de contraste WCAG

    Activa el panel de contraste para ver el ratio WCAG 2.2 de cada muestra frente a un fondo blanco. Apunta a AA (4,5:1 texto normal, 3:1 texto grande) o AAA (7:1) siempre que sea posible.

  • Vista previa para usuarios con daltonismo

    Usa los modos de vista previa (protanopia, deuteranopia, tritanopia) para simular cómo ve tu paleta una persona con deficiencia visual del color. Asegúrate de que el contenido clave sea distinguible sin depender únicamente del color.

  • Evita distinciones solo por tono

    No te bases únicamente en el tono para transmitir información. Combina las diferencias de color con contraste de luminosidad, patrones, formas o etiquetas de texto.

  • Prueba con contenido real

    Los ratios de contraste se calculan frente al blanco en esta herramienta. Prueba siempre tu paleta con texto real y componentes de UI sobre los fondos reales que planeas usar en producción.

Preguntas frecuentes

¿A dónde van mis datos de color?
A ninguna parte. Todos los cálculos de color se realizan en tu navegador. No se envían datos de color a ningún servidor. La herramienta funciona sin conexión una vez cargada.
¿Qué tan precisas son las paletas generadas?
Las reglas de armonía siguen las matemáticas estándar de la teoría del color en la rueda HSL. Los colores generados son correctos para la regla seleccionada. La percepción del color es subjetiva, así que usa las paletas como punto de partida.
¿Qué formatos de color se admiten?
Puedes introducir colores como HEX (3 o 6 dígitos), RGB o HSL. La salida está disponible en los tres formatos, más variables CSS, config de Tailwind y texto plano.
¿Cómo funciona la vista previa de daltonismo?
La vista previa aplica matrices de transformación establecidas que simulan cómo ve la paleta una persona con protanopia, deuteranopia o tritanopia. Son aproximaciones para fines de diseño.
¿Puedo usar las paletas en proyectos comerciales?
Sí. Las paletas se generan a partir de reglas matemáticas de teoría del color. No hay restricciones de licencia sobre los colores en sí.
¿Por qué algunas armonías producen colores similares?
Cuando el color base tiene poca saturación (cerca del gris), las reglas basadas en el tono producen colores visualmente similares porque hay poco tono que rotar. Para paletas más variadas, elige un color base saturado.
¿Cuál es la diferencia entre complementario y split-complementario?
El complementario empareja el color base con el color directamente opuesto en la rueda (180°), creando el máximo contraste. El split-complementario usa los dos colores adyacentes al complemento (150° y 210°), ofreciendo alto contraste con menos tensión visual.
¿Cómo compruebo si mi paleta cumple los estándares WCAG?
Activa el panel de contraste para ver el ratio de contraste de cada muestra frente a un fondo blanco. La herramienta muestra si cada par supera los umbrales WCAG AA y AAA.
¿Puedo guardar mis paletas?
La herramienta guarda automáticamente tus últimas 10 paletas en el almacenamiento local del navegador. También puedes compartir cualquier paleta mediante un enlace URL.
¿Funciona la herramienta en móvil?
Sí. La disposición se adapta a cualquier tamaño de pantalla. En móvil, las muestras se apilan verticalmente y todas las funciones son accesibles.