Color y diseño
48 herramientas activas en esta categoría. Sin registro, sin upload. Todo corre en tu navegador.
Extraer paleta de imagen
Saca los 5 colores dominantes de cualquier imagen con HEX, RGB, HSL.
Convertir HEX / RGB / HSL / OKLCH
Convierte colores entre formatos con preview y contraste WCAG.
Generador de gradient CSS
Crea gradientes lineales y radiales con copy directo a CSS.
Generador de sombra CSS
box-shadow visual: offset, blur, spread, color, inset.
Comprobar contraste WCAG
Verifica el contraste de dos colores contra WCAG AA y AAA.
Buscar nombre de color
Identifica el nombre del color mas cercano (X11, CSS, Pantone-like).
Generador texto con gradient
Texto con gradient CSS, copy listo para usar en cualquier web.
Generador CSS clip-path
Genera clip-path visualmente: circulo, poligono, hexagono, estrella.
Mezclador de colores
Genera N pasos entre 2 colores con HEX copiable.
Tintas y sombras
Genera escala de tintas (claros) y sombras (oscuros) de un color.
Cuentagotas de imagen
Sube una imagen y extrae el color exacto de cualquier pixel.
Color desde texto
Genera color HEX deterministico a partir de un nombre o texto.
Generador CSS Grid
Define filas y columnas, ajusta gap y copia el CSS.
Playground Flexbox
Prueba justify, align, wrap, gap en vivo y exporta CSS.
Generador border radius
Controla las 4 esquinas o forma asimetrica eliptica.
Generador glassmorphism
Efecto cristal con blur, saturate y borde sutil.
Generador bento grid
Diseno bento con span de celdas y export CSS Grid.
Box shadow multi capa
Hasta 5 sombras apiladas con presets cinematicos.
Generador spinner CSS
Spinners loaders pure-CSS con preview y export.
Generador gradient mesh
Mesh de radial-gradients superpuestos. Export CSS y PNG.
Paleta color random
Genera paletas armonicas: mono, complement, triada, analoga.
Text shadow generator
Genera text-shadow con preview en vivo y presets.
Generador animacion CSS
Crea keyframes con preset (bounce, shake, fadeIn).
Animacion typewriter CSS
Animacion typewriter pura CSS con cursor parpadeando.
Generador botones gradient
Botones gradient con hover, sombras y radio. CSS listo.
Loaders puros CSS
20 loaders pure-CSS sin SVG ni JS. Copy de HTML+CSS.
Conversor unidades CSS
px, em, rem, %, pt, cm, in con base configurable.
Generador escala tipografica
Escala modular con base y ratio (golden, perfect fourth...).
Calculadora line-height
Recomienda line-height segun font-size y medida de linea.
Modular scale
Genera escalas matematicas para tamanos y espacios.
Constructor cubic-bezier
Editor visual con curva y preview de animacion.
Grid template areas
Define areas con nombres y exporta grid-template-areas.
Constructor tabla pricing
Genera tabla de precios responsive en HTML+CSS.
Tabla comparativa planes
Tabla con features comparadas entre N planes.
Simulador daltonismo
Previsualiza imagenes/colores como las ven daltonicos.
Grid de contraste
Matriz WCAG AA/AAA para tu paleta entera.
Calcular aspect ratio
Calcula nueva resolucion manteniendo la proporcion.
Generador box-shadow
Crea sombras CSS multi-capa con preview en vivo.
Generador gradiente
Disena gradientes linear/radial/conic con CSS export.
Paleta desde imagen
Extrae los colores dominantes de una imagen.
Picker colores Tailwind
Explora y copia toda la paleta Tailwind v3.
CSS vars desde imagen
Genera variables CSS con los colores de una imagen.
Playground easing
Visualiza y exporta cubic-bezier listo para CSS.
RGB a HSL (lote)
Convierte muchos colores entre RGB, HSL y HEX a la vez.
Tokens Figma a CSS
Convierte tokens exportados Figma a vars CSS o Tailwind.
Breakpoints Tailwind
Visualizador en vivo de breakpoints sm/md/lg/xl/2xl.
Editor path SVG
Edita un path SVG con vista previa en vivo.
Spinner CSS
Elige y exporta un spinner CSS animado puro.