Diseño
Herramientas para la parte de implementación del trabajo de UI: convierte colores y crea paletas, comprueba el contraste WCAG, compón degradados, sombras y patrones SVG, maqueta con Flexbox y Grid, ajusta curvas de easing y animación CSS, y convierte px a rem.
10 herramientas
Diseño
-
Conversor de colores
Convierte colores entre HEX, RGB, HSL y otros formatos para diseño, desarrollo frontend y una presentación visual coherente.
Abrir herramienta -
Generador de degradados
Crea degradados CSS de forma visual, ajustando el tipo, el ángulo, el centro, las paradas de color y la opacidad para fondos de UI, estados de componentes y visuales de marca.
Abrir herramienta -
Generador de sombras
Construye sombras CSS box-shadow de varias capas con controles visuales de desplazamiento, desenfoque, expansión, color y opacidad, y luego copia el código listo para producción.
Abrir herramienta -
Comprobador de contraste
Comprueba el contraste de texto, iconos, botones y componentes de UI frente a los requisitos de accesibilidad WCAG AA y AAA.
Abrir herramienta -
Generador de paletas
Genera escalas de color OKLCH, esquemas de color, paletas neutras, colores de texto legibles, variables CSS y JSON a partir de un solo color base.
Abrir herramienta -
Generador de patrones SVG
Construye patrones de fondo SVG en mosaico con puntos, cuadrículas, rayas, triángulos y ondas, y luego copia el CSS o descarga un SVG limpio.
Abrir herramienta -
Generador de Flexbox y Grid
Construye diseños responsivos de flexbox y CSS grid de forma visual con vista previa en vivo, y luego copia el CSS listo para producción para barras de navegación, tarjetas y galerías.
Abrir herramienta -
Generador de curvas Bézier cúbicas
Diseña curvas de suavizado CSS cubic-bezier arrastrando los puntos de control, previsualiza el movimiento en vivo y copia la función de temporización de la transición.
Abrir herramienta -
Generador de animaciones CSS
Construye animaciones de keyframes CSS a partir de una biblioteca de efectos de aparición, deslizamiento, zoom y llamada de atención, previsualiza el movimiento en vivo y copia el @keyframes y la abreviatura animation.
Abrir herramienta -
Conversor de px a rem
Convierte px, rem, em, pt y % respecto a una fuente raíz ajustable, crea una escala tipográfica modular, genera clamp() fluido y convierte CSS por lotes.
Abrir herramienta
Acerca de esta categoría
El trabajo de UI moderno vive entre los tokens de diseño y el CSS real. Una especificación se entrega en HEX, un diseñador quiere ver HSL, el código usa OKLCH y la auditoría de accesibilidad pide una relación de contraste, todo sobre el mismo color. Más allá del color, el espaciado, la profundidad, el easing y el tamaño de letra también hay que traducirlos del mockup a un CSS que funcione.
Estas herramientas traducen, generan y auditan en un solo lugar. Convierte entre formatos de color, comprueba el contraste frente a los umbrales WCAG y deriva una paleta perceptualmente uniforme a partir de un solo tono de marca; luego construye degradados y sombras en capas, prueba las propiedades de Flexbox y Grid, define el easing con una bézier, monta una animación por fotogramas y convierte px a rem según tu tamaño raíz. Cada paso te devuelve CSS listo para pegar.
Qué puedes hacer aquí
-
Color, paletas y contraste
Traduce entre HEX, RGB(A), HSL(A), HSV y OKLCH, deriva una escala perceptualmente uniforme a partir de un color de marca y comprueba los pares frente a los umbrales AA y AAA de WCAG.
-
Degradados, sombras y patrones
Compón degradados lineales, radiales y cónicos y sombras en capas de forma visual, genera patrones SVG que se repiten en mosaico y copia CSS listo para producción.
-
Maquetación y movimiento
Ajusta las propiedades de Flexbox y Grid y observa el efecto en vivo, define la curva de easing con una bézier cúbica y monta una animación por fotogramas para copiar el CSS.
-
Conversión de px y rem
Convierte entre px, rem y em según el tamaño raíz, crea escalas tipográficas y valores fluidos con clamp(), convierte un bloque de CSS entero de una vez y comprueba cómo se comporta con el zoom de accesibilidad.