Localia
EN

PalettePilot

Generador de paletas de colores

PalettePilot genera paletas de color a partir de un color base usando reglas de armonía clásicas, o extrae los colores dominantes de una imagen de tu equipo. Cada color se muestra en HEX, RGB y HSL y se copia con un clic.

Las imágenes se analizan en tu navegador y las paletas favoritas se guardan solo en este dispositivo.

Cargando la herramienta…

Para que la paleta sea útil en una interfaz real, la herramienta calcula la relación de contraste entre texto y fondo según la fórmula de WCAG 2.2 y te indica qué niveles (AA, AAA) cumple cada combinación, tanto para texto normal como grande.

Para qué sirve

Identidad de marca

Parte del color principal de tu marca y obtén combinaciones armónicas para la web, redes y documentos.

Webs accesibles

Comprueba que cada combinación de texto y fondo cumple el contraste WCAG AA o AAA antes de usarla.

Colores de una foto o un logo

Extrae los colores dominantes de una imagen para crear una paleta coherente con ella.

Pasar la paleta al código

Exporta a variables CSS, SCSS, Tailwind, JSON o a una paleta de GIMP e Inkscape.

Cómo se usa

  1. Elige un color base o extrae colores de una imagen.
  2. Selecciona el tipo de armonía: complementaria, análoga, triádica, monocromática y más.
  3. Revisa la matriz de contraste y la vista previa para elegir combinaciones legibles.
  4. Guarda la paleta en favoritos o expórtala a CSS, JSON, SVG o GIMP.

Preguntas frecuentes

¿Qué significa AA y AAA?
Son niveles de conformidad de las pautas WCAG. Para texto normal, AA exige un contraste mínimo de 4,5:1 y AAA de 7:1. Para texto grande (24 px, o 18,66 px en negrita) bastan 3:1 y 4,5:1.
¿Una paleta que cumple AA es accesible?
El contraste es un requisito importante, pero la accesibilidad también depende del tamaño del texto, de no transmitir información solo con color y de otros factores de diseño.

Limitaciones

  • El contraste se calcula para colores opacos; las transparencias no se tienen en cuenta.
  • La extracción de colores trabaja sobre una versión reducida de la imagen, por lo que los detalles muy pequeños pueden no aparecer.