Convierte un color en un sistema de diseno usable.
Elige un color base, genera paletas armonicas para UI, comprueba contraste WCAG, extrae colores de imagenes y exporta tokens listos para produccion.
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 practicos. Copia HEX, RGB, HSL y OKLCH para implementacion y documentacion.
Vista previa de vision del color
Simulaciones aproximadas para deficiencias comunes de vision del color. Son vistas previas de diseno, no diagnostico medico.
Comprobador de contraste WCAG
AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1.
Comprobacion manual
Mejores combinaciones
Comprobaciones automaticas con blanco, negro y colores de la paleta.
Exportar tokens
Copia variables CSS, configuracion Tailwind, SCSS, tokens JSON y tarjetas SVG/PNG descargables.
Descargar tarjeta de paleta
Exporta una tarjeta 1200x630 como PNG o SVG para documentacion, 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 produccion
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, exito, aviso y error.
- Mantén un solo acento fuerte para conservar coherencia visual.
Herramientas y guias de color
Paginas dedicadas a contraste, paletas Tailwind, variables CSS, extraccion de imagenes y gradientes.
Como crear una paleta accesible
Parte de un color de marca, elige una armonia, verifica contraste y exporta tokens.