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 visión del color

Simulaciones aproximadas para deficiencias comunes de visión 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.

Comprobación manual

Ratio
--
Texto de interfaz legible

Mejores combinaciones

Comprobaciones automáticas 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 pequeño 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 detrás de párrafos.
  • Comprueba el texto con mínimo 4.5:1 antes de publicar.
  • Prueba estados UI importantes: hover, deshabilitado, éxito, aviso y error.
  • Mantén un solo acento fuerte 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.Paleta de colores accesibleDiseña paletas que mantienen el texto legible y compatibles con WCAG.Generador de paletas de marcaCrea una paleta de marca desde un logo o color primario y exporta variables CSS y tokens de diseño.Generador de paletas para gráficosGenera colores distintos para dashboards y visualización de datos, con contraste y riesgo daltonismo.Simulador de daltonismoPrevisualiza paletas para deuteranopia, protanopia y tritanopia antes de publicar combinaciones de riesgo.Convertidor de color HEX, RGB, HSL y OKLCHConvierte colores entre HEX, RGB, HSL y OKLCH y copia valores listos para CSS y documentación.Generador de armonía de colorGenera armonías complementarias, análogas, triádicas, split, tetrádicas y monocromáticas.Generador de paletas de colorGenera paletas armónicas desde un color base con reglas complementarias, análogas, triádicas y monocromáticas.Generador de tonos de colorGenera una escala 50-950 desde un color base para superficies UI, bordes, hover y modo oscuro.Generador de paleta modo oscuroCrea paletas dark mode con texto legible, superficies muted, bordes y acentos accesibles.Generador de design tokensCrea design tokens de color desde una paleta y exporta CSS variables, SCSS maps, JSON y Tailwind.Generador de tema shadcnMapea una paleta a variables CSS estilo shadcn para background, foreground, primary, muted, accent y destructive.Generador de esquemas de color webCrea un esquema de color web con colores primarios, neutros y acentos para hero, botones, cards y formularios.


Cómo crear una paleta accesible
Parte de un color de marca, elige una armonía, verifica contraste y exporta tokens.
¿Complementaria o análoga?
La paleta complementaria usa colores opuestos en la rueda y da un contraste fuerte. La análoga usa tonos vecinos y resulta más suave, buena para interfaces densas.
¿Por qué importa el contraste?
El texto con poco contraste queda bien en un mockup y se vuelve ilegible en la pantalla de quien lo usa. Para texto de lectura apunta como mínimo a WCAG AA, es decir 4,5:1.
¿Sirve para Tailwind?
Sí. La exportación Tailwind genera la escala del color primario de 50 a 950, más el color de acento cuando existe.
¿Se suben las imágenes?
No. La extracción de color usa canvas en tu navegador. Ningún archivo sale de tu dispositivo.