Herramientas de diseño

Genera un código QR a partir de texto o una URL en tu navegador. Ajusta el tamaño y los colores y exporta una imagen para puntos de entrada de eventos, landing pages, pósters y materiales impresos. El contenido permanece en esta página y no se sube.

Decodifica códigos QR localmente en el navegador a partir de una imagen subida, una URL de imagen o la cámara. Útil para leer códigos QR de capturas, comprobar imágenes QR remotas y escanear en el sitio.

Convierte colores entre HEX, RGB, HSL, HWB, CMYK y variables CSS en tu navegador. Incluye un selector de color y un generador de colores aleatorios para entregas de diseño, trabajo con hojas de estilos y alineación de colores de marca.

Ajusta visualmente el desplazamiento, el desenfoque, la propagación, el color, la opacidad y el inset. Previsualiza en vivo y genera el CSS de box-shadow para tarjetas, botones y superposiciones.

Calcula el contraste entre primer plano y fondo con las reglas WCAG 2.0 y comprueba AA/AAA para texto normal y grande. Útil para paletas accesibles y revisión de legibilidad en interfaces web.

Crea visualmente degradados CSS lineales, radiales y cónicos. Ajusta el ángulo y las posiciones de parada, añade varias paradas y copia el CSS para fondos, botones y transiciones de marca.

Convierte entre px, rem, em, pt, vw, vh y %. Personaliza el tamaño de fuente raíz, el tamaño de fuente del contenedor padre y el tamaño de la ventana gráfica para trabajos adaptables y entregas de diseño a código.

Genera paletas con reglas monocromáticas, análogas, complementarias, triádicas o totalmente aleatorias. Bloquea muestras individuales y sigue aleatorizando el resto para exploración de interfaz y derivados de colores de marca.

Ajusta visualmente el desenfoque, la opacidad, el color de fondo y la opacidad del borde para generar CSS de cristal esmerilado con prefijo -webkit. Útil para tarjetas, barras de navegación y capas de modal.

Arrastra o escribe valores para visualizar y generar código CSS de border-radius irregular de 8 puntos.

A partir de anchos de viewport mínimo/máximo y un rango de tamaño objetivo, calcula una fórmula clamp() para tamaños de fuente fluidos, espaciado y otras longitudes que escalan con el viewport.

Convierte letras y dígitos en inglés a arte ASCII apto para terminal, para banners de CLI, texto MOTD y títulos de README en texto plano. Copia el resultado directamente.

Incrustra SVG en una cadena CSS background-image: url(...) mediante codificación URI o Base64. Útil para iconos pequeños que quieres conservar en el CSS en lugar de en archivos de recursos separados.

Pega una cadena larga de path d="M10 20 L... Z" o una etiqueta path completa para visualizarla sobre una cuadrícula e inspeccionar la longitud y el recuento de comandos mientras depuras iconos.

Combina desenfoque, escala de grises, contraste y funciones de filtro CSS relacionadas con vista previa en vivo. Arrastra los deslizadores para crear pilas como filter: blur(2px) grayscale(100%); y copia el resultado.

Genera visualmente CSS de cinta en esquina inclinada para tarjetas. Cambia el texto, los colores, el desplazamiento, el ancho y el tamaño de fuente para insignias de oferta, agotado y estados similares.

Invierte un color restando cada canal RGB de 255. Compara los colores de origen e invertido, previsualiza capas de muestra y exporta un fragmento de variable CSS para exploración de temas oscuros.

Genera paletas pastel suaves y de estilo Morandi en tu navegador. Elige la cantidad y el estilo, bloquea las muestras que quieras conservar y exporta listas HEX o variables CSS para gráficos, fondos y temas de interfaz suaves.

Aplica matrices de deficiencia de visión del color a una vista de muestra para que puedas previsualizar cómo la protanopía, la deuteranopía, la tritanopía o la acromatopsía pueden cambiar los colores de la interfaz. Úsalo para detectar problemas de contraste y de color de estado antes de publicar.

Redimensiona y recodifica imágenes localmente con Canvas. Define las dimensiones máximas, la calidad y el formato de salida y descarga el resultado. Los archivos originales permanecen en el navegador y no se suben.

Ajusta flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo. Añade o elimina cajas para ver el ajuste de línea y el espaciado y copia el CSS generado (y el andamiaje HTML) en tu proyecto.

Define el número de columnas y filas, además de los espacios, para generar una maquetación básica con display:grid. Previsualiza la estructura de pistas, prueba plantillas rápidas y copia CSS o HTML para paneles de administración y rejillas de tarjetas.

Explora palabras clave comunes de cursor CSS, pasa el ratón por encima para previsualizar, filtra por búsqueda o categoría y copia declaraciones cursor. Útil al elegir cursores de redimensionamiento, arrastre o estado deshabilitado.

Explora las escalas de color de Tailwind CSS (incluidos los pasos 50–950) en un solo tablero. Busca por nombre, escala o HEX y copia nombres de clases utilitarias o valores HEX sin procesar para proyectos CSS.

Pega declaraciones CSS y mápealas a clases utilitarias de Tailwind cuando sea posible. Las reglas comunes de maquetación, espaciado y color se convierten en clases estándar; los valores sin coincidencia recurren a la sintaxis de valor arbitrario.

