Herramientas de diseño: color, efectos CSS, imágenes

Elige colores, construye degradados y sombras CSS, convierte y recorta imágenes - todo en el cliente, sin subida, sin registro.

Un hub pensado para diseño y UI. Elige colores de marca y comprueba el contraste WCAG, genera paletas armónicas y rampas de tono para un design system, construye degradados CSS / box-shadows / clip-paths / filtros / glassmorphism con vistas previas en vivo y declaraciones listas para copiar, y pasa una imagen por las herramientas de conversión / redimensionado / compresión / recorte / cuentagotas sin subirla. Todo en tu navegador; los archivos no salen del dispositivo.

Color

Conversor de colores (HEX, RGB, HSL)

Convierte colores entre HEX, RGB, HSL y OKLCH.

Generador de paleta de colores

Genera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de cualquier color base.

Generador de tonos de color

Genera 10 tonos y 10 tintes de cualquier color - listo en lista hex o variables CSS.

Comprobador de contraste

Comprobador de contraste WCAG con ratio en vivo, insignias AA/AAA y texto de muestra.

Selector de color de imagen

Suelta una imagen, haz clic en cualquier píxel para obtener su hex, RGB y HSL - y construye una paleta sobre la marcha.

Efectos CSS

Generador de degradados CSS

Construye degradados CSS lineales y radiales con vista previa en vivo.

Generador de sombra CSS

Apila varias sombras CSS con preajustes, vista previa en vivo y declaración lista para copiar.

Generador de filtro CSS

Patio de juego CSS filter con sliders para blur, brillo, contraste, saturación, sepia, escala de grises, invert, hue-rotate y opacidad.

Generador de glassmorphism

Vidrio esmerilado en CSS con vista previa en vivo - ajusta color de fondo, backdrop blur, borde y sombra sobre un fondo cargado.

Formas y animación

Generador de clip-path CSS

Crea clip-paths visualmente - triángulo, hexágono, estrella, bocadillo - con vista previa en vivo y CSS listo para copiar.

Generador de border-radius

Border-radius asimétrico con 8 valores de esquina, vista previa en vivo y preajustes (píldora, blob, hoja, ticket).

Generador cubic-bezier

Editor cubic-bezier visual con vista previa animada y 12 preajustes de easing estándar.

Procesado de imagen

Conversor de imagen

Convierte PNG, JPG, WebP y AVIF en tu navegador - sin subida, sin registro.

Redimensionador de imagen

Redimensiona imágenes por píxeles o porcentaje en tu navegador - sin subida.

Compresor de imagen

Reduce el tamaño de JPG y WebP con slider de calidad y vista previa antes/después en vivo.

Recortador de imagen

Recorta imágenes arrastrando una selección - libre o con relaciones de aspecto fijas (1:1, 4:3, 16:9, 9:16).

Imagen a Base64

Convierte una imagen a Data URI (base64) con fragmentos CSS y HTML listos para pegar - o pega un Data URI para previsualizar.

Otros

Generador de favicon

Suelta una imagen cuadrada, descarga favicons PNG en todos los tamaños estándar.

Herramientas de diseño gratuitas: cuentagotas de color, generadores CSS y utilidades de imagen

La mayoría de las herramientas de diseño son aplicaciones pesadas o sitios web ultra-especializados. Este hub reúne los pequeños utilitarios del día a día de un diseñador web o de producto: conversor de colores hex / RGB / HSL, generador de paleta que emite las cinco armonías clásicas desde un hex base, generador de rampa de tonos (50-950 estilo Tailwind), comprobador de contraste WCAG con insignias AA / AAA, cuentagotas que toma colores de cualquier imagen, editor de degradado CSS multi-stops, apilador de box-shadow con preajustes de Material elevation, editor de clip-path con doce polígonos preajustados, generador de border-radius asimétrico, editor de easing cubic-bezier, sala de juegos de filtros CSS (blur / brillo / contraste / saturación / hue-rotate) y generador de glassmorphism con vista previa sobre fondo cargado.

Por el lado de imagen, cinco herramientas en cliente: conversor de formato (PNG / JPG / WebP / AVIF), redimensionador con bloqueo de aspecto, compresor por calidad con vista previa antes/después, codificador base64 / Data URI para uso inline en HTML y CSS, y recortador drag-rectangle con preajustes de proporción. Cada una corre vía el Canvas del navegador; las imágenes no salen del dispositivo, así que las sesiones de trabajo siguen privadas y no hay tiempo de subida en conexiones lentas.

Todas las herramientas son gratuitas, sin registro, con copia localizada en inglés, francés, español, alemán y portugués. Las páginas cargan en milisegundos y pesan bastante menos de 250 KB de JavaScript - ligeras incluso compartiendo conexión desde el móvil o tras un proxy corporativo que limita las subidas.