Herramienta gratuita en el navegador - sin subida - sin cuenta

Convierte un color en un sistema de diseño usable.

Elige un color base, genera paletas armónicas para UI, comprueba contraste WCAG, extrae colores de imágenes y exporta tokens listos para producción.

Abrir herramienta
EnglishItalianoEspañolFrançaisDeutsch

Paleta generada

Haz clic en un color para copiar su HEX. La escala de tonos sirve para botones, estados, tarjetas y superficies UI.

Escala de tonos

Inspector de color

Consulta el color base en formatos prácticos. Copia HEX, RGB, HSL y OKLCH para implementación y documentación.

#E24B4A

Vista previa de vision del color

Simulaciones aproximadas para deficiencias comunes de vision del color. Son vistas previas de diseño, no diagnóstico médico.

Comprobador de contraste WCAG

AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1.

Comprobacion manual

Ratio
--
Texto de interfaz legible

Mejores combinaciones

Comprobaciones automaticas con blanco, negro y colores de la paleta.

Exportar tokens

Copia variables CSS, configuración Tailwind, SCSS, tokens JSON y tarjetas SVG/PNG descargables.

Descargar tarjeta de paleta
Exporta una tarjeta 1200x630 como PNG o SVG para documentación, redes y brand boards.
Generada localmente en el navegador.


Extraer colores de imagen
Suelta un PNG, JPG o WebP. La imagen se procesa localmente en tu navegador.


Generador de gradientes
Crea gradientes CSS desde la paleta actual.


Vista previa UI
Un pequeno mockup de interfaz para comprobar que la paleta funciona en un contexto real.


Checklist de producción
Una checklist breve para usar la paleta en un sitio real.
  • Usa el tono 500 como color principal y reserva 600/700 para hover y estados activos.
  • Usa tonos 50/100 para superficies, no colores saturados detras de parrafos.
  • Comprueba el texto con minimo 4.5:1 antes de publicar.
  • Prueba estados UI importantes: hover, deshabilitado, éxito, aviso y error.
  • Mantén un solo acento fürte para conservar coherencia visual.


Herramientas y guías de color
Páginas dedicadas a contraste, paletas Tailwind, variables CSS, extracci?n de imágenes y gradientes.
Comprobador de contraste WCAGComprueba si texto y fondo cumplen los ratios de contraste WCAG AA y AAA.Generador de colores TailwindCrea una escala Tailwind 50-950 desde un color de marca.Generador de variables de color CSSGenera custom properties CSS y tokens de diseño desde una paleta.Extractor de colores de imagenExtrae colores dominantes de imágenes localmente en el navegador.Generador de gradientes CSSCrea gradientes CSS lineales, radiales y cónicos desde una paleta.


Cómo crear una paleta accesible
Parte de un color de marca, elige una armonía, verifica contraste y exporta tokens.