Convierte fragmentos HTML a React JSX en el navegador. Cambia class/for a className/htmlFor, cierra etiquetas vacías y convierte estilos en línea a forma de objeto. La conversión permanece local.

Busca y copia emoji de uso habitual en documentación, mensajes de commit y registros de cambios. Filtra por palabra clave o categoría para encontrar símbolos de estado, progreso y advertencia rápidamente.

Consulta entidades HTML comunes y referencias numéricas de caracteres para espacios, moneda, matemáticas y símbolos tipográficos. Copia formas con nombre o numéricas para un marcado fuente más seguro.

Estima la probabilidad de al menos una colisión para una longitud de bits de hash y un tamaño de muestra dados usando la aproximación de la paradoja del cumpleaños. Útil para IDs cortos y checksums truncados. El cálculo se realiza en el navegador.

Explora los colores con nombre de W3C/CSS y sus valores. Filtra por palabra clave o familia y copia el nombre del color o el HEX para trabajo con CSS nativo.

Pega marcado SVG, extrae los colores de fill/stroke a una paleta editable, previsualiza los cambios en vivo y copia el SVG actualizado. Pensado para recolorear iconos y teñido vectorial sencillo.

Elige un color base y genera esquemas con reglas complementaria, análoga, triádica, tetradítica, complementaria dividida o monocromática. Previsualiza el uso en la interfaz y exporta variables CSS para trabajo de marca y componentes.

Ajusta ancho, alto, padding, border y margin con un diagrama de modelo de caja en vivo. Compara la ocupación de content-box frente a border-box y copia el CSS correspondiente.

Dibuja una regla de píxeles horizontal o vertical en la página. Ajusta la longitud y el espaciado de las marcas y consulta el tamaño de la ventana y la relación de píxeles del dispositivo para comparar medidas en píxeles CSS con maquetaciones y modelos de diseño.

Consulta en tiempo real qué punto de ruptura del framework CSS coincide con el ancho actual de la ventana. Los ajustes predefinidos cubren Tailwind CSS, Bootstrap y Material UI, además de una lista personalizada para depuración adaptable.

Empareja un color con los colores con nombre CSS más cercanos en tu navegador. Los candidatos se ordenan por distancia de color con nombres y valores hex: útil para alinear palabras clave, encontrar coincidencias cercanas o aprender los nombres de color estándar.

Compara dos imágenes píxel a píxel en el navegador. Los píxeles distintos se resaltan en rojo con recuentos y porcentajes: útil para capturas de regresión de interfaz, comprobaciones de versiones de diseño y revisiones de antes y después. Las imágenes permanecen locales.

Comprueba el contraste WCAG de muchos pares primer plano/fondo a la vez. Consulta los niveles AA/AAA y las vistas previas de texto: útil para auditorías de sistemas de diseño, lotes de colores de marca y revisiones de accesibilidad.

Mezcla cuatro colores de control de esquina en degradados radiales por capas con desenfoque para crear fondos suaves tipo malla y CSS copiable: útil para landing pages, visuales de marca y experimentos multicolor.

Ajusta color, opacidad, desenfoque y contorno para previsualizar y generar CSS de tarjeta de cristal esmerilado con backdrop-filter. Útil para paneles translúcidos y capas de navegación; todo se ejecuta en el navegador.

Genera CSS de sombras neumórficas inset/outset a partir del color de fondo, la distancia y el desenfoque. Previsualiza aspectos en relieve y pulsado para botones, tarjetas y controles ligeros de Soft UI.

Edita visualmente los cuatro puntos de control de cubic-bezier, previsualiza la curva de suavizado y copia una función de temporización para transiciones y animaciones: útil para movimientos de botón y transiciones de página.

Genera clases de Tailwind Grid a partir de columnas, espaciado y número de elementos con una vista previa en vivo: útil para rejillas de tarjetas, maquetaciones de prototipo y experimentos rápidos de columnas.

Genera formas CSS clip-path a partir de ajustes predefinidos y controles sencillos con una vista previa en vivo: útil para tarjetas en ángulo, insignias, recortes de imagen y maquetaciones decorativas.

Codifica un archivo de fuente a Base64 en el navegador y genera un fragmento @font-face incrustable: útil para demos, plantillas de correo electrónico y páginas de un solo archivo que incrustan fuentes temporalmente. Los archivos permanecen locales.

Extrae los colores dominantes de una imagen en el navegador y crea una paleta HEX copiable. Las imágenes no se suben: útil para muestrear pósters, referencias de marca y análisis rápido de colores principales.

Elige una dirección, tamaño y color para generar un triángulo CSS puro con bordes, con vista previa en vivo y código copiable.

Genera patrones de fondo CSS puros como puntos, rayas, cuadros y rejillas. Ajusta los colores y el tamaño y copia el CSS para rellenos decorativos, marcadores de posición y experimentos visuales.

Limpia comentarios, metadatos de editor y espacios en blanco extra del SVG localmente en el navegador para producir un marcado más corto: útil para comprimir iconos, limpiar exportaciones y preparar SVG inline. Es un limpiador ligero, no una pipeline completa de plugins SVGO.

Genera un marcador de posición SVG ligero a partir del ancho, el alto, el fondo, el texto de etiqueta y el tamaño de fuente: útil para huecos de imagen en prototipos, esqueletos de listas y marcadores de carga. Copia el marcado SVG cuando esté listo.